@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap);html{box-sizing:border-box;width:100%;height:100%}*,:after,:before{box-sizing:inherit;padding:0;margin:0}body{font-family:sans-serif;height:100%;margin:0;background:#261c33;overflow:hidden;display:flex;align-items:center;justify-content:center}h2{text-align:center;font-size:40px;margin:20px;color:#8d81f3}main{display:flex;justify-content:space-around;align-items:center;height:420px;max-width:768px;margin:0 auto;font-family:monospace,sans-serif;font-size:22px}main label{display:block}main input[type=range]{display:block;margin-bottom:10px;width:200px}section.settings{width:50%;z-index:2}.box-container{padding:50px;border:2px solid #8d81f3;border-radius:12px;box-shadow:5px 5px 45px 0 hsla(0,0%,100%,.8)}.box{width:150px;height:150px;background:#8d81f3}button{background-color:#594fec;display:inline-block;font-size:20px;padding:10px;outline:none;border:none;border-radius:8px;font-family:Raleway,sans-serif;margin-right:10px;cursor:pointer}button,label{color:#fff}