@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

*{
    font-family: Arial, Helvetica, sans-serif;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-image: linear-gradient(to right, #0080008f, rgba(0, 0, 255, 0.494));
}

h1{
    font-family: 'Indie Flower', Arial, Helvetica, sans-serif;
    text-align: center;

    margin-top: 40px;
    padding: 10px;
}

h3{
    text-align: center;
    margin-bottom: 10px;
}

div#opcao{
    max-width: 80px;
    margin: auto;
}

main{
    width: 250px;
    margin: auto;
    padding: 20px 10px 10px 10px;
    background-color: #ffffff;

    border-radius: 15px;
    box-shadow: 5px 5px 5px #0000005e;
}

#p-botao{
    display: flex;
}

.botao-jogar{
    padding: 5px 10px;
    margin: 20px auto 10px auto;

    border-radius: 5px;
    border: 1px solid gray;
    box-shadow: 5px 5px 5px #0000003e;
}

.botao-jogar:hover{
    background-color: #0080007d;
}

.botao-jogar:active{
    background-color: hsl(120, 100%, 25%);
}

div#resposta{
    text-align: center;

    width: 200px;
    margin: 10px auto;
}

hr{
    margin: 10px;
}

#vermelho{
    color: red;
}

#verde{
    color: green;
}

#laranja{
    color: orange;
}
#verde, #vermelho, #laranja{
    margin-top: 10px;
}

footer{
    color: white;
    text-align: center;
    font-style: italic;
    margin-top: 10px;
}

a{
    color: #ffffff;
    text-decoration: none;
}

a:hover{
    color: yellow;
    text-decoration: underline;
}

a:active{
    color: red;
}