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

body{
    display: flex;
}
main{
    display: flex;
    flex-direction: column;
}
.roxo{
    background-color: #cfa2ff;
    display: flex;
    align-items: end;
    justify-content: right;
    width: 100vw;
    height: 20vh;
    gap: 10px;
}
.circulosRoxos{
    background-color:darkslateblue;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
}
.verde{
    background-color:darkseagreen;
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 10px;
    width: 100vw;
    height: 20vh;

}
.circulosVerde{
    background-color: olivedrab;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;

}
.rosa{
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100vw;
    height: 20vh;
}
.circulosRosa{
    background-color:hotpink ;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;

}
.amarelo{
    background-color: yellow;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: 20vh;
}
.circulosAmarelo{
    background-color: yellowgreen;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;

}

.azul{
    background-color:cornflowerblue;
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    width: 100vw;
    height: 20vh;
}
.circulosAzul{

    background-color: darkblue;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;

}