html{font-size:16px}body{color:#222;font-family:sans-serif;line-height:1.5;margin:1rem}header{display:flex;border-bottom:1px solid #222;margin-bottom:1rem;position:sticky;top:0;background:#fff}footer{border-top:1px solid #222;margin-top:1rem}img{width:100%;height:100%}main{inline-size:calc(200px + 50%);margin:0 auto}blockquote{background:#f5f5f5;margin:0 3rem;padding:1rem}header+div{flex:1}header div:nth-child(2){flex:2;align-self:center;margin-inline-start:2rem;nav { ul { display: flex; list-style: none; li { flex:auto; } } }}a{text-decoration:none}a:hover{text-decoration:underline}a:link{color:unset}a:visited{color:unset}.alert{font-size:2rem;text-align:center;width:60vw;color:#64f050;padding:1rem;margin:0 auto;animation:1s cubic-bezier(.25,.1,.25,1)alternate infinite blink}@keyframes blink{from{background-color:#9614c8}to{background-color:#dc32ff}}nav a{text-decoration:none;color:unset;padding:2rem}nav a:hover{background-color:#f5f5f5}main{display:flex;align-items:flex-start}main div{flex:1;align-self:first baseline;h1 { }}section{flex:3;align-self:first baseline;h2 { }}@media screen and (max-width:800px){main{inline-size:100%}nav a{text-decoration:none;color:unset;padding:0}header{display:block}header div{text-align:center}header div h1{margin:0}header div:nth-child(2){margin:0;nav { ul { flex:1; list-style: none; padding:0; li { } } }}main{display:block}section{margin-inline-start:1rem}}