@import url("main.css");

@media(max-width: 768px){
    #main {
        flex-direction: column;
        align-items: center; 
        max-width: 31.25em;
        margin: 0 auto;
    }

    h1.about-title {
        text-align: center;
        width: 100%; 
        margin-bottom: 4%;
        color: var(--accent-color);
    }

    .sottotitolo{
        text-align: center;
        color: var(--accent-color);
    }

    #main-div{
        display: flex;
        flex-direction: column;
        width: 100%;
    } 

    #main-div section {
        display: flex;
        flex-direction: column-reverse; 
        align-items: center; 
        margin: 5% 5%; 
        gap: 5%;
    }

    .section{
        opacity: 1; 
        transform: none; 
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .animate .section{
        opacity: 0;
        transform: translateY(30px);
    }
    
    .section.visible{
        opacity: 1;
        transform: translateY(0);
    }

    p.paragraph{
        font-size: 1.2em;
        margin-bottom: 8%;
        text-align: center;
    }
    p.paragraph strong{
        font-weight: normal;
    }

    .section-img {
        max-width: 80%; 
        height: auto; 
    }

}


@media(max-width: 520px){
    #main {
        flex-direction: column;
        align-items: center;
        max-width: 80%; 
        margin: 0 auto;
    }

    h1.about-title {
        font-size: 3.2em;
        text-align: center;
        width: 100%; 
        margin-bottom: 4%; 
        color: var(--accent-color);
    }

    .sottotitolo{
        font-size: 2em;
        text-align: center;
        color: var(--accent-color);
    } 

    #main-div{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #main-div section {
        display: flex;
        flex-direction: column-reverse; 
        align-items: center; 
        margin: 5% 5%; 
        gap: 5%;
    }

    .section{
        opacity: 1; 
        transform: none; 
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .animate .section{
        opacity: 0;
        transform: translateY(30px);
    }
    
    .section.visible{
        opacity: 1;
        transform: translateY(0);
    }

    p.paragraph{
        font-size: 1.2em;
        margin-bottom: 8%;
        text-align: center;
    }
    p.paragraph strong{
        font-weight: normal;
    }

    .section-img {
        width: 90%; 
        height: auto; 
    }

}