#game{
    position:absolute;
    left:0px;
    top:0px;
}

/*--Game UI------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.points-holder{
    box-shadow:min(0.5vh,0.5vw) min(0.5vh,0.5vw) min(1vh,1vw) rgba(0,0,0,0.75);
    background-color:var(--accent-color-d);
    border:2px solid var(--border-color);
    border-radius:min(1vh,1vw);
    padding-right:min(2vh,2vw);
    width:min(22vh,22vw);
    height:min(8vh,8vw);
    right:min(2vh,2vw);
    position:absolute;
    top:min(2vh,2vw);
    overflow:hidden;
    flex-shrink:0;
}
.points-holder-body{
    border-bottom:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-right:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-left:min(0.25vh,0.25vw) solid var(--accent-color-l);
    border-top:min(0.25vh,0.25vw) solid var(--accent-color-l);
    background-color:var(--base-color-l);

    border-radius:min(0.75vh,0.75vw);
    height:min(7.65vh,7.65vw);
    width:min(23.6vh,23.6vw);
    position:absolute;
    left:0px;
    top:0px;
}
.points{
    animation:lightPulse ease-in-out infinite 1s;
    font-size:min(6.5vh,6.5vw);
    color:rgb(0,0,0);

    position:absolute;
    width:min(22vh,22vw);
    height:min(8vh,8vw);
    left:0px;
    top:0px;

    justify-content:flex-end;
    align-items:center;
    white-space:nowrap;
    position:absolute;
    display:flex;
}
.lives-holder{
    box-shadow:min(0.5vh,0.5vw) min(0.5vh,0.5vw) min(1vh,1vw) rgba(0,0,0,0.75);
    background-color:var(--accent-color-d);
    border:2px solid var(--border-color);
    border-radius:min(1vh,1vw);
    width:min(36.5vh,36.5vw);
    height:min(12vh,12vw);
    position:absolute;
    left:min(1vh,1vw);
    top:min(1vh,1vw);
    overflow:hidden;
}
.lives-holder-body{
    border-bottom:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-right:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-left:min(0.25vh,0.25vw) solid var(--accent-color-l);
    border-top:min(0.25vh,0.25vw) solid var(--accent-color-l);
    background-color:var(--base-color-l);

    border-radius:min(0.75vh,0.75vw);
    width:min(36.12vh,36.12vw);
    height:min(11.6vh,11.6vw);
    position:absolute;
    left:0px;
    top:0px;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.life{
    animation:lightPulse ease-in-out infinite 1s;
    background-image:url("../Assets/Images/UI/Nicky\ Life.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    height:min(10vh,10vw);
    width:min(10vh,10vw);
    margin:min(1vh,1vw);
    flex-shrink:0;
}
.thumbs-up{
    background-image:url("../Assets/Images/UI/thumbs\ up.png");
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;
   
    width:calc(min(40vh,40vw) * 1.06);
    height:min(40vh,40vw);
    bottom:-100%;
    right:-100%;
}
.close-one{
    background-image:url("../Assets/Images/UI/Candy.png");
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;
   
    width:calc(min(40vh,40vw) * 0.804);
    height:min(40vh,40vw);
    bottom:-100%;
    left:-100%;
}
.speech-bubble-left{
    background-image:url("../Assets/Images/UI/Speach\ Bubble.png");
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:contain;
    position:relative;
    height:100%;
    width:100%;
    left:30%;
    top:-50%;
}
.speech-bubble-right{
    background-image:url("../Assets/Images/UI/Speach\ Bubble.png");
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:contain;
    position:relative;

    transform:scaleX(-1);
    height:75%;
    width:75%;
    left:-40%;
    top:-50%;
}
.speech-bubble-text-left{
    justify-content:center;
    align-items:center;
    text-align:center;
    position:absolute;
    display:flex;

    font-size:min(3vh,3vw);
    height:43.5%;
    width:91%;
    left:5%;
    top:30%;
}
.speech-bubble-text-right{
    justify-content:center;
    align-items:center;
    text-align:center;
    position:absolute;
    display:flex;

    font-size:min(3vh,3vw);
    transform:scaleX(-1);
    height:57.5%;
    width:91%;
    top:7.5%;
    left:5%;
}
.exclamation{
    background-image:url("../Assets/Images/Nicky/exclamation.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;
    display:none;

    height:min(25vh,25vw);
    left:min(9vh,9vw);
    width:min(5vh,5vw);
    top:17%;
}

.tutorial-mask{
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
#tutorial-quit{
    left:calc(50% - min(10vh,10vw));
    display:none;
    bottom:5vh;
}
#tutorial-quit-body{
    font-size:min(2.75vh,2.75vw);
}
.tutorial-text-holder{
    height:min(5vh,5vw);
    top:min(20vh,20vw);
    position:absolute;
    display:none;
    width:100%;
    left:0px;
}
.tutorial-text{
    text-shadow:min(0.5vh,0.75vw) min(0.25vh,0.25vw) rgb(0,0,0);
    color:rgb(255,255,255);
    font-size:min(4vh,4vw);

    -webkit-text-stroke:1px;
    -webkit-text-stroke-color:rgb(0,0,0);
   
    justify-content:center;
    align-items:center;
    text-align:center;
    display:none;

    transform:translate(-50%,-50%);
    position:absolute;
    height:100%;
    width:100%;
    left:50%;
    top:50%;
}
.tutorial-popup{
    position:absolute;
    width:calc(min(40vh,40vw) * 1.06);
    height:min(40vh,40vw);
    bottom:-100%;
    right:-100%;
}
.tutorial-img{
    background-image:url("../Assets/Images/UI/wave.gif");
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}

/*--Buttons------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.game-button{
    box-shadow:min(0.5vh,0.5vw) min(0.5vh,0.5vw) min(1vh,1vw) rgba(0,0,0,0.75);
    background-color:var(--accent-color-d);
    border:2px solid var(--border-color);
    border-radius:min(1vh,1vw);
    height:min(5vh,5vw);
    width:min(5vh,5vw);
    overflow:hidden;
}
.game-button-icon{
    border-bottom:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-right:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-left:min(0.25vh,0.25vw) solid var(--accent-color-l);
    border-top:min(0.25vh,0.25vw) solid var(--accent-color-l);
    background-color:var(--base-color-l);
    border-radius:min(0.75vh,0.75vw);

    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;

    height:min(4.15vh,4.15vw);
    width:min(4.15vh,4.15vw);
    left:0px;
    top:0px;
}
.pause-icon{
    background-image:url("../Assets/Images/UI/pause.png");
}
.settings-icon{
    background-image:url("../Assets/Images/UI/settings.png");
}
.pause-button{
    right:min(2vh,2vw);
    top:min(11vh,11vw);
}
.settings-button{
    right:min(2vh,2vw);
    top:min(2vh,2vw);
}
.pause-screen{
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.pause-text{
    box-shadow:min(0.5vh,0.5vw) min(0.5vh,0.5vw) min(1vh,1vw) rgba(0,0,0,0.75);
    animation:lightPulseTitle ease-in-out infinite 1s;
    transform:translate(-50%,-50%);
    padding-bottom:min(1vh,1vw);
    border-radius:min(1vh,1vw);
    height:min(9.5vh,9.5vw);
    width:min(30vh,30vw);
    position:absolute;
    overflow:hidden;
    left:50%;
    top:50%;

    background-color:var(--accent-color-d);
    border:2px solid var(--border-color);
}
.pause-text-body{
    border-bottom:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-right:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-left:min(0.25vh,0.25vw) solid var(--accent-color-l);
    border-top:min(0.25vh,0.25vw) solid var(--accent-color-l);
    background-color:var(--base-color-l);

    justify-content:center;
    align-items:center;
    white-space:nowrap;
    position:absolute;
    display:flex;
    
    border-radius:min(0.8vh,0.8vw);
    width:min(29.65vh,29.65vw);
    font-size:min(7vh,7vw);
    height:min(10vh,10vw);
    color:rgb(0,0,0);
    left:0px;
    top:0px;
}
#pause-quit{
    box-shadow:min(0.5vh,0.5vw) min(0.5vh,0.5vw) min(1vh,1vw) rgba(0,0,0,0.5);
    left:calc(50% - min(10vh,10vw));
    top:calc(50% + min(8vh,8vw));
}

/*--Game Over----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.game-over-screen{
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.game-over-text{
    box-shadow:min(0.5vh,0.5vw) min(0.5vh,0.5vw) min(1vh,1vw) rgba(0,0,0,0.75);
    animation:lightPulseTitle ease-in-out infinite 1s;
    padding-bottom:min(1vh,1vw);
    border-radius:min(1vh,1vw);
    height:min(9.5vh,9.5vw);
    width:min(40vh,40vw);
    position:absolute;
    overflow:hidden;
    left:50%;
    top:15%;

    background-color:var(--accent-color-d);
    border:2px solid var(--border-color);
}
.game-over-text-body{
    border-bottom:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-right:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-left:min(0.25vh,0.25vw) solid var(--accent-color-l);
    border-top:min(0.25vh,0.25vw) solid var(--accent-color-l);
    background-color:var(--base-color-l);

    justify-content:center;
    align-items:center;
    white-space:nowrap;
    position:absolute;
    display:flex;

    border-radius:min(1vh,1vw);
    width:min(39.6vh,39.6vw);
    font-size:min(7vh,7vw);
    height:min(10vh,10vw);
    color:rgb(0,0,0);
}
.game-over-points{
    text-shadow:min(0.5vh,0.5vw) min(0.25vh,0.25vw) rgb(0,0,0);
    animation:lightPulseTitle ease-in-out infinite 1s;
    top:calc(15% + min(12vh,12vw));
    color:rgb(255,255,255);
    font-size:min(10vh,10vw);
    height:min(10vh,10vw);
    width:min(40vh,40vw);
    left:50%;

    justify-content:center;
    align-items:center;
    white-space:nowrap;
    position:absolute;
    font-weight:bold;
    display:flex;

    -webkit-text-stroke:2px;
    -webkit-text-stroke-color:rgb(0,0,0);
}
.game-over-input-name{
    transform:translate(-50%);
    font-size:min(3vh,3vw);
    color:rgb(0,0,0);
    margin-left:50%;
    width:100%;

    justify-content:center;
    align-items:center;
    text-align:center;
    display:flex;
}
.game-over-name-window{
    transform:translateY(-70%);
    height:min(15vh,15vw);
    width:min(48vh,48vw);
}
#game-over-input-window{
    height:min(15vh,15vw);
}
#player-name{
    margin-top:min(1vh,1vw);
    width:85%;
}
#play-again{
    box-shadow:min(0.5vh,0.5vw) min(0.5vh,0.5vw) min(1vh,1vw) rgba(0,0,0,0.5);
    left:calc(50% - min(10vh,710vw));
    top:calc(80% + min(2vh,2vw));
}
#game-over-quit{
    box-shadow:min(0.5vh,0.5vw) min(0.5vh,0.5vw) min(1vh,1vw) rgba(0,0,0,0.5);
    left:calc(50% - min(10vh,710vw));
    top:calc(80% + min(9vh,9vw));
}
#enter-name{
    left:calc(50% - min(21vh,21vw));
    top:min(10vh,10vw);
}
#enter-name-close{
    left:calc(50% + min(1vh,1vw));
    top:min(10vh,10vw);
}

/*--Leaderboard--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#leaderboard{
    height:min(60vh,60vw);
    left:50%;
    top:40%;
}
.leaderboard-buttons-holder{
    height:min(4vh,4vw);
    width:100%;

    justify-content:center;
    align-items:center;
    display:flex;
}
.leaderboard-button{
    border-radius:min(0.75vh,0.75vw);
    transform:translate(0px,0px);
    margin:min(0.5vh,0.5vw);
    width:min(9.5vh,9.5vw);
    font-size:min(2vh,2vw);
    height:min(4vh,4vw);
    color:rgb(0,0,0);

    white-space:nowrap;
    position:initial;
    overflow:hidden;

    background-color:var(--accent-color-d);
    border:2px solid var(--border-color);
}
.leaderboard-button-body{
    border-bottom:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-right:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-left:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-top:min(0.25vh,0.25vw) solid var(--accent-color-d);
    background-color:var(--base-color-l);
    border-radius:min(0.6vh,0.6vw);
    position:absolute;
    padding:0px;
    margin:0px;
    left:0px;
    top:0px;

    height:min(3.18vh,3.18vw);
    width:min(8.65vh,8.65vw);

    justify-content:center;
    align-items:center;
    display:flex;
}
.leaderboard-button:hover{
    transform:translate(0px,-1px);
}
.leaderboard-button:active{
    transform:translate(0px,1px);
}
.selected{
    border:2px solid var(--accent-color-l);
    box-shadow:0px 0px min(1vh,1vw) var(--accent-color-l);
}
.leaderboard-holder{
    margin-top:min(2vh,2vw);
    height:min(40vh,40vw);
    width:100%;

    overflow-x:hidden;
    overflow-y:auto;

    text-align:center;
    font-size:min(2.5vh,2.5vw);
    color:rgb(0,0,0);
}
.score{
    font-size:min(2.5vh,2.5vw);
    height:min(3vh,3vw);
    color:rgb(0,0,0);
    margin-left:5%;
    width:90%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.score-num{
    color:var(--accent-color-d);
    width:min(3vh,3vw);
    height:100%;

    justify-content:flex-end;
    align-items:center;
    font-weight:bold;
    display:flex;
}
.score-name{
    margin-left:min(1vh,1vw);
    height:100%;
    width:50%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.score-value{
    width:calc(50% - min(4vh,4vw));
    margin-left:min(1vh,1vw);
    height:100%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}