@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,700;1,100;1,300;1,700&display=swap";*{box-sizing:border-box}body{color:#fff;margin:0;padding:0;font-family:Montserrat,sans-serif;background-color:#000}h1{font-size:24px;margin:0 0 .5em;text-align:center}@media (max-width: 1080px){h1{font-size:16px}}button{color:#fff;font-size:large;background-color:#64646433;border:1px solid rgb(100,100,100);margin:4px 0;border-radius:5px;padding:.5em 1em;cursor:pointer;transition:all .5s ease;box-shadow:0 0 10px #00000080}button:hover{background-color:#64646466}@media (max-width: 1080px){button{font-size:16px}}input[type=color]{appearance:none;-webkit-appearance:none;border:none;width:100%;height:15px;margin-top:4px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none}input[type=color]::-moz-color-swatch{border-style:none}input[type=range]{-webkit-appearance:none;background-color:transparent;appearance:none;width:100%;margin:0}input[type=range]::-webkit-slider-runnable-track{width:100%;height:2px;cursor:pointer;background:#fff;border-radius:1.3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:10px;width:10px;border-radius:50%;background:#ffffff;cursor:pointer;margin-top:-4px}input[type=range]:focus{outline:none}input[type=range]::-moz-range-track{width:100%;height:2px;cursor:pointer;background:#fff;border-radius:1.3px}input[type=range]::-moz-range-thumb{height:10px;width:10px;border-radius:50%;background:#ffffff;border:none;cursor:pointer}.controls{position:absolute;width:100%;height:100%;overflow-y:auto}.menu{position:relative;z-index:1;width:100%;opacity:1;border-bottom:1px solid rgb(100,100,100);background-color:#64646433;transition:all .5s ease;overflow:hidden;box-shadow:0 0 10px #00000080}.menu.hidden{opacity:0;z-index:-3}@media (max-width: 1080px){.menu{border-bottom:none;border-right:1px solid rgb(100,100,100);width:fit-content}}.control-wrapper{margin:0 auto;gap:2em;padding:1em;display:flex;justify-content:center;overflow-y:auto}.control-wrapper label,.control-wrapper input,.control-wrapper button{width:100%}.control-wrapper .control{width:200px;margin:auto 0}.control-wrapper .control .input:not(:first-child){margin-top:.5em}@media (max-width: 1080px){.control-wrapper{display:block;font-size:16px;margin:0;height:100vh;width:fit-content}.control-wrapper .control:not(:first-child){margin-top:1em}}.wrapper{position:absolute;z-index:0;width:100%;height:100%;overflow:hidden;filter:blur(150px);-webkit-user-select:none;user-select:none;pointer-events:none}.gradient{position:absolute;border-radius:100%;opacity:.6;mix-blend-mode:screen;transition:all .5s ease;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.1,0,.9,1)}.gradient-1{width:700px;height:700px;background:#ff0000;z-index:-2;left:60%;top:40%;animation-duration:11s;animation-name:animation-gradient-1}@media (max-width: 1080px){.gradient-1{width:80%;height:80%}}.gradient-2{width:600px;height:600px;background:#00ff00;z-index:-1;left:40%;top:60%;animation-duration:11s;animation-name:animation-gradient-2;animation-direction:reverse}@media (max-width: 1080px){.gradient-2{width:75%;height:75%}}.gradient-3{width:500px;height:500px;background:#0000ff;z-index:-3;left:50%;top:50%;animation-duration:11s;animation-name:animation-gradient-3}@media (max-width: 1080px){.gradient-3{width:70%;height:70%}}#hide-button{position:absolute;display:flex;align-items:center;right:1em;bottom:1em;z-index:2;border-radius:50%;color:#fff;padding:.5em;cursor:pointer;transition:all .5s ease;box-shadow:none}@media (max-width: 1080px){#hide-button{font-size:16px}}@keyframes animation-gradient-1{0%{transform:translateY(-50%) translate(-50%) rotate(-20deg) translate(20%)}25%{transform:translateY(-50%) translate(-50%) skew(-15deg,-15deg) rotate(80deg) translate(30%)}50%{transform:translateY(-50%) translate(-50%) rotate(180deg) translate(25%)}75%{transform:translateY(-50%) translate(-50%) skew(15deg,15deg) rotate(240deg) translate(15%)}to{transform:translateY(-50%) translate(-50%) rotate(340deg) translate(20%)}}@keyframes animation-gradient-2{0%{transform:translateY(-50%) translate(-50%) rotate(40deg) translate(-20%)}25%{transform:translateY(-50%) translate(-50%) skew(15deg,15deg) rotate(110deg) translate(-5%)}50%{transform:translateY(-50%) translate(-50%) rotate(210deg) translate(-35%)}75%{transform:translateY(-50%) translate(-50%) skew(-15deg,-15deg) rotate(300deg) translate(-10%)}to{transform:translateY(-50%) translate(-50%) rotate(400deg) translate(-20%)}}@keyframes animation-gradient-3{0%{transform:translateY(-50%) translate(-50%) translate(-15%) translateY(10%)}20%{transform:translateY(-50%) translate(-50%) translate(20%) translateY(-30%)}40%{transform:translateY(-50%) translate(-50%) translate(-25%) translateY(-15%)}60%{transform:translateY(-50%) translate(-50%) translate(30%) translateY(20%)}80%{transform:translateY(-50%) translate(-50%) translate(5%) translateY(35%)}to{transform:translateY(-50%) translate(-50%) translate(-15%) translateY(10%)}}