.content{height:100%}.content.scrollable{overflow-y:scroll}.content.scrollable::-webkit-scrollbar{width:12px}.content.scrollable::-webkit-scrollbar-track{border-radius:10px}.content.scrollable::-webkit-scrollbar-thumb{border-radius:10px;background-color:#fff}.content .header{justify-content:center;text-align:center;margin-bottom:16px}.content .header .title{margin-bottom:10px}.content .header .subtitle{margin:0}.menu-btn{cursor:pointer;margin-top:20px;text-align:center;font-weight:600;text-transform:uppercase}.logo{display:block;margin:2vw auto -35px}:root{--xs:8px;--sm:16px;--md:32px;--lg:64px;--xl:128px}.ma-sm{margin:var(--sm)}.ma-md{margin:var(--md)}.ma-lg{margin:var(--lg)}.ma-xl{margin:var(--xl)}.mt-xl{margin-top:var(--xl)}.row{display:flex;flex-direction:row}.row.justify-end{justify-content:flex-end}.row.justify-center{justify-content:center}.col{display:flex;flex-direction:column}.col.align-center{align-content:center;align-items:center}.gutter-sm{grid-gap:var(--sm);gap:var(--sm)}.gutter-md{grid-gap:var(--md);gap:var(--md)}.text-center{text-align:center}.card-container{position:relative;display:flex;flex-direction:column;align-items:center;overflow:hidden;border-radius:3vw;cursor:pointer}.card-container.game-mode{height:45vh;width:37vw}.card-container.player-count{height:40vh;width:20vw}.card-container.category{height:30vh;width:20vw;margin:1.5vw}.card-container.song{border-radius:100vh;width:80vw;margin-bottom:2vh}.card-container.locked img,.card-container h1,.card-container p{z-index:1}.card-container.locked img.category{height:9vh;margin-bottom:2vh}.card-container.locked img.song{width:3vh;position:relative;top:.6vh;margin-right:1.5vw}.card-container.locked .card-background{opacity:.8;background-color:var(--gold)}.card-container:focus .card-background,.card-container:hover .card-background{opacity:.9}.card-container:active .card-background{opacity:1}.card-container:not(.locked):active h1,.card-container:not(.locked):active p,.card-container:not(.locked):focus h1,.card-container:not(.locked):focus p,.card-container:not(.locked):hover h1,.card-container:not(.locked):hover p{color:var(--purple)}.card-container .locked:active h1,.card-container .locked:active p,.card-container .locked:focus h1,.card-container .locked:focus p,.card-container .locked:hover h1,.card-container .locked:hover p{color:var(--gold)}.card-container .card-loader-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:100}.card-container .card-loader-container .card-loader-background{position:absolute;width:100%;height:100%;background-color:#fff}.card-background{position:absolute;top:0;bottom:0;left:0;right:0;background-color:#fff;opacity:.24}.button{align-items:center;width:-moz-fit-content;width:fit-content;padding:.5vh 4vh;border-radius:100vh;cursor:pointer}.button.primary{background-color:var(--primary)}.button.border{border:5px solid #fff}.button.small{padding:.5vh 2.5vh}.button.small p{margin:0}.button h1,.button p{z-index:1;color:#fff}.button:focus,.button:hover{background-color:#fff}.button:active h1,.button:active p,.button:focus h1,.button:focus p,.button:hover h1,.button:hover p{color:var(--purple)}a{text-decoration:none}input{background-color:#fbf3fd;color:#000;border-radius:20px;padding:16px;font-family:inherit;font-size:inherit;border-width:0}input:focus{outline:none}input[type=submit]{background-color:var(--primary);color:#fff;cursor:pointer;font-weight:700}label{font-weight:bolder;font-size:21px}.back-button{display:flex;width:64px;border-radius:16px;align-items:center;justify-content:center;padding:0 3vh;background-color:#7a72ee;margin:16px;color:#fff}.back-button .arrow{width:1vh;height:1vh;background-color:transparent;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border:solid #fff;border-width:.55vh 0 0 .55vh;margin-right:1vw}.back-button p{margin:8px 0;font-size:16px;font-weight:700;z-index:1}.back-button:focus .back-button-background,.back-button:hover .back-button-background{opacity:.9}.back-button:focus p,.back-button:hover p{color:var(--purple)}.back-button:active .arrow,.back-button:focus .arrow,.back-button:hover .arrow{border:solid var(--purple);border-width:.55vh 0 0 .55vh}.back-button:active .back-button-background{opacity:1}.back-button:active p{color:var(--purple)}.index-logo{width:80%;max-width:600px}.karaoke-background{background-image:url(/background.png);background-repeat:no-repeat;background-position:top;background-size:contain;height:150vh;width:100%;position:absolute;top:0;z-index:-1}.play-now-button{margin:50px auto auto}.play-now-button p{font-size:24px}@media only screen and (max-width:768px){.play-now-button p{font-size:18px}}.feedback-form label{width:30vw}.feedback-form input{width:40vw;max-width:400px}@media only screen and (max-width:768px){.feedback-form input{width:80vw}}.content .songs{display:flex;flex-direction:column;align-items:center;flex:1 1;padding:2vh}.content .songs .song{margin-bottom:2vh}.content .songs p{font-size:18px;padding:.5vw;margin:1.5vw;text-align:center}.categories{flex-wrap:wrap;flex:1 1}.categories,.categories .category{display:flex;justify-content:center}.categories .category{align-items:center}.categories .category p{font-size:2.7vw;padding:0 2.2vw;text-align:center;font-weight:700}.lyrics{padding:16px;display:flex;flex-direction:column;align-items:center;flex:1 1}.lyrics p{font-size:26px;margin:1vw 0;text-align:center}@font-face{font-family:Roboto;src:url(/_next/static/media/Roboto-Light.0cea39826bd36bbfe33076c544e3a1af.ttf)}@font-face{font-family:Roboto;font-weight:700;src:url(/_next/static/media/Roboto-Bold.4f39c5796e60c9d8e7327a00e9a4442e.ttf)}:root{--gold:#fcc400;--purple:#5146ec;--pink:#b638e9;--light-pink:#dd89ff;--green:#14af5c;--red:#d01e29;--black:#1d1d1d;--cyan:#00c7d6;--primary:#d059ff}body{background-color:var(--purple);color:#fff;font-family:Roboto,Arial,sans-serif}