body{background:#fff;margin:0;overflow:hidden;font-size:19px}body .canvas-container{width:100vw;height:100vh;position:relative}body .canvas-container canvas{position:absolute;top:0;right:0;bottom:0;left:0}body header{position:fixed;top:.5rem;left:.5rem;right:.5rem;z-index:1;background:hsla(0,0%,100%,.8);font-family:Bradley Hand,Brush Script MT,Chalkduster,Comic Sans MS;font-weight:100;font-size:2rem;color:#000;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}body header,body header .inputs-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}body header .inputs-wrapper{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;margin:0 1rem;padding:0 2rem;position:relative}body header .inputs-wrapper:after,body header .inputs-wrapper:before{content:" ";position:absolute;display:block;top:0;bottom:0;border:2px solid #000;width:1rem;border-radius:4px}body header .inputs-wrapper:before{right:auto;left:0;border-right:4px solid transparent}body header .inputs-wrapper:after{right:0;left:auto;border-left:4px solid transparent}body header .inputs-wrapper input{background:transparent;outline:none;color:#000;border:none;border:2px solid transparent;border-bottom-color:#4c73b4;font-size:1.6rem;width:100%;max-width:160px;text-align:center;margin:.5rem 0;-webkit-transition:all 1s ease-out;transition:all 1s ease-out;border-radius:2px;font-family:Comic Sans MS;font-weight:100}body header .inputs-wrapper input.invalid,body header .inputs-wrapper input.invalid:focus{background:rgba(255,115,100,.3);border-bottom-color:#ffa197}body header .inputs-wrapper input:focus{-webkit-transition:all .12s ease-in;transition:all .12s ease-in;outline:none;background:rgba(76,115,180,.3);border-bottom-color:#708fc3}body header button{border:2px solid #4c73b4;border-radius:5px;color:#000;background:#fff;font-weight:600;font-size:1.4rem;line-height:2rem;padding:.25rem 1rem;font-family:Comic Sans MS;font-weight:100;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;cursor:pointer}body header button:hover{-webkit-transition:all .12s ease-in;transition:all .12s ease-in;color:#fff;border:2px solid #3d5c90;background:rgba(76,115,180,.9)}body header button.invalid,body header button.invalid:focus{background:rgba(255,115,100,.3);border-color:#ffa197;color:#ffa197;opacity:.8}body header button:focus{outline:none;border:2px solid #3d5c90;background:rgba(76,115,180,.2)}