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

.flex{
    display: flex;
    flex-direction: column;
}

.fileira-roxa{
    display: flex;
    background-color: rgb(176, 109, 239);
    width: 100%;
    height: 20vh;
    gap: 5px;
    align-items: flex-end;
    justify-content: flex-end;
}

.circulos-roxos{
    border-radius: 50%;
    height: 5vw;
    width: 5vw;
    background-color: rgb(102, 0, 197);

}

.fileira-verde{
    display: flex;
    background-color: rgb(97, 221, 85);
    width: 100%;
    height: 20vh;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
}

.circulos-verdes{
    border-radius: 50%;
    height: 5vw;
    width: 5vw;
    background-color: rgb(2, 142, 0);
}

.fileira-vermelha{
    display: flex;
    background-color: rgb(248, 51, 51);
    width: 100%;
    height: 20vh;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.circulos-vermelhos{
    border-radius: 50%;
    height: 5vw;
    width: 5vw;
    background-color: rgb(170, 0, 0);
}

.fileira-amarela{
    display: flex;
    background-color: rgb(245, 250, 140);
    width: 100%;
    height: 20vh;
    gap: 25vw;
    align-items: center;
    justify-content: center;
}

.circulos-amarelos{
    border-radius: 50%;
    height: 5vw;
    width: 5vw;
    background-color: rgb(161, 179, 0);
}

.fileira-azul{
    display: flex;
    background-color: rgb(154, 208, 246);
    width: 100%;
    height: 20vh;
    gap: 15vw;
    align-items: center;
    justify-content: center;
}

.circulos-azuis{
    border-radius: 50%;
    height: 5vw;
    width: 5vw;
    background-color: rgb(61, 141, 233);
}