body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to bottom right, #f0f9f0, #d0f0d0);
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    overflow-x: hidden;
}

.logo {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    grid-gap: 10px;
}

.square, .circle {
    width: 60px;
    height: 60px;
    opacity: 0;
    transform: scale(0.5);
    animation: appear 0.4s forwards;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Blocos verdes */
.square {
    background-color: #3A9A35;
    border-radius: 10px;
    animation: appear 0.4s forwards, glow 2s 1s infinite alternate;
}

/* Círculo vermelho */
.circle {
    border-radius: 50%;
    background-color: #c00;
    animation: appear 0s forwards, pulse 2s 1s infinite ease-in-out;
}

/* Vazio */
.empty {
    width: 60px;
    height: 60px;
}

/* Delays para a sequência */
.delay-1 {
    animation-delay: 0.1s, 1s;
}

.delay-2 {
    animation-delay: 0.2s, 1.1s;
}

.delay-3 {
    animation-delay: 0.3s, 1.2s;
}

.delay-4 {
    animation-delay: 0.4s, 1.3s;
}

.delay-5 {
    animation-delay: 0.5s, 1.4s;
}

.delay-6 {
    animation-delay: 0.6s, 1.5s;
}

.delay-7 {
    animation-delay: 0.7s, 1.6s;
}

.delay-8 {
    animation-delay: 0.8s, 1.7s;
}

.delay-9 {
    animation-delay: 0.9s, 1.8s;
}

/* Aparecer com escala */
@keyframes appear {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Brilho pulsante dos blocos verdes */
@keyframes glow {
    from {
        box-shadow: 0 0 5px #3A9A35;
    }

    to {
        box-shadow: 0 0 15px #3A9A35, 0 0 30px #3A9A35;
    }
}

/* Pulso no círculo vermelho */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

img {
    justify-content: left;
    align-items: left;
}

/* Imagem de cima */
img {
    position: fixed;
    top: -100px;
    left: 20px;
    width: 80px;
    animation: dropDown 1s ease-out forwards;
    z-index: 999;
}

/* Animação descendo */
@keyframes dropDown {
    to {
        top: 0px;
    }
}