p,td,ul,span,a,li,h1,h2,h3,h4,h5,h6{ 
	font-family: Verdana,Candara,Arial,Helvetica,sans-serif;  }

p,td,ul,span,a,li,main{ 
	font-size: medium; 
	font-weight:100;}

header:h1{
	font-size: large}
main:h2{
	font-size: larger}
main:h3{
	font-size:medium}


a {
	display: inline-block;
	color:mediumblue;
	font-weight:500;
	text-decoration:none;
	text-align: left;
	width: min-content;
	white-space: pre;
}

a:hover {
	background-color: cadetblue;
}



body {
	display: grid;
	gap: 0.5em;
}
/* 2-spaltiges Layout für breitere Viewports */

@media (min-width: 30em) {
	body {
		grid-template-columns: 1fr 3fr;
		grid-template-rows: auto auto;
	}
}

header{
	grid-column: 1 / -1;
}

nav {
	grid-row: 2 / 4;
}

header {
	background: #F1F3F4;
	border-color: #d5d5d5;
	display: grid;
	grid-template-columns: 4fr;
	gap: 1em;
}

nav {
	background: #fffbf0;
}

main {
	background: #ffede0;
}

body {
	margin: 0 auto;
	max-width: 60em;
}

header,
nav,
main
{
	border-radius: 0.5em 0.5em 0.5em;
	border: thin solid;
	padding: 1em;
}