*,::after,::before{font-family:Roboto,sans-serif;box-sizing:border-box;margin:0}:root{--spacing:8px;--hue:400;--background1:hsl(214, 14%, 20%);--background2:hsl(214, 14%, 13%);--background3:hsl(214, 14%, 5%);--brand1:hsl(var(--hue) 80% 60%);--text1:hsl(0, 0%, 100%);--text2:hsl(0, 0%, 90%)}code,form input[type=submit]:hover{background:var(--background3)}body{display:flex;align-items:center;min-height:100vh;background:var(--background1);flex-gap:var(--spacing);color:var(--text1);font-size:1.5rem}a{color:var(--brand1);text-decoration:none}.number-code>div{display:flex}.number-code>div>input:not(:last-child){margin-right:calc(var(--spacing) * 2)}.content-area{display:flex;flex-direction:column;gap:calc(var(--spacing) * 2);background:var(--background2);padding:calc(var(--spacing) * 2);border-radius:var(--spacing);max-width:min(100%,50rem)}.content-area p{color:var(--text2);font-size:.8em}form{background-color:grey}form input.code-input{font-size:1.5em;width:1em;text-align:center;flex:1 0 1em}form input[type=submit]{margin-left:auto;display:block;font-size:1em;cursor:pointer;transition:.1s cubic-bezier(.4,0,.2,1)}form input{padding:var(--spacing);border-radius:calc(var(--spacing)/ 2);color:var(--text1);background:var(--background1);border:4px solid transparent;width:100%}form input:invalid{box-shadow:none}form input:focus{outline:0;border:4px solid var(--brand1);background:var(--background3)}#confetti-canvas{width:100%;height:100%;z-index:10;top:0;left:0;position:fixed}