@font-face {
    font-family: 'pixelated';
    src: url('font/monocraft-ttf/Monocraft.ttf');
}
:root {
    --primary-color: #00adee;
    --background-color: #121212;
}

body{
    color: var(--primary-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100%;
    text-align: center;
    background: var(--background-color) url("assets/background.png") fixed center center;
    background-size: cover;
    backdrop-filter: blur(10px);
}

#game{
}

#gameStartWindow{

    position: absolute;
    display: block;
    background-color: var(--background-color);
    border: 4px solid var(--primary-color);
    border-radius: 15px;
    height: clamp(100px, min(60vh,45vw) ,1000px);
    width: clamp(150px, min(90vw,120vh) ,1500px);

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.gameStartText {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%, 0);

    width: 100%;
    height: 10%;

    font-size: 3cqmin;
    font-family: pixelated, monospace;


    color: white;
    text-align: center;
    vertical-align: top;

    outline: none;

    display: none;
}
.gameStartText strong{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
    white-space: nowrap;
}







.gameStartInput{
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, 0);


    width: 85%;
    padding: 1cqmin;
    height: 10%;

    font-size: min(5cqmin);
    font-family: pixelated, monospace;
    text-align: center;

    color: white;
    background: #222;
    border: 0.4cqmin solid var(--primary-color);


    display: none;
}
#emailInput {
    top: 45%;
}
#usernameInput {
    top: 15%;
}


#startEmailText {
    top: 35%;
}

#startButton {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, 0);

    width: 75%;
    padding: 0.5vw;

    height: 25%;

    font-size: 6cqmin;
    font-family: pixelated, monospace;

    color: white;
    background: #222;
    border: 0.5cqmin solid var(--primary-color);
    outline: none;

    display: none;
}

#startButton:hover {
    background: #009dde;
    color: #000000;

}

#gameOverText {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(-50%, -50%);

    width: 100%;

    height: 2cqmin;

    font-size: 3cqmin;
    font-family: pixelated, monospace;

    color: red;
    outline: none;

    display: none;
}

#gameOverScoreText {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(-50%, -50%) translate(0, 4cqmin);

    width: 100%;

    height: 2cqmin;

    font-size: 2cqmin;
    font-family: pixelated, monospace;

    color: white;
    outline: none;

    display: none;
}


#leaderboard {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%,0%);


    padding: 10px;

    height: 60%;
    width: 80%;

    font-size: 2cqmin;
    font-family: pixelated, monospace;

    color: white;
    background: #222;
    border: 5px solid #00ff99;
    outline: none;

    display: none;

    opacity: 0.75;
}
#leaderboard p{
    left: 0;
    align-content: flex-start;
    text-align: left;
    padding-top: 1cqmin;
}

.gameStartErrorText{
    position: absolute;
    left: 50%;
    top: 63%;
    transform: translate(-50%, -50%);

    width: 75%;
    padding: 1cqmin;
    height: 1cqmin;

    font-size: 2cqmin;
    font-family: pixelated, monospace;

    color: white;
    background: #222;
    border: 0.25cqmin solid #ff3020;

    display: none;
}
.gameStartErrorText *{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;

}

#errorEmail {

}
#errorUsername {
    top: 33%
}