@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

    :root{
    font-family:"Host Grotesk", serif;

    }
    body{
       padding:0;
        margin:0;
        overflow:hidden;
    }

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#loader{
    position:absolute;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100vw;
    height:100vh;
    background: linear-gradient(300deg,#396d2a,#ae275b,#5f44bb,#c05a8b,#c0a65a,#5ac072);
    background-size: 300% 300%;
    animation: gradient-animation 30s ease infinite;
    z-index:2;
}

.loader-image{
    animation: load 1.5s ease-in-out infinite;
    margin-bottom: 20px;
}
.loader-text{
    color:white;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

.checking-code{
    opacity:0.5 !important;
    pointer-events:none !important;
}

@keyframes load {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.8);
    }
}

.login{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height:100vh;
    padding:0;
    margin:0;
    background: linear-gradient(300deg,#396d2a,#ae275b,#5f44bb,#c05a8b,#c0a65a,#5ac072);
  background-size: 300% 300%;
  animation: gradient-animation 30s ease infinite;
}

.codeholder{
    background-color: rgba(255,255,255,0.5);
    padding:20px;
    border-radius:20px;
    width:30vw;
    min-width: 200px;
    height:75px;
    transition: 0.2s ease-in-out;
}

.codeholder:hover{
    background-color: rgba(255,255,255,0.6);
    transform: scale(1.05);
}

.code{
    background-color: transparent;
    border: none;
    border-bottom: 2px solid white; 
    outline: none;
    width: 100%; 
    height:100%;
    padding: 8px 0; 
    font-size: 30px; 
    text-align: center;
    box-sizing: border-box; 
    font-family:"Host Grotesk", serif;
    color:white;

}
.lg{
    color:white;
}

.logo{
    position: absolute;
    top:15px;
    left:15px;
}
.nwvbug{
    position: absolute;
    bottom:35px;
    left:35px;
    transition:0.2s ease-in-out;
    cursor: pointer;
}

.nwvbug:hover{
    transform: scale(1.2);
}

.incorrect{
    animation: shake 0.55s ease-in-out;
    color:red;
}

.want-to-host{
    display:flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap:10px;
    margin-top: 20px;
    color:white;
    position:relative;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

#want-to-host-text{
    text-align: center;
}
.want-to-host:hover{
    transform: scale(1.1);
}

.chrome-store-icon{
    height: 30px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0); /* Start and end at the original position */
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-8px); /* Move left */
    }
    20%, 40%, 60%, 80% {
        transform: translateX(8px); /* Move right */
    }
}
.block{
    background-color: rgba(0,0,0,0.5);
    pointer-events:all;
    z-index:1;
    position: absolute;
    height:100vh;
    width:100vw;
    display:none;
}
.none{
    display:none;
}


h1{
    margin:0;
    padding:0;
    color:white;
}
h2{
    margin:0;
    padding:0;
    color:white;
}

/* Phone Sizing */
    #control-text{
        padding:30px;
        text-align: center;
    }

    .content-body{
        background-color: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(80px);
        display:flex;
        flex-direction: column;
        align-items: center;
        width:100vw;
        height:100vh;
        justify-content: space-between;
        overflow:hidden;
    }

    .lyrics-holder{
        height:100vh;
        width: 90vw;
        overflow-y:scroll;
        color:white;
        background-color:rgba(0, 0, 0, 0);
        /* Create the fade effect */
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 25%, 
            rgba(0, 0, 0, 1) 40%, 
            rgba(0, 0, 0, 1) 90%, 
            rgba(0, 0, 0, 0) 97%
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 25%, 
            rgba(0, 0, 0, 1) 40%, 
            rgba(0, 0, 0, 1) 80%, 
            rgba(0, 0, 0, 0) 97%
        );
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;

        /* Ensure the div blends well with the background */
        background-blend-mode: normal;
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
        display: flex;
        flex-direction: column;
        gap:30px;
        align-items: center;
        text-align: center;
    }

    .info-panel{
        margin-top:7vh;
        transition: all 0.25s ease-in-out;
        position:absolute;
        z-index:2;
    }

    .info-panel-contents{
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap:3vw;
        padding-left:20px;
        padding-right:20px;
    }

    .image-holder{
        width: 25vw;
        /* height: 25vw; */
    }
    .image-holder img{
        width:100%;
        height:100%;
        border-radius: 5px 5px 0px 0px;
    }
    .title-artist-album{
        text-align: center;
    }
    .title{
        font-weight: 800;
        font-size:20px;
    }
    .artist-album{
        font-weight:400;
        font-size:14px;
    }

    .controls{
        display:flex;
        flex-direction: row;
        align-items: center;
        gap:20px;
    }
     .text-controls-holder{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:15px;
        transition: all 0.25s ease-in-out;
    }

    .control-button{
        width:15px;
        aspect-ratio: 1;
        transition:all 0.15s ease-in-out;
        cursor: pointer;
    }

    .pause{
        aspect-ratio:0.8;
    }

    .controls img:hover{
        transform: scale(1.2);
    }

    .portrait-progress-bar{
        width: 25vw;
        height: 7px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 0px 0px 5px 5px;
        overflow: hidden;
        cursor: pointer;
    }

    .progress-bar-inner{
        height: 100%;
        background-color: white;
        transition: width 0.1s ease-in-out;
        border-radius:0px 0px 5px 5px;
        width:40%;
    }
    .lyrics-holder div{
        cursor: pointer; 
        font-size: 32px; 
        width: 80%; 
        opacity: 0.4; 
        font-weight: 500;
        transition:0.25s;
    }


    .image-holder img:hover{
        transform: scale(1.01);
        transition: 0.25s;
        box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.25);
    }

@media (min-width:481px) {
    
  
    #control-text{
        padding:0px;
        text-align: left;
    }
    .content-body{
        backdrop-filter: blur(80px);
        display:flex;
        flex-direction: column;
        align-items: center;
        width:100vw;
        height:100vh;
        justify-content: space-between;
        overflow:hidden;
    }

    .lyrics-holder{
        height:100vh;
        width: 90vw;
        overflow-y:scroll;
        color:white;
        background-color:rgba(0, 0, 0, 0);
        /* Create the fade effect */
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0)37%, 
            rgba(0, 0, 0, 1) 42%, 
            rgba(0, 0, 0, 1) 80%, 
            rgba(0, 0, 0, 0) 97%
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0)37%, 
            rgba(0, 0, 0, 1) 42%, 
            rgba(0, 0, 0, 1) 80%, 
            rgba(0, 0, 0, 0) 97%
        );
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;

        /* Ensure the div blends well with the background */
        background-blend-mode: normal;
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
        display: flex;
        flex-direction: column;
        gap:30px;
        align-items: center;
        text-align: center;
    }

    .info-panel{
        margin-top:7vh;
        position:absolute;
    }

    .info-panel-contents{
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap:3vw;

    }

    .image-holder{
        width: 30vh;
        /* height: 30vh; */
    }
    .image-holder img{
        width:100%;
        height:100%;
        border-radius: 5px 5px 0px 0px;
    }
    .title-artist-album{
        text-align: center;
    }
    .title{
        font-weight: 800;
        font-size:30px;
    }
    .artist-album{
        font-weight:400;
        font-size:18px;
    }

    .controls{
        display:flex;
        flex-direction: row;
        align-items: center;
        gap:30px;
    }
     .text-controls-holder{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:15px;
        transition: all 0.25s ease-in-out;
    }

    .control-button{
        width:20px;
        aspect-ratio: 1;
        transition:all 0.15s ease-in-out;
        cursor: pointer;
    }

    .pause{
        aspect-ratio:0.8;
    }

    .controls img:hover{
        transform: scale(1.2);
    }

    .portrait-progress-bar{
        width: 30vh;
        height: 7px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 0px 0px 5px 5px;
        overflow: hidden;
        cursor: pointer;
    }

    .progress-bar-inner{
        height: 100%;
        background-color: white;
        transition: width 0.1s ease-in-out;
        border-radius:0px 0px 5px 5px;
        width:40%;
    }
    .lyrics-holder div{
        cursor: pointer; 
        font-size: 32px; 
        width: 80%; 
        opacity: 0.4; 
        font-weight: 500;
        transition:0.25s;
    }
}

@media (min-width:1300px) {
      .want-to-host{
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap:10px;
        margin-top: 20px;
        color:white;
        position:absolute;
        bottom:35px;
        cursor: pointer;
        transition: transform 0.2s ease-in-out;
    }

    #want-to-host-text{
        text-align: left;
    }
    /* Overall content body*/
  .content-body{
        backdrop-filter: blur(80px);
        box-sizing:border-box;
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width:100vw;
        height:100vh;
        gap:10vw;
    }

    /* Left Side */

    .info-panel{
        flex:1;
        display:flex;
        flex-direction: column;
        align-items:flex-end;
        transition: all 0.25s ease-in-out;
        margin-top:0;
        position:relative;
    }

    .info-panel.closed{
        align-items:center;
    }

    .info-panel-contents{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:20px;
        transition: all 0.25s ease-in-out;

    }

    .text-controls-holder{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:20px;
        transition: all 0.25s ease-in-out;
    }

    .image-holder{
        width: 55vh;
        /* height: 55vh; */
    }
    .image-holder img{
        width:100%;
        height:100%;
        border-radius: 10px;
    }
    .title-artist-album{
        text-align: center;
        max-width:55vh;
    }
    .title{
        font-weight: 800;
        font-size:30px;
    }
    .artist-album{
        font-weight:400;
        font-size:18px;
    }

    .controls{
        display:flex;
        flex-direction: row;
        align-items: center;
        gap:55px;
    }

    .controls img{
        height:25px;
        width:25px;
        cursor: pointer;
        transition: transform 0.2s ease-in-out;
    }

    .controls img:hover{
        transform: scale(1.2);
    }

    .pause{
        height:30px !important;
        width: 30px !important;
    }

    .progress-bar{
        width: 55vh;
        height: 7px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
    }

    .progress-bar-inner{
        height: 100%;
        background-color: white;
        transition: width 0.1s ease-in-out;
        border-radius:5px;
    }

    /* Right Side */
    .lyrics-panel{
        display: flex;
        flex:1;
        align-items: center;
        transition: all 0.25s ease-in-out;
    }

    .lyrics-holder{
        height:90vh;
        width: 38vw;
        overflow-y:scroll;
        color:white;
        background-color:rgba(0, 0, 0, 0);
        /* Create the fade effect */
        -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 10%,   /* Transparent at the top */
        rgba(0, 0, 0, 1) 20%,   /* Fully opaque in the middle */
        rgba(0, 0, 0, 1) 80%,   /* Fully opaque continues */
        rgba(0, 0, 0, 0) 90%    /* Transparent at the bottom */
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 10%, 
            rgba(0, 0, 0, 1) 20%, 
            rgba(0, 0, 0, 1) 80%, 
            rgba(0, 0, 0, 0) 90%
        );
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;

        /* Ensure the div blends well with the background */
        background-blend-mode: normal;
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
        text-align: left;
        display: flex;
        flex-direction: column;
        gap:30px;
        align-items: flex-start;
    }

    .lyrics-holder div{
        cursor: pointer; 
        font-size: 32px; 
        width: 80%; 
        opacity: 0.4; 
        font-weight: 500;
        transition:0.25s;
    }


    .portrait-progress-bar{
        display:none;
    }

  
}