@media (min-width: 320px) {
    #circulo {
        height:300px;
        width:300px;
        box-shadow: 0 0 0 25px #2587A6, 0 0 0 50px #186E89;
    }
    
    .petal {
        width: 70px;
        height: 70px;
        transform: rotate(var(--angle)) translate(0, -110px) rotate(calc(-1 * var(--angle)));
    }

    .petal:hover {
        background-color: #FFF;
        transform: rotate(var(--angle)) translate(0, -110px) rotate(calc(-1 * var(--angle))) scale(1.2);
    }

    #circulo-central {
        height:125px; width:125px;
    }

    #logo-meio {
        max-width: 100px; max-height: 80px;
    }
}


@media (min-width: 375px) {
    #circulo {
        height:350px;
        width:350px;
        box-shadow: 0 0 0 50px #2587A6, 0 0 0 100px #186E89;
    }
    
    .petal {
        width: 70px;
        height: 70px;
        transform: rotate(var(--angle)) translate(0, -120px) rotate(calc(-1 * var(--angle)));
    }

    .petal:hover {
        background-color: #FFF;
        transform: rotate(var(--angle)) translate(0, -160px) rotate(calc(-1 * var(--angle))) scale(1.2);
    }

    #circulo-central {
        height:150px; width:150px;
    }

    #logo-meio {
        max-width: 140px; max-height: 80px;
    }
}


@media (min-width: 768px) {
    #circulo {
        height:450px; width:450px;
    }
    
    .petal {
        width: 100px;
        height: 100px;
        transform: rotate(var(--angle)) translate(0, -150px) rotate(calc(-1 * var(--angle)));
    }

    .petal:hover {
        background-color: #FFF;
        transform: rotate(var(--angle)) translate(0, -160px) rotate(calc(-1 * var(--angle))) scale(1.2);
    }

}

a {
            text-decoration: none;
            color: #FFF;
        }

        #corpo {
            height: 100vh; 
            background: linear-gradient(#043C4E 0%, #043C4E 50%, #186E89 50%, #186E89 100%);
        }
        /* Container das pétalas */
        .petal-container {
            width: 22%;
            height: 22%;
        }
    
        .petal {
            position: absolute;
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent; 
            border-radius: 50%;
            transition: transform 0.3s ease, background-color 0.3s ease;
            transform: rotate(var(--angle)) translate(0, -180px) rotate(calc(-1 * var(--angle)));
        }

        .petal:hover {
            background-color: #FFF;
            transform: rotate(var(--angle)) translate(0, -190px) rotate(calc(-1 * var(--angle))) scale(1.2);
        }

        .back:hover {
            background: url(imagens/ezgif-1-1f2a1c16165a-1550168557.gif);
        }

        #circulo {
            background-color: #D9E7EF;
            height:550px;
            width:550px;
            box-shadow: 0 0 0 50px #2587A6, 0 0 0 100px #186E89;
        }

        #circulo-central {
            background-color: #043C4E;
            height:180px;
            width:180px;
            cursor: pointer
        }

        #logo-meio {
            max-width: 150px; 
            max-height: 90px; 
            object-fit: contain;
        }

        @media (min-width: 320px) {
            #circulo {
                height:300px;
                width:300px;
                box-shadow: 0 0 0 25px #2587A6, 0 0 0 50px #186E89;
            }
            
            .petal {
                width: 70px;
                height: 70px;
                transform: rotate(var(--angle)) translate(0, -110px) rotate(calc(-1 * var(--angle)));
            }

            .petal:hover {
                background-color: #FFF;
                transform: rotate(var(--angle)) translate(0, -110px) rotate(calc(-1 * var(--angle))) scale(1.2);
            }

            #circulo-central {
                height:125px; width:125px;
            }

            #logo-meio {
                max-width: 100px; max-height: 80px;
            }
        }


    @media (min-width: 576px) {
        #circulo {
            height:350px;
            width:350px;
            box-shadow: 0 0 0 50px #2587A6, 0 0 0 100px #186E89;
        }
        
        .petal {
            width: 70px;
            height: 70px;
            transform: rotate(var(--angle)) translate(0, -120px) rotate(calc(-1 * var(--angle)));
        }

        .petal:hover {
            background-color: #FFF;
            transform: rotate(var(--angle)) translate(0, -160px) rotate(calc(-1 * var(--angle))) scale(1.2);
        }

        #circulo-central {
            height:150px; width:150px;
        }

        #logo-meio {
            max-width: 140px; max-height: 80px;
        }
    }


    @media (min-width: 768px) {
        #circulo {
            height:450px; width:450px;
        }
        
        .petal {
            width: 100px;
            height: 100px;
            transform: rotate(var(--angle)) translate(0, -150px) rotate(calc(-1 * var(--angle)));
        }

        .petal:hover {
            background-color: #FFF;
            transform: rotate(var(--angle)) translate(0, -160px) rotate(calc(-1 * var(--angle))) scale(1.2);
        }

    }