#settings_container{width:90%;height:100%;margin:0 auto;background-color:var(--screenBlack);color:var(--white);letter-spacing:1px}#settings_container,.settings_div{display:flex;flex-direction:column}.settings_div{margin-top:40px;position:relative;gap:5px;h1{width:-moz-fit-content;width:fit-content}}.settings_div:first-of-type{margin-top:0}.horizontal_div{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:90%;margin:0 auto;button{background-color:var(--black);border-radius:10px;cursor:pointer}h2{margin:auto 0}}.slider_div{display:flex;flex-direction:row;align-items:center;h1{width:30%;text-align:center}}.setting_tooltip_text{visibility:hidden;width:-moz-fit-content;width:fit-content;background-color:var(--black);color:#eaeaea;text-align:center;border-radius:6px;padding:5px;position:absolute;bottom:100%;left:0;font-size:1.2rem}.settings_div>h1:hover+.setting_tooltip_text{visibility:visible}.bottom_tooltip_text{visibility:hidden;opacity:0;width:-moz-fit-content;width:fit-content;background-color:var(--black);color:#eaeaea;text-align:center;border-radius:6px;padding:5px;position:absolute;bottom:110%;left:4px;font-size:1.2rem}#offset_div{width:100%;display:flex;flex-direction:row;justify-content:center;input{width:50%;font-size:2rem;text-align:center;font-family:Poppins;background-color:var(--black);color:#fff}div{display:flex;flex-direction:row;gap:5px}button{background-color:var(--black);padding-top:3px;cursor:pointer}svg{fill:var(--white)}}#save_reset_btns{display:flex;flex-direction:row;margin:40px auto 0;gap:10px}.bottom_btns{width:-moz-fit-content;width:fit-content;padding:5px;font-size:1.4rem;background-color:var(--black);color:var(--white);position:relative;border-radius:6px}.action_btn{font-size:2rem}.mobile_btn{background-color:#1a1a1a;border-radius:10px}#mobile_settings{width:100%;aspect-ratio:2/1;z-index:1;max-width:550px;background-color:var(--screenBlack);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;div{height:100%;width:100%;display:flex;justify-content:center;align-items:center;border:1px solid var(--green)}h2{position:absolute;bottom:100%;left:0;background-color:var(--screenBlack)}}.subtitle{margin:0 auto}#restartBtn{position:relative}#mapping_error{position:absolute;top:110%;right:0;visibility:hidden;opacity:0;font-size:1.75rem;color:#c70000}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;max-width:900px;border-radius:10px;height:15px;background:var(--green);outline:none;opacity:.7;transition:opacity .2s}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:35px;border-radius:50%;border:3px solid var(--white);background-color:var(--screenBlack);aspect-ratio:1;cursor:pointer}.slider::-moz-range-thumb{width:15px;border-radius:50%;border:3px solid var(--white);background-color:var(--screenBlack);aspect-ratio:1;cursor:pointer}@media screen and (min-width:400px){.slider_div{h1{width:15%;text-align:center}}}#canvasContainer{height:100%;width:100%;position:relative;z-index:10}#canvas_id{position:absolute;z-index:10}#main_menu{height:100%;position:absolute;top:0;z-index:200;width:20%;max-width:250px;min-width:175px;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:auto;gap:0;transition:left 1s ease}@media screen and (max-height:360px){#main_menu{justify-content:flex-start}}.cas_btn{width:100%;aspect-ratio:12/6;position:relative;border:5px solid var(--black);color:var(--white);background-color:var(--screenBlack);cursor:pointer;&:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4){border-top:0}}.cas_btn:hover{.cas_circle{transform:rotate(1turn)}}.cas_bottom{bottom:0;left:5%;width:90%}.cas_bottom,.cas_bottom:after{position:absolute;border-bottom:min(3vw,20px) solid var(--white);border-left:min(5vw,40px) solid transparent;border-right:min(5vw,40px) solid transparent;height:0;content:""}.cas_bottom:after{scale:.9;width:100%;transform:translateX(-55%) translateY(5%);top:0}.cas_bar{width:50%;aspect-ratio:5/1;top:15%;left:25%;background-color:var(--white)}.cas_bar,.cas_circle{position:absolute;content:""}.cas_circle{background-color:transparent;border:3px solid var(--white);width:25%;aspect-ratio:1;border-radius:50%;top:-2px;transition:transform 1s ease;&:first-of-type{right:calc(100% + 5px)}&:nth-of-type(2){left:calc(100% + 5px)}}.cas_teeth{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:110%;aspect-ratio:6/1;background:linear-gradient(to right,var(--white) 15%,transparent 15%,transparent 85%,var(--white) 85%);&:nth-of-type(2){transform:translate(-50%,-50%) rotate(60deg)}&:nth-of-type(3){transform:translate(-50%,-50%) rotate(-60deg)}}.menu_btn{height:50px;position:relative}#menuOptions{position:absolute;top:0;height:30px;max-width:95%;z-index:200;display:flex;background-color:transparent;gap:0;transition:left 1s ease}#settings_wrapper{width:80%}#how_to_wrapper,#settings_wrapper{position:absolute;z-index:200;top:0;max-width:1000px;height:80%;top:10%;background-color:var(--screenBlack);border:2px solid var(--white);scrollbar-width:thin;scrollbar-color:var(--white) transparent;overflow:auto}#how_to_wrapper{width:50%;div{width:90%;margin:0 auto;color:var(--white)}a{font-size:2rem;transition:color .5s ease}}#how_to_wrapper a:hover{color:var(--whiteLight)}#settings_header{display:flex;flex-direction:row;justify-content:space-between}#fullscreen_btn,#setting_back_btn{background-color:var(--black);svg{fill:var(--white)}}#fullscreen_btn{padding:7px 5px 5px}.unactiveMenu{left:-100%}.activeMenu{left:0}.menuBtn{position:relative;width:100px;transform:skew(-40deg);background-color:var(--white);border:1px solid var(--screenBlack);border-left:0;cursor:pointer;color:var(--screenBlack);transition:all .2s ease;h3{transform:skew(40deg);letter-spacing:1px}svg{transform:scale(1.5) skew(40deg)}}.menuBtn:hover{background-color:var(--whiteLight)}.menuBtn:first-child:before{background-color:var(--white);height:20px;aspect-ratio:1;top:-6%;right:90%;transform:skew(40deg);border-top:2px solid var(--screenBlack);position:absolute;content:"";transition:all .2s ease}.menuBtn:first-child:hover:before{background-color:var(--whiteLight)}#startScreen{left:50%;top:50%;transform:translate(-50%,-50%)}#songScreen,#startScreen{position:absolute;z-index:200}#songScreen{top:0;left:0;width:100%;height:100%;background-color:#000;color:#fff}.editorHTML{width:172px;height:130px;div{display:flex;justify-content:center;align-items:center;background-color:var(--screenBlack)}a{font-size:1.6rem}}.htmlDiv{width:90%;height:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100}#editHTML,.htmlDiv{display:flex;align-items:center;justify-content:center}#editHTML{transition:all .3s ease}#editHTML,#songHTML{width:100%;height:100%}#songHTML{max-width:1500px;padding-top:20px;transition:all .2s ease}.activeHTML{transform:scaleY(1)}.inactiveHTML{transform:scaleY(0)}.annotation{outline:none;border:none}#temp_play_btn{position:absolute;top:50%;left:50%;z-index:500;transform:translate(-50%,-50%);button{font-size:2rem;padding:5px;border-radius:6px}}#songHtml{width:100%;height:100%;background-color:var(--screenBlack);position:relative;border:1px solid var(--white)}#songHTML_header{height:45px;padding:2px;border-bottom:2px solid var(--white);display:flex;flex-direction:row;justify-content:space-between}#user_info{visibility:hidden;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;background-color:var(--screenBlack);color:#eaeaea;text-align:center;border-bottom-left-radius:6px;border-bottom-right-radius:6px;padding:5px 10px;position:absolute;top:41px;z-index:10;a,button{color:var(--white);background-color:transparent;border:0;padding:5px;font-size:1.4rem}a:hover,button:hover{color:var(--green)}}#avatar_wrapper:hover~#user_info,#user_info:hover{visibility:visible}#bookmark_nav{width:-moz-fit-content;width:fit-content;height:40px;display:flex;align-items:center;gap:5px;background-color:var(--screenBlack);button{background-color:transparent;border:0;padding:4px 0 0;margin:0;position:relative}svg{fill:var(--white);height:30px;aspect-ratio:1}}.nav_info{visibility:hidden;position:absolute;bottom:100%;background-color:var(--screenBlack);width:-moz-fit-content;width:fit-content;color:var(--white);white-space:nowrap;padding:5px;left:50%;border:1px solid var(--white);transform:translateX(-50%)}#bookmark_nav button:hover .nav_info{visibility:visible}#songHTML_content{height:calc(100% - 45px);width:100%}#song_collection{position:relative;height:50%;width:100%;background-color:var(--white)}#song_list_container,.container{width:100%;height:100%}.container{position:relative}.song_list{width:100%;height:calc(100%);padding:10px;background-color:var(--screenBlack);gap:10px;flex-flow:column wrap;align-content:flex-start;display:none;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--white) transparent}.song_metadata{position:relative;display:flex;flex-direction:column;align-items:flex-start}.song_btn{background-color:transparent;color:var(--white);border:2px solid var(--white);border-radius:6px;width:300px;padding:5px;height:-moz-fit-content;height:fit-content;transition:all .2s ease;cursor:pointer;h2,h3,h4{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left}h2{width:calc(100% - 20px)}h3,h4{width:calc(100% - 35px)}svg{fill:var(--white)}}#description_header{display:flex;flex-direction:row;justify-content:space-between}.description_spinner{border:3px solid var(--white);position:relative;height:35px;aspect-ratio:1;border-radius:50%;content:"";transition:transform 1s ease;&:first-of-type{animation:leaderboard_loading 12s linear infinite}&:nth-of-type(3){animation:leaderboard_loading_reverse 12s linear infinite}}.song_spinner{border:3px solid var(--white);height:35px;aspect-ratio:1;border-radius:50%;content:"";position:absolute;bottom:-2px;right:-2px;transition:transform 1s ease}.song_btn.active .song_spinner,.song_btn:hover .song_spinner{animation:leaderboard_loading 12s linear infinite}.active_teeth{background:linear-gradient(to right,var(--white) 20%,transparent 20%,transparent 80%,var(--white) 80%)}.half_active_teeth{background:linear-gradient(to right,transparent 20%,transparent 20%,transparent 80%,var(--white) 80%)}.unactive_teeth{background:linear-gradient(90deg,transparent 20%,transparent 0,transparent 80%,transparent 0)}#title_bookmark{width:100%;display:flex;flex-direction:row;justify-content:space-between;div{background-color:transparent;border:0}}#song_info{height:50%;width:100%;background-color:var(--white);padding:10px}#info_wrapper{height:100%;width:100%;position:relative;display:flex;flex-direction:column;gap:2px}#song_title{padding:0 0 5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin:0 auto;text-align:center;width:calc(100% - 160px)}@media screen and (max-width:500px){#song_title{margin:0;width:calc(100% - 100px)}}#song_btns{position:absolute;top:-5px;right:0;display:flex;justify-content:flex-end;width:100%;gap:5px}#song_btns button{border-radius:6px;cursor:pointer;padding:8px 4px 4px;margin:0;background-color:var(--green);transition:all .2s ease;border:2px solid var(--screenBlack)}#song_btns button:first-child{padding:6px;font-size:1.8rem;color:var(--screenBlack)}#song_btns button:hover{background-color:var(--white)}#song_btns button svg{height:20px;aspect-ratio:1;fill:var(--screenBlack)}@media screen and (max-height:400px){#song_btns button{padding:2px}#song_btns button:first-child{padding:3px}}#data{height:-moz-fit-content;height:fit-content;width:clamp(60px,70%,300px);border-radius:3px;padding:5px;margin:0 auto;background-color:var(--white);color:var(--screenBlack);fill:var(--screenBlack);display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.local_songs_wrapper{padding:10px;flex-direction:column;display:none}#localSongs_list,.local_songs_wrapper{width:100%;height:100%;background-color:var(--screenBlack);gap:10px}#localSongs_list{display:flex;align-content:flex-start;flex-flow:column wrap;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--grey) transparent;h3{width:calc(100% - 35px)}}.tooltip{display:flex;flex-direction:row;position:relative;justify-content:center;align-items:centers;h3{padding-right:5px}svg{height:20px;aspect-ratio:1}}.tooltip_wrapper{display:flex;position:relative;justify-content:center}.tooltip_text{visibility:hidden;width:200%;background-color:var(--white);color:var(--screenBlack);text-align:center;border-radius:3px;padding:5px;position:absolute;top:130%;left:-5px}.tooltip>h3:hover~.tooltip_text,.tooltip>svg:hover~.tooltip_text,.tooltip_container>h3:hover~.tooltip_text,.tooltip_container>svg:hover~.tooltip_text{visibility:visible}#description_container{width:100%;height:calc(100%);padding:10px;border-radius:5px;background-color:var(--screenBlack);color:var(--white);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--screenBlack) transparent;display:flex;flex-direction:column;gap:10px;p{word-wrap:break-word;overflow-wrap:break-word;white-space:normal}}.song_loading{height:70%;width:70%;position:relative;margin:0 auto;.cas_bar{background-color:var(--screenBlack)}.cas_circle{top:-5px;border:.8vw solid var(--screenBlack);animation:leaderboard_loading 12s linear infinite}.cas_teeth{background:linear-gradient(to right,var(--screenBlack) 15%,transparent 15%,transparent 85%,var(--screenBlack) 85%)}}@keyframes leaderboard_loading{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes leaderboard_loading_reverse{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}#source_links{display:flex;flex-direction:column;gap:2px;a{font-size:2rem;width:-moz-fit-content;width:fit-content;transition:all .2s ease}}#genre_language,#source_links a:hover{color:var(--white)}#genre_language{word-break:break-all;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.lb{overflow:scroll;scrollbar-color:var(--screenBlack) transparent}#leaderboard,.lb{scrollbar-width:thin}#leaderboard{width:100%;height:100%;background-color:var(--screenBlack);padding:10px;border-radius:5px}.cas_loading{width:90%;aspect-ratio:2/1;position:relative;margin:0 auto;.cas_bar{background-color:var(--screenBlack)}.cas_circle{border:.6vw solid var(--screenBlack);animation:leaderboard_loading 2s linear infinite}.cas_teeth{background:linear-gradient(to right,var(--screenBlack) 15%,transparent 15%,transparent 85%,var(--screenBlack) 85%)}}td,th{border:1px solid var(--white);padding:8px 10px;color:#fff;letter-spacing:1px;text-align:center}th{font-size:1.5rem}td{font-size:1.25rem}#audio_select{padding-top:0;width:100%;position:relative}#audio_input,#audio_tooltip_text{color:var(--white)}#audio_input{width:100%;background-color:var(--screenGrey);border-top-right-radius:5px;border-bottom-right-radius:5px;cursor:pointer}input::-webkit-file-upload-button{cursor:pointer;font-weight:700;background-color:var(--white);color:var(--screenBlack);padding:.5em;border:1px solid var(--screenBlack);border-top-right-radius:5px;border-bottom-right-radius:5px}input::file-selector-button{cursor:pointer;font-weight:700;background-color:var(--white);color:var(--screenBlack);padding:.5em;border:1px solid var(--screenBlack);border-top-right-radius:5px;border-bottom-right-radius:5px}#avatar_wrapper{height:30px;width:30px;margin-right:5px;position:relative;.no-image{padding-top:3px;padding-left:3px}}.active_list{display:flex}#loading_screen{width:100%;height:100%;position:absolute;z-index:1000;color:#fff;background-color:#000;top:0;left:0;transition:opacity .5s ease;align-items:left;padding:10px 10px 0;h1{text-align:center}}#loading_container,#loading_screen{display:flex;flex-direction:column;gap:20px}#loading_container{align-items:center;width:75%;max-width:500px}#loading_cas{width:100%;max-width:50vh;aspect-ratio:12/6;position:relative;border:7.5px solid #fff;cursor:pointer}#loading_bar{height:4px;position:absolute;bottom:0;background-color:#fff}#loading_btn{display:flex;flex-direction:column;gap:5px;align-items:center;animation:btnReady 2s ease 1 forwards;button{background-color:#000;color:#fff;border:2px solid #fff;padding:5px 10px;font-size:2rem}}@keyframes btnReady{0%{opacity:0}to{opacity:1}}.loading_eye{position:absolute;content:"";aspect-ratio:1;border-radius:50%}.l_left{top:28%;left:15%;width:20%;background-color:#eaeaea}.l_right{top:18%;right:10%;width:30%;border:5px solid #eaeaea;animation:leaderboard_loading 12s linear infinite}@media screen and (min-height:750px) and (min-width:300px){.l_right{border:10px solid #eaeaea}}.eye_lids{background-color:#000;position:absolute;height:1%;content:""}.left_lid{left:15%;width:20%}.right_lid{right:10%;width:30%;z-index:10}.top_lid{top:0}.bottom_lid,.top_lid{animation:lid_animation 4s linear infinite}.bottom_lid{bottom:0;transform:scaleY(-1)}@keyframes lid_animation{0%{height:0}50%{height:0}55%{height:55%}60%{height:0}to{height:0}}.cas_teeth_loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:105%;aspect-ratio:9/1;background:linear-gradient(90deg,#eaeaea 15%,transparent 0,transparent 85%,#eaeaea 0);&:nth-of-type(2){transform:translate(-50%,-50%) rotate(60deg)}&:nth-of-type(3){transform:translate(-50%,-50%) rotate(-60deg)}}