:root{--gradient:-webkit-linear-gradient(35deg,#f53396,#f57d56)}body{margin:0 auto}#__next{text-align:center;background:#f4f0f2;width:100%;min-height:100vh;display:grid;grid-template-columns:auto;grid-template-rows:auto 1fr;grid-template-areas:"header" "main" "sidebar" "footer"}header{grid-area:header;width:100%;position:sticky;top:0;box-shadow:0 0 8px 0 #f4f0f2,0 0 12px 0 rgba(0,0,0,.18);background-color:#fff;z-index:1}.logo{font-size:1.7rem;-webkit-text-fill-color:transparent;float:left;padding-top:.5rem;margin-left:.5rem}.logo,.pointer-cursor{background:var(--gradient);-webkit-background-clip:text}.pointer-cursor{float:right;text-align:center;vertical-align:middle;margin-top:.25rem;margin-right:1rem;font-size:2rem;line-height:2.6rem;-webkit-text-fill-color:transparent}nav{display:none}#nav-toggle:checked+.pointer-cursor{font-size:3rem}.pointer-cursor:after{content:"☰"}#nav-toggle:checked+.pointer-cursor:after{content:"×"}#nav-toggle:checked~nav{display:inline-block;background-color:#fff;border-top:.1rem solid #f55b78;width:100%;margin-top:4px;box-shadow:0 0 8px 0 #f4f0f2,0 0 12px 0 rgba(0,0,0,.18);font-size:1.15rem;line-height:2rem}nav li a:hover,nav li a:link,nav li a:visited{color:orange}nav a{text-decoration:none;color:#f55b78}nav li a:active,nav li a:hover{color:tomato}.nav{text-align:center}.nav ul{padding:0 1.6rem;margin:.7rem 0;list-style-type:none;display:inline-block}main{grid-area:main;margin:0 .75rem;display:grid;grid-template-rows:auto 1fr}.main-head,main{background:#f5eff2}.main-head{width:100%;padding:1rem 0;font-size:.5rem}.main-head h1{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.main-content{border-radius:.2rem}.main-content,sidenav{background:#fff;padding:1rem}sidenav{grid-area:sidenav;width:100%;position:fixed;bottom:0;left:0;box-shadow:0 0 8px #f4f0f2}sidebar{grid-area:sidebar;border-radius:.2rem;margin:.3rem .75rem 0}footer,sidebar{background:#fff}footer{grid-area:footer;margin-top:.3rem;padding:1rem 1rem 4rem;text-align:center}footer p{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media only screen and (min-width:768px){#__next{grid-column-gap:.75rem;column-gap:.75rem;grid-template-columns:8rem 1fr 16rem;grid-template-areas:"header header header" "sidenav main sidebar" "footer footer footer"}main{margin:0}sidenav{margin-top:.1rem;border-radius:.2rem;padding:0}sidebar,sidenav{height:100vh;position:sticky;top:3.1rem}sidebar{background:#fff;margin:.1rem 0 0}footer{padding:1rem;z-index:1}}