@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* 

Cores escolhidas no site ColoHunt
https://colorhunt.co/

Roxo escuro: #363062
Roxo claro: #4D4C7D
Laranja: #F99417
Branco: #F5F5F5

 */

:root{
    --font-family:'Ubuntu', sans-serif;
    --bg-color: #363062;
    --primary-color: #F5F5F5;
    --secondary-color:#F99417;
    --aux-color: #4D4C7D;
}

body{
    background-color: var(--bg-color);
    color: var(--primary-color);
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    font-family: var(--font-family);
    transition: 2s;
    padding: 10px
    
}
p.footer{
    position: absolute;
    bottom: 1.5rem;
    font-size: 1rem;
    color: var(--aux-color);
    
    
}

a{
    color: var(--aux-color);
    text-decoration: none;
}
a:hover{
    color: var(--secondary-color);
}


h1{
    font-size: 4rem;
    text-shadow: 3px 3px 5px var(--aux-color);
}
h2{
    font-size: 4rem;
}
h3{
    font-size: 2rem;
    margin-top: 20px;
}

.mensagem{
    font-size: 1.5rem;
    margin-top: 40px;
}
.box{
    border: 5px solid var(--aux-color);
    display: inline-block;
    font-size: 8rem;
    padding: 10px;
    margin: 20px;
    color: var(--secondary-color);
}
i {
    color: var(--secondary-color);
    
}

.btn-jogar{
    padding: 30px 40px;
    border: 0;
    background-color: var(--aux-color);
    border-radius: 10px;
    margin-top: 40px;
    font-size: 1.5rem;
    transition: 0.50s;
    color: var(--primary-color);
    text-transform: uppercase;
}
.btn-jogar:hover{
    box-shadow: 0px 0px 40px var(--primary-color);
    transition: 0.50s;
    cursor: pointer;
}

.game-over{
    color: var(--primary-color);
    font-family: 'Press Start 2P', sans-serif;
    font-size: 6rem;
}

@media (max-width: 600px){
    h1,h2{
        font-size: 3rem;
    }
    h3{
        font-size: 1.5rem;
    }
    .mensagem{
        font-size: 1.1rem;
    }
    .box{
        font-size: 4rem;
    }
    .game-over{
        font-size: 3rem;
    }
    .btn-jogar{
        font-size: 1rem;
    }
}