:root{font-family:sans-serif;color-scheme:dark;background-color:#242424}body{margin:0;width:100%;height:100%}#app{margin:0 auto;text-align:center}#info,#footer{margin:10px;font-size:1.2rem;color:#17c3b2}a{color:#17c3b2}canvas{border:#17c3b2 solid;margin:5px}input{padding:.8em 1.8em;border:2px solid #17c3b2;position:relative;overflow:hidden;background-color:transparent;text-transform:uppercase;font-size:16px;color:#17c3b2}button{padding:.8em 1.8em;border:2px solid #17c3b2;position:relative;overflow:hidden;background-color:transparent;text-align:center;text-transform:uppercase;font-size:16px;transition:.3s;z-index:1;color:#17c3b2}button:before{content:"";width:0;height:300%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);background:#17c3b2;transition:.5s ease;display:block;z-index:-1}button:hover:before{width:105%}button:hover{color:#242424}