*{

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

}


.roxo{
width: 100vw;
    height: 200px;
    background-color: plum;
    display: flex;
justify-content: right;
align-items: flex-end;
gap: 9px;

}

.roxo div{
    width: 100px;
    height: 100px;
    background-color: rgb(111, 22, 166);
    border-radius: 50%;
}

.verde{
width: 100vw;
    height: 200px;
    background-color: rgb(109, 212, 144);
    display: flex;
justify-content: right;
align-items: center;
gap: 9px;

}

.verde div{
    width: 100px;
    height: 100px;
    background-color: rgb(12, 104, 69);
    border-radius: 50%;
}

.vermelho{
width: 100vw;
    height: 200px;
    background-color: rgb(215, 74, 74);
    display: flex;
justify-content: center;
align-items: center;
gap: 9px;
}

.vermelho div{
    width: 100px;
    height: 100px;
    background-color: rgb(127, 5, 7);
    border-radius: 50%;
}

.amarelo{
width: 100vw;
    height: 200px;
    background-color: rgb(224, 224, 93);
    display: flex;
justify-content: space-between;
align-items: center;
gap: 9px;

}

.amarelo div{
    width: 100px;
    height: 100px;
    background-color: rgb(149, 166, 22);
    border-radius: 50%;
}

.azul{
width: 100vw;
    height: 200px;
    background-color: rgb(93, 115, 224);
    display: flex;
justify-content: center;
align-items: center;
gap: 250px;

}

.azul div{
    width: 100px;
    height: 100px;
    background-color: rgb(53, 22, 166);
    border-radius: 50%;
}