@font-face {
    font-family: 'pixelated';
    src: url('font/monocraft-ttf/Monocraft.ttf');
}

body{
    text-align: center;
    background: #00adee;
}

#game{
    background: #00adee;
}

#usernameInput {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translate(75px, -50px);

    width: 300px;
    padding: 10px;
    height: 25px;

    font-size: 24px;
    font-family: pixelated, monospace;

    color: white;
    background: #222;
    border: 2px solid #00ff99;
    outline: none;
    border-left: none;

    display: none;
}



#startUsernameText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translate(-160px, -50px);

    width: 130px;
    padding: 10px;
    height: 25px;

    font-size: 24px;
    font-family: pixelated, monospace;

    color: white;
    background: #222;
    border: 2px solid #00ff99;
    border-right: none;

    outline: none;

    display: none;
}


#emailInput {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translate(75px, -0px);

    width: 300px;
    padding: 10px;
    height: 25px;

    font-size: 20px;
    font-family: pixelated, monospace;

    color: white;
    background: #222;
    border: 2px solid #00ff99;
    outline: none;
    border-left: none;

    display: none;
}



#startEmailText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translate(-160px, -0px);

    width: 130px;
    padding: 10px;
    height: 25px;

    font-size: 24px;
    font-family: pixelated, monospace;

    color: white;
    background: #222;
    border: 2px solid #00ff99;
    border-right: none;

    outline: none;

    display: none;
}

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

    width: 150px;
    padding: 10px;

    height: 75px;

    font-size: 24px;
    font-family: pixelated, monospace;

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

    display: none;
}

#startButton:hover {
    background: #00ff99;
}

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

    width: 300px;
    padding: 50px;

    height: 75px;

    font-size: 42px;
    font-family: pixelated, monospace;

    color: red;
    outline: none;

    display: none;
}

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

    width: 300px;
    padding: 50px;

    height: 75px;

    font-size: 32px;
    font-family: pixelated, monospace;

    color: white;
    outline: none;

    display: none;
}