:root{--light-blue: #7cbdc9;--khaki: #d0d0b8;--olive: #afbaa3;--emerald: #40817a;--cyan: #40817a;--text: #1e1e1e}*{transition:all .5s}body{display:grid;background-color:var(--khaki);color:var(--text);font-family:share tech,sans-serif}header{grid-area:header;text-align:center;font-size:24px}nav{grid-area:nav;border-style:double;border-width:3px;border-color:var(--olive);background-color:var(--light-blue)}main p{font-family:montserrat,sans-serif}code{font-family:share tech mono,monospace;display:inline-block;overflow:auto;max-width:90vw;scrollbar-width:none}main{grid-area:main}footer{grid-area:footer;border-style:double;border-color:var(--olive);background-color:var(--light-blue)}article{border-style:double;border-color:var(--olive);background-color:var(--emerald);overflow:hidden}ul li{display:inline-block}@media(max-width:875px){body{grid-gap:5px;grid-template-areas:"header" "nav" "main" "footer"}header{}nav{grid-row:2}nav ul li{padding-left:10px;padding-right:10px}main{grid-row:3}article{padding-left:10px;padding-top:15px;max-width:calc(100vw - 10px - 10px - 6px)}}@media(min-width:875px){body{grid-gap:10px;grid-template-areas:"header header" "nav main" "footer footer";grid-template-columns:70px auto}nav ul li{display:block;padding-bottom:10px}ul{padding:10px}article{padding-left:50px;padding-top:50px}}