.loading__container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;margin-top:10%;font-family:sans-serif}.loading__spinner{width:48px;height:48px;border:5px solid #ccc;border-top:5px solid #ffa200;border-radius:50%;animation:loading__spin 1s linear infinite;margin-bottom:1rem}.loading__message{font-size:1rem;color:#fff;text-align:center}@keyframes loading__spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header{position:fixed;top:0;left:0;width:100%;z-index:1000;display:flex;align-items:center;justify-content:flex-end;gap:1.5em;background-color:#0006;padding:0 20px;box-sizing:border-box}.header p{border-radius:20px;padding:0 5px;-webkit-user-select:none;user-select:none}.header .options-btn{max-width:20px;border-radius:20px;padding:5px}.header p,.header .options-btn{transition:background-color .1s}.header p:hover,.header .options-btn:hover{cursor:pointer;background-color:#fcfcfc4d}.sun-btn,.moon-btn{max-width:30px;opacity:75%;transition:opacity .2s;z-index:10002}.moon-btn{opacity:10%;margin-top:10px}.sun-btn:hover,.moon-btn:hover{opacity:100%;cursor:pointer}.black-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;z-index:10000;pointer-events:all;padding:20px}.options-menu{position:fixed;top:50px;right:20px;background-color:#00000040;border:1px solid #ccc;border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:2px;box-shadow:0 4px 8px #00000026;width:150px}.options-menu button{background:none;border:none;padding:6px 10px;text-align:left;cursor:pointer;font-size:14px;background-color:#004a9f80}.options-menu button:hover{background:#0278ff80;border-radius:4px}@media (max-width: 650px){.header{justify-content:space-around;max-height:2.5rem}.options-menu{z-index:1001;background-color:#000c;gap:2em}.options-menu button{background:#004797}.options-menu button:hover{background:#0278ff}.moon-btn{position:fixed;bottom:94%;right:8%}}.user-form{position:fixed;top:50px;right:70px;background-color:#00000040;border:1px solid #ccc;border-radius:8px;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 8px #00000026;width:300px;padding:20px}.user-form input{color:#fff;background-color:#0077ff80;border:none;padding:3px}.user-form .input-error{color:#fa2b2b;margin:0;font-size:1rem;text-align:left}.user-form button{color:#fff;background-color:#0278ff80;border-radius:4px;border:none;padding:3px}.user-form button:hover{cursor:pointer;background-color:#20a2ff80}.url-message a{color:#0ff}@media (max-width: 1100px){.user-form{z-index:1001;background-color:#000c}.user-form button,.user-form input{background:#004797}.user-form button:hover{background:#0278ff}}@media (max-width: 650px){.user-form{max-width:50%;gap:2rem;right:0;left:50%;transform:translate(-50%)}}.hero__title{display:flex;flex-direction:column;align-items:center;margin-top:50px}.hero__title p{font-family:PinyonScript;color:#fff;font-size:1.5em;margin-bottom:0;font-weight:100}.hero__title h1{font-family:ZenTokyoZoo;color:#c69204;font-size:4em;margin:0;font-weight:100}@media (max-width: 650px){.hero__title{margin-top:6rem}}.main-player__play-btn{display:flex;justify-content:center;align-items:center;background-color:#0258c9;border:solid rgb(47,46,46) 3.5px;border-radius:50%;width:140px;height:140px;margin:20px auto;transition:background-color .2s ease}.main-player__play-btn:hover{cursor:pointer;background-color:#007bff}.main-player__play-btn img{max-width:90px;-webkit-user-select:none;user-select:none}.master-volume-container{display:flex;gap:10px;position:fixed;top:.5rem;left:1rem;z-index:1000}.master-volume-container input[type=range]{width:200px}.master-volume-container input:hover{cursor:pointer}.master-volume-container button{background-color:#00000040;border-radius:12px;padding:5px 10px;min-width:100px;transition:background-color .1s}.master-volume-container button:hover{cursor:pointer;background-color:#00000080}@media (max-width: 650px){.master-volume-container{top:3.5rem;left:50%;transform:translate(-50%);background-color:#00000080;padding:.5rem;border-radius:12px}}.music-player{margin:30px auto -20px;width:500px;padding:5px 30px;background-color:#00000040;border:solid white 2px;border-radius:16px;display:flex;flex-direction:column;align-items:center;font-family:Arial,sans-serif;position:relative}.music-player-head{margin-top:15px;margin-bottom:10px}.music-player .buttons-container{display:flex;gap:20px;position:absolute;right:-240px;top:7px}.music-player .buttons-container img{max-width:22px;opacity:50%;transition:opacity ease-in .1s}.music-player .buttons-container img:hover{cursor:pointer;opacity:100%}.music-player>div{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden;margin-bottom:0}.music-player .next-btn,.music-player .prev-btn{width:40px;height:auto;cursor:pointer;opacity:50%;transition:opacity .1s}.music-player .prev-btn{transform:scaleX(-1)}.music-player .next-btn:hover,.music-player .prev-btn:hover,.loop-btn:hover,.shuffle-btn:hover{opacity:100%}.player-options{gap:30px}.loop-btn,.shuffle-btn{width:20px;cursor:pointer;opacity:50%;transition:opacity .1s;border-radius:12px;padding:5px}.active{background-color:#0164a1bf;opacity:75%}.music-player .song-info{font-size:.8rem;background-color:#000;border:2px solid #00ffff;border-radius:12px;padding:5px 10px;color:#0ff;white-space:nowrap;overflow:hidden;position:relative;width:100%}.music-player .song-info span{display:inline-block;padding-left:105%;animation:scroll-text 20s linear infinite}@keyframes scroll-text{0%{transform:translate(0)}to{transform:translate(-105%)}}.music-player input[type=range]{width:100%;cursor:pointer;margin-top:15px;margin-bottom:5px}@media (max-width: 650px){.music-player{max-width:75%}.music-player-head{margin-top:2rem}.music-player .buttons-container{left:50%;transform:translate(-50%);gap:3rem}}.form-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;opacity:0;animation:fadeIn .25s ease forwards}.form-overlay h3{margin-top:-15px}.form{background-color:#003e8fb3;padding:2rem;border-radius:12px;box-shadow:0 8px 30px #00000040;width:90%;max-width:400px;position:relative;transform:translatey(-20px);opacity:0;animation:slideIn .3s ease forwards;border:solid white 3px}.close-img{max-width:50px;position:absolute;top:-45px;right:-45px;cursor:pointer;opacity:.7;transition:opacity .2s ease}.close-img:hover{opacity:1}.form input{display:block;width:95%;margin:.5rem 0 1rem;padding:.5rem .75rem;border:1px solid #ccc;color:#fff;background-color:#00000080;border-radius:6px;font-size:.95rem}.form .submit-btn,.form .delete-btn{display:block;width:100%;padding:.6rem;border:none;border-radius:6px;color:#fff;font-weight:600;cursor:pointer;transition:background-color .2s ease}.form .submit-btn{background-color:#005fcc}.form .submit-btn:hover{background-color:#1e90ff}.form .delete-btn{margin-top:20px;background-color:#990202}.form .delete-btn:hover{background-color:red}.optional-message{font-size:.85rem;text-align:left;margin-bottom:0;color:gray}.input-error{color:#fa2b2b;font-size:.85rem;text-align:left}.url-message{font-size:.85rem;color:#f2ff00;text-align:center;margin-top:.75rem;max-width:500px;line-height:1.5em}.form .songs-container{background-color:#000144;max-height:200px;overflow-y:auto;scroll-behavior:auto;border-radius:12px;border:1px solid white;margin-bottom:20px;scrollbar-width:thin}.form .songs-container p{text-align:left;padding-left:10px;padding-top:0;padding-bottom:0;margin-top:1px;margin-bottom:1px;align-self:center}.form .songs-container p:not(.selected,.empty-songs-msg):hover{cursor:pointer;background-color:#003cc9}.form .songs-container p:first-child{margin-top:10px}.form .songs-container p:last-child{margin-bottom:10px}.form .songs-container .selected{background-color:#ff8000b3}.form .songs-container .selected:hover{cursor:pointer}.form .edit-msg{font-size:.85rem;color:#f2ff00;text-align:center}@keyframes fadeIn{to{opacity:1}}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}@media (max-width: 650px){.form{max-width:60%;transform:translateY(-50%)}.url-message{max-width:70%}}@media (max-width: 450px){.close-img{top:-60px;right:-2%}.form .songs-container p{padding:1rem}}.sound-grid-container{background-color:#00000080;border:solid white 2px;border-radius:20px;width:75%;margin:50px auto;padding:50px;position:relative}.sound-grid-container .add-btn{max-width:30px;position:absolute;top:10px;right:10px;margin-bottom:0;opacity:50%;transition:opacity .1s ease-in}.sound-grid-container .add-btn:hover{opacity:100%;cursor:pointer}.sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.sound-grid__card{background-color:#003e8fb3;border:solid white 3px;border-radius:20px;color:#fff;font-family:Arial,Helvetica,sans-serif;position:relative;padding-bottom:1rem}.custom{border-color:#0ff}.sound-grid__card .edit-btn{max-width:20px;position:absolute;top:10px;right:10px;margin-bottom:0;opacity:50%;transition:opacity .1s ease-in}.sound-grid__card .edit-btn:hover{opacity:100%;cursor:pointer}.sound-icon{min-width:60px;max-width:60px;margin:10px 0 0}.sound-grid input[type=range]{background-color:#5cd5eb;height:2rem;max-width:80%;margin-bottom:0}.sound-grid input:hover{cursor:pointer}@media (max-width: 950px){.sound-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 650px){.sound-grid-container{max-width:65%}.sound-grid{grid-template-columns:1fr;justify-items:center;gap:3rem}.sound-grid__card{width:95%}}.error-page{border:white solid 2px;border-radius:12px;max-width:fit-content;margin:10% auto auto;padding:3em;background-color:#00000080}.error-page a{text-decoration:none;color:#afaf00}.error-page a:hover{color:#ff0}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}@font-face{font-family:PinyonScript;src:url(/assets/PinyonScript-Regular-N8TwtDb1.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:ZenTokyoZoo;src:url(/assets/ZenTokyoZoo-Regular-hoN3Iw3x.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(/assets/Roboto-Regular-CN_pkOMA.ttf) format("truetype");font-weight:400;font-style:normal}:root{background-image:linear-gradient(to right,#04275c,#5d5e6b);background-size:cover}body,button{font-family:Roboto;font-weight:700;color:#fff;text-align:center}
