@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap);*{-moz-box-sizing:border-box;box-sizing:border-box}body,html{padding:0;margin:0;font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}main{height:100vh;display:grid;grid-template-columns:300px 1fr 1fr;grid-template-areas:"nav title title" "nav sub sub" "nav desc desc" "nav chars chars" "footer footer footer";overflow:scroll}main>nav{grid-area:nav}button{font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit;text-decoration:none;outline:none}h1,strong{font-weight:900}h1{font-size:3vw;grid-area:sub;place-items:center;display:grid}h1,h2{text-align:center}h2{font-size:2.5em;text-transform:capitalize}.brand{margin-bottom:1em}.brand .name{font-size:2em;font-weight:900;letter-spacing:-.05em;line-height:1;margin:0;display:block;width:100%;text-transform:uppercase}.brand .name:before{background:url(/logo.svg) no-repeat;background-size:contain;content:"";display:inline-block;-webkit-filter:invert();filter:invert();height:1em;position:relative;top:.1em;width:1em}.text{grid-area:desc;max-width:40em;margin:0 auto 2em;opacity:.7;text-align:center}.characters{display:grid;grid-gap:1em;max-width:50em;margin:2em auto;grid-template-columns:repeat(4,1fr);grid-area:chars}.menu,.menu-button{display:none}footer{grid-area:footer;padding-block:1em;text-align:center}footer a{font-weight:700}@media screen and (min-width:15em) and (max-width:47em){h1{font-size:8vw}main{grid-template-columns:1fr;grid-template-areas:"title" "sub" "desc" "chars" "footer"}main>nav{display:none}.menu{display:grid;place-items:center;position:fixed;overflow:scroll;z-index:1;top:0;left:0;right:0;bottom:0;background:#fff}.menu nav{width:auto}.menu-button{background:#fff;border-radius:3em;border:2px solid #eee;bottom:10px;font-size:3em;font-weight:700;display:inline;display:initial;height:0;line-height:0;outline:none;padding:.7em .1em .8em;position:fixed;right:10px;text-align:center;width:1.5em;z-index:2}.text{margin:2em}.characters{display:grid;padding:1em;grid-gap:1em;margin:auto;-webkit-justify-content:center;-moz-box-pack:center;justify-content:center;grid-template-columns:repeat(2,1fr)}}