/* RESET CSS */

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


.roxo{
    background-color: rgb(240, 229, 255);
    justify-content: right;
    display: flex;
    height: 20vh;
    align-items: flex-end;
    gap: 10px;
    width: auto;

}

.bolinhasroxas{
    background-color: rgb(158, 148, 189);
    border-radius: 50%;
    width: 10vh;
    height: 10vh;
    
}

.verde{
    background-color: rgb(201, 232, 154);
    display: flex;
    height: 20vh;
    justify-content:right;
    align-items: center;
    gap: 10px;
    width: auto;
}

.bolinhasverdes{
    background-color: rgb(84, 152, 84);
     border-radius: 50%;
     width: 10vh;
     height: 10vh;  

}

.vermelho{
    background-color: rgb(237, 214, 214);
    display: flex;
    height: 20vh;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: auto;

}

.bolinhasvermelhas{
    background-color: rgb(185, 92, 92);
     border-radius: 50%;
     width: 10vh;
     height: 10vh;  

}

.amarelo{
    background-color: rgb(250, 251, 206);
    display: flex;
    height: 20vh;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: auto;

}

.bolinhasamarelas{
     background-color: rgb(197, 199, 79);
     border-radius: 50%;
     width: 10vh;
     height: 10vh; 
}

.azul{
    background-color: rgb(213, 233, 254);
    display: flex;
    height: 20vh;
    justify-content: space-around;
    align-items: center;
    gap: 5px;
    width: auto;

}

.bolinhasazuis{
    background-color: rgb(123, 160, 205);
     border-radius: 50%;
     width: 10vh;
     height: 10vh; 

}