@import"https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,500;0,900;1,300&display=swap";:root{--foreground: #FFF;--background: #000;--accent: #50fb93;--midground: #1a1a1a}body{font-family:Fira Sans,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:900}h1{height:fit-content;margin:1rem 0 0;text-align:center;background:var(--foreground);color:var(--background);padding:0 1rem;font-size:6rem;transform:rotate(-6deg);transition:all .25s ease-in-out}@media (max-width: 600px){h1{font-size:4rem}}h2{background:var(--foreground);color:var(--background);margin:0 0 1rem;width:fit-content;padding:0 .5rem;transform:translate(-1rem) translateY(-1rem);font-size:2rem}h3{font-size:1.8rem}h4{font-size:1.4rem;margin:0;text-transform:capitalize}:root{line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--foreground);background-color:var(--background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{color:var(--background);background-color:var(--accent)}a{font-weight:500;color:var(--accent);text-decoration:inherit}body{margin:0;display:flex;min-width:320px;min-height:100vh;justify-content:flex-start;flex-direction:column}header{display:flex;justify-content:space-between;width:calc(100% - 2rem);padding:0 1rem;flex-wrap:wrap}header .left p{text-align:center;width:100%;font-size:1.4rem;transform:rotate(-6deg);margin:0 1rem;font-style:italic}header nav{display:flex;align-items:flex-start;gap:1rem;margin:1rem 0}header nav a{background:var(--foreground);color:var(--background);padding:.25rem .5rem;font-size:1.2rem;font-weight:500;transition:all .25s ease-in-out;min-width:5rem;text-align:center}header nav a:hover{transform:rotate(6deg)}footer{text-align:center;margin:1rem auto 0;width:calc(90% - 2rem);max-width:800px;border-radius:2px;background:var(--foreground);color:var(--background);font-weight:700;padding:0 1rem}footer a{color:var(--background);font-weight:700;text-decoration:underline}form{display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}input{border-radius:2px;border:1px solid transparent;padding:.6em 1.2em;font-size:1.4em;font-weight:500;font-family:inherit;background:var(--midground);color:var(--foreground);transition:border-color .25s;width:100%;flex:1;border:2px solid transparent;min-width:300px}input:focus,input:focus-visible{border:2px solid var(--accent);outline:none}button{border-radius:2px;padding:.6em 1.2em;font-size:1.4em;font-weight:500;font-family:inherit;background:var(--midground);cursor:pointer;transition:border-color .25s;border:2px solid transparent}button:hover{border-color:var(--accent)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button.small{font-size:1em;padding:.4em .8em}code,pre{padding:.6em 1.2em;border-radius:2px;background:var(--midground)}section{margin:2rem auto;width:calc(90% - 2rem);max-width:50rem;padding:1rem;border:3px solid var(--foreground);border-radius:2px;box-shadow:3px 3px 0 var(--background),6px 6px 0 var(--foreground);transition:all .25s ease-in-out}section:hover{box-shadow:0 0 0 var(--foreground),6px 6px 0 var(--foreground)}.row{display:flex;flex-direction:column;list-style:none;padding:0}.row li{display:flex;justify-content:space-between}.row li .row-lbl{text-transform:capitalize}.row li .row-val .sub-item{display:flex}.row li:not(:last-child){border-bottom:1px solid var(--midground)}.toggle{float:right}
