body{margin:0;padding:0;background-color:#000}i{font-size:24px}h2{color:#27c36a}input[type=radio]{display:none}input[type=radio]:checked+label .radio-icon i{color:#000}label[for=color-picker]{color:#27c36a;position:absolute;left:30px}label .radio-icon i{color:#e5e5e5}.controls-item{background-color:transparent;border:none;padding:0;margin:0 2px;z-index:3}.fa-sun{color:#fff}.radio-icon{margin-right:7px}.animate{animation:moveText 1s ease-out}@keyframes moveText{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}#title-container{display:flex;justify-content:center;align-items:center}#title{font-family:Inter,sans-serif;transition:transform 1s ease-out}#canvas{position:absolute;top:auto;left:auto;width:100%;height:100%}#controls-main{width:100%;padding-top:20px;display:flex;justify-content:center;align-items:center;z-index:1}#controls{display:flex;justify-content:center;align-items:center;padding:12px 15px;background-color:#27c36a;border-radius:10px;z-index:2}#play-pause{width:40px}#visual-option{display:flex;font-family:"Font Awesome 5 Free"}#color-picker{cursor:pointer;background:none;border:none;-webkit-appearance:none;position:absolute;left:17px;opacity:0}#color-picker::-webkit-color-swatch{width:100%;height:100%;border-radius:50%;background:none;border:2px solid #27C36A}#light-toggle{position:absolute;right:30px}#seek{-webkit-appearance:none;width:100%;height:13px;border-radius:5px;background:transparent;outline:none}#seek::-webkit-slider-runnable-track{border-radius:50px;border:0}#seek::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:black;border:none;border-radius:50%;cursor:pointer;box-shadow:0 0 5px #0003;transition:all .3s ease}#seek::-webkit-slider-thumb:hover{transform:scale(1.2)}#seek::-webkit-slider-thumb:active{transform:scale(1.5)}button:hover,i:hover{cursor:pointer}@media (max-width: 480px){#color-picker{cursor:pointer;background:none;border:none;-webkit-appearance:none;position:absolute;left:17px;top:94px;opacity:0}label[for=color-picker]{color:#27c36a;position:absolute;left:30px;top:91px}#light-toggle{position:absolute;right:30px;top:91px}}