header,
nav,
main,
article,
aection,
aside,
footer {
	font-family: "Lucida Console", "Comic Sans", Arial;
}
body {
    display: grid;
		gap: 0.5em;
}

@media (min-width: 45em) { 
	/* Breite beträgt mindestens 45em */ 
	body {
    grid-template-columns: 1fr 3fr 1fr;	
    grid-template-rows: auto 1fr 100px;
	}
}



header,
nav,
main,
article,
aection,
aside,
footer {
	border-radius:0px 0.9em 0.5em;
	border: thin solid;
	padding: 10px;
}

header,
footer {
	grid-column: 1 / -1;
}
header {
	background: #CCE5FF;
	border-color: #5c6178;
	display: flex;
	align-items: center;
  	justify-content: center;
	<!--display grid: -->
	grid-template-columns: min-content 1fr;

}

nav {
	background: #E5FFFF;
	border-color: #5c6178;
}

main {
	background: #E5FFFF;
	border-color: #5c6178;
}

aside {
	background: #E5FFFF;
	border-color: #5c6178;
}

footer {
	background: #b5bee0;
	border-color: #5c6178;
}

footer * {
	float: right;
	clear: right;
	margin: 0 0 1em;
}

body {
	margin: 0 auto;
	max-width: 80em;
	font-family: san-serif;
}
a {
	color: blue;
	box-shadow: inset 0 -3px 0 -1px blue;
	padding: .25em 0;
	text-decoration: none;
	transition: all .5s ease;
}

a:hover,
a:focus {
	box-shadow: inset 0 -30px 0 skyblue;
}

li {
	margin-bottom: .5em;
}
hr { 
    width: 95%; 
    height: 1px; 
    margin: 0 auto;
    color: #b5bee0;
    background: #b5bee0;
}
 .before::before, .after::after {
            content: "\A";
            white-space: pre;
}
#line {
	stroke: none;
	animation: rotation1 2s infinite linear;
}
#line {
	fill: #dfac20;
	animation: rotation1 20s infinite linear;
}
@keyframes rotation1 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes rotation2 {
	0% {
		transform: translate(150px, 30px) rotate(0deg);
	}
	100% {
		transform: translate(150px, 30px) rotate(360deg);
	}
}