@media only screen and (max-width: 1080px) {
    /* HOME */

    .flex-item{
        display: flex;
        flex: 1;
    }

    #lottie-banner{
        height: 86%;
    }

    .elements-1 .lottie-animation{
        width: 34%;
        bottom: -1px;
      }

    /* END HOME */

    /* FORM */
    input{
        height: 44px;
        width: 60%;
        margin: auto;
    }

    .input-row{
        margin-bottom: 2.5%;
    }

    [class*=Help]{
        margin-top: 2px;
        font-size: 11px;
    }

    form p{
        margin-bottom: 10px;
    }

    #pdpa-text{
        font-size: 10px;
        text-align: center;
        line-height: normal;
    }
    /* END FORM */

     /* LEADERBOARD */

     #top20-banner{
        max-width: 340px;
        min-width: 100px;
        width: 20%;
        margin-top: 0;
      }

    #rank-button-container{
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        min-width: 280px;
    }

    .rank-tr{
        font-size: calc(9px + .2rem);
        letter-spacing: .1rem;
        line-height: 130%;
    }
      
    .top-3{
        font-size: calc(13px + .05vw);
        letter-spacing: .2rem;
        line-height: 150%;
    }

    .ranking{
        width: 78%;
        transform: translateX(8%);
    }

    .leaderboard-footer{
       width: 80%; 
    }

    /* END LEADERBOARD */

}

@media only screen and (max-width: 800px) {

    /* HOME */

    #lottie-banner{
        height: 100%;
    }

    [id*=logo], [class*=logo]{
        top: 12%;
        width: 15%;
        max-width: 94px;
    }

    .logoSmall{
        max-width: 48px;
    }

    /* LEADERBOARD */

    #top20-banner{
        max-width: 340px;
        min-width: 100px;
        width: 50%;
        margin-top: 4%;
      }

    #rank-button-container{
        bottom: 24%;
        left: 50%;
        transform: translateX(-50%);
        min-width: 220px;
    }

    .rank-tr{
        font-size: calc(9px + .4rem);
        letter-spacing: .1rem;
        line-height: 120%;
    }
      
    .top-3{
        font-size: calc(13px + .05vw);
        letter-spacing: .2rem;
        line-height: 150%;
    }

    .ranking{
        width: 75%;
    }

    /* END LEADERBOARD */
    
}

@media only screen and (max-width: 768px) {

    /* REGISTER FORM */
    #signup-form{
        min-width: 200px;
        height: 42%;
    }

    input{
        height: 36px;
        width: 60%;
        font-size: 14px;
    }
    
    .input-row{
        margin-bottom: 9.6%;
        max-width: 360px;
    }



    /* END REGISTER FORM */
}

@media only screen and (max-width: 480px) {

    .ended-text{
        font-size: 1.2rem;
    }

    .flex-container {
        margin: 5% 0 0 0;
        align-content: stretch;  
    }

    .flex-item{
        display: block;
        flex: 1;
    }

    .flex-container .flex-item {
        height: 100%;
    }

    .home-l{
        width: 54px;
        margin-top: 0;
        position: relative;
        top: 5vh;
    }

    #lottie-banner{
        height: 100%;
        align-self: flex-end;
    }

    [id*=logo], [class*=logo]{
        top: 12%;
    }

    .elements-1 .lottie-animation{
        width: 90%;
    }


    .logoSmall{
        top:10%;
        max-width: 42px;
      }
      

    /* FORM */ 
    .elements-2{
        width: 64%;
    }

    .elements-2 img{
        width: 100%;
    }

    form .btn{
        max-width: 200px;
    }

    #signup-form{
     min-width: 320px;
     height: 44%;
    }
    
    #login-form{
        min-width: 320px;
    }

    input{
        background-color: rgba(0, 0, 0, 0);
        border: 0;
        border-bottom: 1px solid white;
        height: 34px;
        width: 70%;
        text-align: center; 
        font-size: 14px !important;
        color: white ;
        font-family: "Maxis-Semibold";
    }

    ::placeholder {
        color: white;
        font-size: 14px;
        font-family: "Maxis-Semibold";
    }

    /* END FORM */ 

    /* LEADERBOARD */
    #top20-banner{
        max-width: 340px;
        min-width: 100px;
        width: 44%;
        margin-top: 16%;
    }
    
    .rank-tr{
        font-size: 10px;
        letter-spacing: .06rem;
        line-height: 115%;
    }
    
    .top-3{
        font-size: calc(12px + .1vw);
        letter-spacing: .15rem;
        line-height: 150%;
        margin: 2% 0;
    }

    /* END LEADERBOARD */

    /* HEALTH */
    .health-block{
        width: 100%;
    }
    
    #health h1{
        font-size: calc(14px + 1rem);
        letter-spacing: .12rem;
        line-height: 100%;
        margin-top: -4%
    }
    
    #health h3{
        font-size: calc(10px + .4rem);
        letter-spacing: .12rem;
        line-height: 100%;
        margin-bottom: -2%
    }
    
    #health p{
        font-size: calc(10px + .1rem);
        letter-spacing: 0.08rem;
        margin-bottom: -4%
    }
    
    /* END HEALTH */

    /* Footer */

    .health-footer{
        max-width: 76%;
        height: auto;
    }

    #wave{
        background-size: 15vw;
    }

    .leaderboard-footer{
        width: 74%;
    }
      /* END Footer */

}

@media screen and (max-width: 380px) {


    #join-btn{
        height: 98%;
        transform: scale(0.95);
    }

    .elements-1 .lottie-animation{
        width: 86%;
    }

    .logoSmall{
        top:8%;
        max-width: 40px;
      }

    #signup-form{
        min-width: 300px;
        height: 44%;
       }
       
       #login-form{
           min-width: 300px;
       }

       form .btn{
        max-width: 160px;
    }

    #top20-banner{
        margin-top: 10%;
    }

    .top-3{
        font-size: 11px;
        letter-spacing: .10rem;
        line-height: 130%;
        margin: 1% 0;
    }

    .rank-tr:nth-child(3){
        padding-bottom: 1vh;
      }
}

@media only screen and (max-width: 360px) {

/* HEALTH */
.health-block{
    margin-top: 24vh;
}

#health h1{
    font-size: calc(10px + 1rem);
    letter-spacing: .2rem;
    line-height: 100%;
}

#health h3{
    font-size: calc(6px + .6rem);
    letter-spacing: .2rem;
    line-height: 100%;
}

#health p{
    font-size: calc(10px);
    letter-spacing: 0.1rem;
    line-height: 130%;
}

/* END HEALTH */

/* LEADERBOARD  */
#rank-button-container{
    bottom: 22%;
}

.ranking{
    width: 78%;
    transform: translateX(9%);
}

#top20-banner{
    margin-top: 8%;
}

.top-3{
    font-size: calc(11px);
    letter-spacing: .06rem;
    line-height: 150%;
    margin: 1% 0;
}

.rank-tr:nth-child(3){
    padding-bottom: 1vh;
}
/* END LEADERBOARD  */

/* Footer */

.leaderboard-footer{
    width: 60%;
}
  /* END Footer */
}


@media only screen and (max-width: 480px) and (min-height: 560px) {
.health-footer{
    max-width: 54%;
}

}

/* Normal Mobile Screen */
@media only screen and (max-width: 400px) and (min-height: 560px) {

    .elements-1 .lottie-animation{
        width: 94%;
    }

    /* LEADERBOARD */
    #top20-banner{
        width: 42%;
        margin-top: 8%;
    }
    
    .rank-tr{
        font-size: calc(10px + 0.05rem);
        letter-spacing: .05rem;
        line-height: 125%;
    }
    
    .top-3{
        font-size: calc(10px + .1vw);
        letter-spacing: .1rem;
        line-height: 140%;
        margin: 1% 0;
    }
    
    .ranking{
        width: 78%;
        transform: translateX(10%);
    }

    #rank-button-container{
        width: 60%;
        bottom: 22%;
    }

    /* END LEADERBOARD */
}

@media only screen and (min-width: 360px) and (max-width: 480px) and (min-height: 560px) {

        #join-btn{
            transform: scale(1.06) translateY(-1%);
        }
}

/* Tall Mobile Screen */
@media only screen and (max-width: 480px) and (min-height: 600px) {
    .elements-1 .lottie-animation{
        width: 90%;
    }

    /* LEADERBOARD */
    #top20-banner{
        width: 44%;
        margin-top: 8%;
    }
    
    .rank-tr{
        font-size: calc(10px + 0.05rem);
        letter-spacing: .06rem;
        line-height: 130%;
    }
    
    .top-3{
        font-size: calc(12px + .1vw);
        letter-spacing: .06rem;
        line-height: 140%;
        margin: 1% 0;
    }

    .ranking{
        width: 84%;
        transform: translateX(9%);
    }

    #rank-button-container{
        width: 60%;
        bottom: 22%;
    }

    /* END LEADERBOARD */
}

/* Tall Mobile Screen */
@media only screen and (max-width: 480px) and (min-height: 700px) {
    .elements-1 .lottie-animation{
        width: 104%;
        transform: translateX(-2%);
    }

    /* LEADERBOARD */
    #top20-banner{
        width: 44%;
        margin-top: 14%;
    }
    
    .rank-tr{
        font-size: calc(11px + 0.05rem);
        letter-spacing: .05rem;
        line-height: 140%;
    }
    
    .top-3{
        font-size: calc(12px + .1vw);
        letter-spacing: .07rem;
        line-height: 160%;
        margin: 1% 0;
    }

    .ranking{
        width: 80%;
        transform: translateX(10%);
    }

    #rank-button-container{
        bottom: 22%;
      }
    /* END LEADERBOARD */
}

/* Tall Mobile Screen */
@media only screen and (max-width: 480px) and (min-height: 760px) {
    .elements-1 .lottie-animation{
        width: 107%;
        transform: translateX(-3%);
    }
 
    /* LEADERBOARD */
    #top20-banner{
        width: 46%;
        margin-top: 14%;
    }
    
    .rank-tr{
        font-size: calc(11px + 0.1rem);
        letter-spacing: .06rem;
        line-height: 150%;
    }

    .ranking{
        width: 88%;
        transform: translateX(9%);
    }
    
    .top-3{
        font-size: calc(14px);
    }

    #rank-button-container{
        bottom: 24%;
        width: 70%;
    }

    /* END LEADERBOARD */
}

/* Tall Mobile Screen */
@media only screen and (max-width: 480px) and (min-height: 800px) {
    
    .elements-1 .lottie-animation{
        width: 104%;
        transform: translateX(-2%);
    }

    /* LEADERBOARD */
    #top20-banner{
        width: 46%;
        margin-top: 12%;
    }

    .ranking{
        transform: translateX(7%);
    }
    
    .rank-tr{
        font-size: calc(12px + 0.05rem);
        letter-spacing: .06rem;
        line-height: 150%;
    }
    
    .top-3{
        font-size: calc(14px + .1vw);
        letter-spacing: .1rem;
        line-height: 160%;
        margin: 1% 0;
    }
    /* END LEADERBOARD */
}