body { display:grid; gap:0.5em; margin:0 auto; max-width: 60em; font-family:sans-serif; background:linear-gradient(#111,#c00);min-height:101vh;font-size:110%}

li {list-style:none}
a {text-decoration:none}
@media (min-width: 30em) {
	body { grid-template-columns:1fr 3fr; grid-template-rows:auto 1fr 100px;}
}

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

header { 
	background: #F1F3F4;
	border-color: #d5d5d5;
	display: grid;
	grid-template-columns: min-content 1fr;
  margin-top:15px;
}
header img {border-radius: 50%; width:100px; margin:0 20px;}
article  { background:#ffede0; border-color:#df6c20; }

nav { background: rgba(240, 240, 240, 0.8); border-color:#8db243; line-height:1.8;}
h1, h2 {margin:2px;padding:2px;}

footer a {text-decoration:none;}
footer * { float:right; clear:right; margin: 0 0 1em; }

header, nav, main, article, section, aside, footer {
	border-radius: 0px 0.6em 0.6em;
	border: 1px solid;
	padding: 10px; 
}

footer{ background:#eef; border: 3px solid red; font-size:70%; height:20px; }