body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: rgb(82, 82, 82);
}

#bandeiras {
    position: absolute;
    top: 0;
    left: 5em;
    width: 100vw;
    height: 300vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
}

@keyframes vento {
    0%, 100% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(3deg);
    }
    75% {
        transform: rotateZ(-3deg);
    }
}

.band-japao {
    width: 12vw;
    height: 12vh;
    background-color: rgb(255, 255, 255);
    transform-origin: left center;
    animation: vento 2s ease-in-out infinite;
}

.band-japao:hover {
    animation: none;
    transform: scale(1.2);
}

.circulo {
    width: 100%;    
    height: 100%;
    clip-path: circle(20% at 50% 50%);
    background-color: red;
}

.band-brasil {
    width: 12vw;
    height: 12vh;
    background-color: green;
    transform-origin: left center;
    animation: vento 2s ease-in-out infinite;
}

.band-brasil:hover {
    animation: none;
    transform: scale(1.2);
}

.losango {
    width: 12vw;    
    height: 12vh;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background-color: yellow;
}

.circulo-brasil {
    width: 100%;    
    height: 100%;
    clip-path: circle(20% at 50% 50%);
    background-color: rgb(4, 0, 255);
}

.linha-brasil {
    width: 100%;    
    height: 100%;
    clip-path: polygon(100% 100%, 93% 100%, 0 0, 9% 0%);
    background-color: rgb(255, 255, 255);
}

.band-hor2l {
    transform-origin: left center;
    animation: vento 2s ease-in-out infinite;
}

.band-hor2l:hover {
    animation: none;
    transform: scale(1.2);
}

.band-hor2l div {
    width: 12vw;
    height: 6vh;
}

.band-horizontal {
    transform-origin: left center;
    animation: vento 2s ease-in-out infinite;
}

.band-horizontal:hover {
    animation: none;
    transform: scale(1.2);
}

.band-horizontal div {
    width: 12vw;
    height: 4vh;
}

.band-vertical {
    display: flex;
    flex-direction: row;
    transform-origin: left center;
    animation: vento 2s ease-in-out infinite;
}

.band-vertical:hover {
    animation: none;
    transform: scale(1.2);
}

.band-vertical div {
    width: 4vw;
    height: 12vh;
}

.info-bandeiras {
    
}

.vermelha {
    background-color: red;
}

.azul {
    background-color: blue;
}

.branca {
    background-color: white;
}

.preta {
    background-color: black;
}

.amarela {
    background-color: yellow;
}

.verde {
    background-color: green;
}