*,*:before,*:after{box-sizing:border-box}:root{--bg-color: #222831;--accent-color: #FFD369;--primary-color: #393E46;--secondary-color: #EEEEEE;--gray: #D9D9D9}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{margin:0 auto;padding:0;width:90%;max-width:1600px;font-family:Sixtyfour,sans-serif;background-color:var(--bg-color)}h1,h2,h3,h4{text-wrap:balance}.header{color:var(--secondary-color);font-family:Sixtyfour,sans-serif;padding-top:1.5%;display:flex;justify-content:space-between}.header.actions{flex-direction:column}.header.power-container{width:100%;justify-content:end;margin-left:2.5%}.header.power{border:none;font-size:2rem;font-weight:700;letter-spacing:4px;width:auto;height:auto;padding:0 0 1.5rem;outline:none;background:none}.header.power span{transition:ease-in-out .15s;color:#ffffff8c}.header.power span:hover{cursor:pointer;transform:scale(1.02);color:#fff}.header.power .selected{color:#fff}.header.slider-container{flex-direction:column;align-items:end;row-gap:1rem;font-weight:700;min-width:260px}.header.slider-container label{letter-spacing:10px;align-self:start}.header.slider-container .bpm-text{padding-left:5%}.header.slider-container .vol-text{padding-left:45%}header .label-cont{width:100%;display:flex;justify-content:start}#bpm,#volume,#reverb,#destroyer,#delay{-webkit-appearance:none;height:6px;background-color:var(--secondary-color);outline:none;width:inherit}#bpm::-webkit-slider-thumb,#volume::-webkit-slider-thumb,#reverb::-webkit-slider-thumb,#destroyer::-webkit-slider-thumb,#delay::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:5px;height:15px;background:var(--secondary-color);cursor:pointer}#bpm::-moz-range-thumb,#volume::-moz-range-thumb,#reverb::-moz-range-thumb,#destroyer::-moz-range-thumb,#delay::-moz-range-thumb{width:5px;height:15px;cursor:pointer;border-radius:0;border:none}#volume{width:144px}#bpm{width:260px}.bpm-output{align-self:end;color:var(--accent-color);visibility:hidden}.visibility{visibility:visible}main{display:flex;justify-content:center;align-items:center;width:100%;height:auto;padding:4rem 0 0;color:var(--secondary-color);gap:2px}main .section{background:linear-gradient(#222831 50%,#3b5a72);width:50%;height:33rem;max-height:600px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}main .canvas-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}main .turn-off-screen{color:var(--secondary-color);position:absolute;visibility:hidden;opacity:0;transition:ease-in-out .5s}main .screen{margin:3rem auto 0;aspect-ratio:12/9;max-height:360px;min-height:315px;border:1px solid var(--secondary-color);width:90%;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--gray);transition:ease-in-out .25s}main .screen:hover{cursor:pointer;background-color:#393e4661}main .screen:hover+.turn-off-screen{transition:ease-in-out .25s;visibility:visible;opacity:1}.section-header{display:flex;justify-content:space-between;align-items:center;width:90%;margin:0 auto}.section-header h3{font-size:clamp(.8rem,1.2vw,1.5rem);letter-spacing:clamp(.7rem,1.5vw,1.5rem)}.section-header .waveform__container{display:flex;justify-content:center;align-items:center}.section-header .waveform{height:20px;width:auto;border:none;background:none;cursor:pointer;transition:ease-in-out .15s}.section-header img{height:20px;pointer-events:none}.section-header .waveform:hover{transform:scale(1.09)}.seq{display:flex;flex-direction:column;justify-content:center;align-content:center;padding:30px 5% 0}.seq__cell{width:100%}.seq__body{display:flex;flex-direction:column}.seq__row-octaves{width:100%;display:flex;align-items:center}.seq__oct-actions{width:100%;display:flex;justify-content:center}.seq__oct-plus-buttons,.seq__oct-minus-buttons{width:0;display:flex;justify-content:center;align-items:center;background:none;border:none;color:var(--gray);font-size:1.2rem}.seq__oct-plus-buttons:hover,.seq__oct-minus-buttons:hover{cursor:pointer}.seq__oct-buttons:hover{cursor:pointer;transform:scale(1.05)}.seq__oct-value{padding:0 3%}.seq__row-notes{width:100%;display:flex;align-items:center;justify-content:space-between;padding-bottom:3%}.seq__note{color:#000;width:100%;height:25px;background-color:var(--gray);text-align:center;border:2px solid black;border-radius:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;font-family:Sixtyfour,sans-serif}.seq__note:hover{cursor:pointer}.seq__note:focus{border:none}.seq__row-steps{width:100%;display:flex;align-items:center;justify-content:space-between;height:60px}.seq__step{color:var(--gray);background-color:var(--gray);width:100%;height:70px;text-align:center;border:2px solid black;border-radius:10px}.seq__step-active{color:var(--accent-color);background-color:var(--accent-color)}.limit-reached{color:#ffd369;transform:scale(1.09);animation:ease-in-out}.effects{width:100%;padding-top:20px}.effects-container{display:flex;flex-direction:row;justify-content:space-between;align-content:center;padding:clamp(0px,2vw,0px) 5% 0 5%}.effect{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.effect div{max-height:56px;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.effect .icon-cont{height:56px}.effect .input-cont{width:90%;padding-top:10%}.effect img{height:100%;width:auto}.effect h4{font-size:clamp(.8rem,1.2vw,1.5rem);color:transparent;-webkit-text-stroke:.16px var(--secondary-color)}@media (max-width:800px){body{width:100%;min-width:300px;margin:0 auto}.header{width:100%;flex-direction:column;justify-content:center;align-items:center;padding-top:2%}.header img{height:100px;padding-left:13%}.header .actions{padding-top:30px;width:100%;justify-content:center;align-items:center}.header .power-container{width:100%;margin:0}.header .power{flex-direction:row}.header .slider-container{width:90%;align-items:center;gap:0}.header .slider-container .bpm-text{padding:1rem 0 0}.header .slider-container .vol-text{padding:1rem 0}.header #volume,.header #bpm{width:100%}main{display:flex;flex-direction:column-reverse;justify-content:center;align-items:center;width:100%;min-width:300px;padding-top:2rem;padding-bottom:2rem}main .section{width:90%;height:28.5rem}main .section:first-child{display:none}main .section-header{width:100%}main .seq{padding:5% 0 0}main .screen{display:none}}@media (max-width:500px){main .section{width:90%;height:26.5rem}main .section-header{width:100%;flex-direction:column}}