:root{--toggle-yell:#ffd500;--toggle-purp:#4d3192;}#toggle{display:flex;position:absolute;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:auto;z-index:300;padding-left:7%;padding-right:7%;padding-top:30px;top:0px;transition:top 0.7s ease-in-out;}#toggleGradient{position:absolute;height:30vh;width:100%;z-index:-1;background-image:linear-gradient(to bottom, black, rgba(0,0,0,0));top:0px;left:0px;opacity:0;transition:opacity 0.5s ease-in-out;}#toggleButton{width:20%;height:auto;aspect-ratio:144/74;background-color:var(--toggle-purp);display:flex;position:relative;align-items:center;flex-direction:row;justify-content:center;opacity:0;transition:opacity 0.7s ease-in-out,
        background-color 0.5s ease-in-out;}.toggleImgContainer{height:calc(100% * 57/74);width:auto;aspect-ratio:1;display:flex;position:relative;align-items:center;flex-direction:row;justify-content:center;}.toggleImgContainer img{position:relative;width:55%;height:auto;aspect-ratio:1;z-index:2;}#toggleIndicator{height:calc(100% * 57/74);width:auto;left:10%;aspect-ratio:1;background-color:var(--toggle-yell);position:absolute;z-index:1;transition:left 0.5s ease-in-out,
        background-color 0.5s ease-in-out;}#toggleTutorial{display:flex;position:relative;flex-direction:column;text-align:start;opacity:1;transition:opacity 0.7s ease-in-out;}#toggleTutorial h1{color:#ffd500;font-size:1.3rem;font-weight:700;}#toggleTutorial p{color:white;font-size:0.8rem;font-weight:300;}#toggleTutorialArrow{height:30px;width:auto;aspect-ratio:55/83;position:relative;right:0;transform:rotate(180deg);opacity:1;transition:opacity 0.7s ease-in-out;animation:arrowAnim 1s linear infinite;}@keyframes arrowAnim{0%{transform:translateX(-5px) rotate(180deg);}50%{transform:translateX(5px) rotate(180deg);}100%{transform:translateX(-5px) rotate(180deg);}}