*
{
  margin: 0;
  box-sizing: border-box;
}

img
{
  max-width: 50%;
  height: auto;
}

.grid-container
{
  display: grid;
  grid-template-areas:
    'header'
    'main'
    'footer';
    gap: 10px;
    background-color: lightyellow;
    padding: 10px;
}

.grid-container > div
{
  padding: 10px;
  font-size: 16px;
}

.header
{
  grid-area: header;
/*  background-color: purple;
  text-align: center;
  color: #ffffff;*/
}

.header > h1
{
    font-size: 40px;
    color: rgb(129, 0, 254);
}

.liste
{
  grid-area: main;
}


table
{
    border-collapse: collapse;
    background-color: rgb(203, 249, 203);
}

th
{
    color: rgb(0, 117, 13);
    background-color: rgb(206, 227, 238);
    font-family: Verdana;
    font-style: italic;
}

#admin
{
	background: #ace3f9;
}
#admin:hover
{
	background: rgba(227, 61, 15, 0.39);
}

#count
{
    text-align: right;
}

.fod
{
  grid-area: footer;
}
.fod > p
{
  margin-bottom: 7px;
}


@media only screen and (max-width: 600px)
{
	.header {grid-area: 1 / span 1;}
	.liste {grid-area: 2 / span 1;}
	.fod {grid-area: 3 / span 1;}

	table, th, td
	{
		border: 1px solid;
		font-size: 24px;
	}

	p, a
	{
		font-size: 24px;
	}

	#sizemarker
	{
	    background-color: lightpink;
	}
}

@media only screen and (min-width: 600px)
{
	.header {grid-area: 1 / span 1;}
	.liste {grid-area: 2 / span 1;}
	.fod {grid-area: 3 / span 1;}

	table, th, td
	{
		border: 1px solid;
		font-size: 22px;
	}

	p, a
	{
		font-size: 22px;
	}

	#sizemarker
	{
		background-color: lightcyan;
	}
}

@media only screen and (min-width: 768px)
{
	.header {grid-area: 1 / span 1;}
	.liste {grid-area: 2 / span 1;}
	.fod {grid-area: 3 / span 1;}

	table, th, td
	{
		border: 1px solid;
		font-size: 18px;
	}

	p, a
	{
		font-size: 18px;
	}
	#sizemarker
	{
		background-color: lightgoldenrodyellow;
	}
}