:root{
    --color-bg: #fafafa;
    --color-text: black;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100dvh;
    gap: 20px;
    background-color: var(--color-bg);
}

h1{
    color: var(--color-text);
    text-decoration: underline;
}


#cor-usuario{
    text-align: center;
    width: 20%;
    height: 5%;
    border: 2px black solid;
}


#btnTrocar{
    width: 10%;
    border: 2px black solid;
    height: 5%;
}

#btnRandom{
    text-align: center;
    width: 10%;
    height: 5%;
    border: 2px black solid;
}


#botao-beige{
    background-color: beige;
    width: 150px;
    border: 2px black solid;
    height: 5dvh;
}

#botao-amarelo{
    background-color: yellow;
    width: 150px;
    border: 2px black solid;
    height: 5dvh;
}

#botao-aqua{
    background-color: aqua;
    width: 150px;
    border: 2px black solid;
    height: 5dvh;
}

#botao-vermelho{
    background-color: red;
    width: 150px;
    border: 2px black solid;
    height: 5dvh;
}
#botao-verde{
    background-color: green;
    width: 150px;
    border: 2px black solid;
    height: 5dvh;
}
#botao-roxo{
    background-color: purple;
    width: 150px;
    border: 2px black solid;
    height: 5dvh;
}

#botao-rosa{
    background-color: pink;
    width: 150px;
    border: 2px black solid;
    height: 5dvh;
}

#botao-cinza{
    background-color: gray;
    width: 150px;
    border: 2px black solid;
    height: 5dvh;
}

#botao-azul{
    background-color: blue;
    width: 150px;
    border: 2px black solid;
    height: 5dvh;
}


.container_botao{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}