:root{
    --inti-green:#008271;
    --inti-white:#F2F2F2;
    --padding-row-responsive:100px;
}

*{
    padding:0;
    margin:0;
    scroll-behavior: smooth;
}

body{
    background-color:var(--inti-white);
}

a{
    position:relative;
    bottom:0;
    transition:bottom 0.3s;
}

a:hover{
    bottom:3px;
}

section{
    padding-inline:var(--padding-row-responsive);
    padding-block:150px;
    width:calc(100% - (var(--padding-row-responsive) * 2));
    background-color:var(--inti-white);
}

#top{
    position:absolute;
    top:0;
}

#content{
    background-color:var(--inti-white);
}

@font-face {
    font-family: "circe";
    src: url("./assets/fonts/CRC25.OTF");
    font-weight:100;
}

@font-face {
    font-family: "circe";
    src: url("./assets/fonts/CRC25.OTF");
    font-weight:200;
}

@font-face {
    font-family: "circe";
    src: url("./assets/fonts/CRC55.OTF");
    font-weight:300;
}

@font-face {
    font-family: "circe";
    src: url("./assets/fonts/CRC65.OTF");
    font-weight:400;
}

h1{
    font-size:48px;
}

h2{
    font-size:40px;
}

h3{
    font-size:36px;
}

h4{
    font-size:32px;
}

h5{
    font-size:28px;
}

h6{
    font-size:24px;
}

h1,h2,h3,h4,h5,h6,a{
    color:#008271;
    font-family:"circe";
}

/**HEADER**/

#header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 20px;
    position:fixed;
    background-color:var(--inti-white);
    width:calc(100% - 40px);
    z-index:100;
    top:0;
}

#header img{
    width:100px;
}

#header div.links{
    display:flex;
    gap:20px;
}

#header div.links a{
    font-size:16px;
    text-decoration: none;
}

#burger-menu{
    display:none;
}

div.row{
    flex-wrap:wrap;
}

/**WELCOME PART**/

#welcome-part{
    background-image:url("./assets/img/Image-top-inti-ateliers-de-fabrication.png");
    background-size:150%;
    background-position: top;
    padding-block:200px 100px;
    backdrop-filter:blur(10px);
    position:fixed;
    top:0;
    z-index:-100;
}

#welcome-part h1, #welcome-part a{
    text-align:center;
    color:var(--inti-white);
    font-weight:300;
    line-height:2rem !important;
}

#welcome-part span{
    font-size:24px;
}

#welcome-part a{
    font-weight:400;
}

/**NOTRE ASSOCIATION**/

#notre-association-part{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    position:relative;
    bottom:25px;
    background-color:var(--inti-white);
    margin-top:400px;
    background-image:url("./assets/img/soleil-inti-1.png");
    background-position:center left;
    background-repeat:no-repeat;
    background-size:20%;
}

#notre-association-part h2{
    text-align: center;
    margin-bottom:50px;
}

#notre-association-part p{
    font-family:"circe";
    color:var(--inti-green);
    font-weight:300;
    width:40%;
}

#notre-association-part div.row{
    display:flex;
    justify-content:center;
    align-items:top;
}

#notre-association-part div.row img{
    width:600px;
    border-radius:15px;
    box-shadow:0 0 10px rgba(0,0,0,0.2);
}

#notre-association-part div.row p{
    padding:20px;
    font-size:18px;
    text-align:justify;
}

/**NOS MISSIONS**/

.separateur{
    width:100%;
    position:relative;
    top:6px;
}

#nos-missions-part{
    background-color:var(--inti-green);
    background-image:url("./assets/img/soleil-inti-2.png");
    background-position:120% 125%;
    background-repeat:no-repeat;
    background-size:35%;
}

#nos-missions-part h2, #nos-missions-part p{
    color:var(--inti-white);
}

#nos-missions-part h2{
    text-align:center;
    margin-bottom:50px;
}

#nos-missions-part div.row{
    display:flex;
    justify-content:center;
    align-items: top;
}

#nos-missions-part div.row img{
    width:600px;
}

#nos-missions-part div.row p{
    font-size:18px;
    font-family:"circe";
    font-weight:300;
    text-align:justify;
    padding:20px;
    width:40%;
}

/**ATELIERS DE FABRICATIONS**/
#ateliers-fabrication-part h2, #ateliers-fabrication-part p{
    font-family:"circe";
}

#ateliers-fabrication-part h2{
    text-align:center;
    margin-bottom:50px;
}

#ateliers-fabrication-part p{
    color:var(--inti-white);
    font-weight:300;
    text-align:justify;
}

div.column{
    display:flex;
    flex-direction:column;
    gap:40px;
    padding:40px;
    border-radius:20px;
    background-color:var(--inti-green);
}

#ateliers-fabrication-part div.column img{
    width:100%;
}

/**FOOTER**/

#footer{
    background-color:var(--inti-green);
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}

#footer a.no-style{
    text-decoration: none;
}

#footer img{
    max-width:200px;
}

#footer h2{
    font-size:24px;
}

#footer a, #footer h2, #footer p{
    font-family:"circe";
    color:white;
}


#footer div.column-footer{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
}


#footer h2, #footer a,#footer p{
    text-align:center;
}

#footer a,#footer p{
    font-weight:300;
    font-size:16px;
    text-align:center;
}

#social-medias{
    display:flex;
    justify-content: center;
    gap:10px;
    max-width:300px;
}

#social-medias a{
    width:15%;
}

#social-medias a img{
    width:100%;
}

@media (max-width:1024px){
    #footer{
        flex-direction:column;
        align-items: center;
        gap:100px;
    }

    :root{
        --padding-row-responsive:50px;
    }

    #notre-association-part p, #nos-missions-part div.row p{
        width:100%;
    }

    #social-medias{
        align-self: center;
    }
}

@media (max-width:768px) {

    /**HEADER**/

    :root{
        --padding-row-responsive:10px;
    }

    #header div.links{
        display:none;
    }

    #header.active div.links{
        display:flex;
        flex-direction:column;
        align-items: center;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        margin-top:70px;
        background-color:var(--inti-white);
        padding-block:20px;
        animation-name:inti-burger-menu;
        animation-duration:0.5s;
        transform-origin: top;
    }

    #burger-menu{
        display:inline-block;
    }

    #burger-menu::after{
        content:"\2630";
        font-size:36px;
        color:var(--inti-green);
    }

    #header.active #burger-menu::after{
        content:"\2715";
    }

    @keyframes inti-burger-menu{
        from{
            transform:scaleY(0);
            opacity:0;
        }
        to{
            transform:scaleY(1);
            opacity:1;
        }
    }


    /**WELCOME PART**/
    #welcome-part{
        padding-top:150px;
        background-size:200%;
    }

    #welcome-part p, #welcome-part a, #welcome-part span{
        font-size:18px;
        line-height:15px;
    } 

    #welcome-part h1{
        font-size:36px;
    }

    #notre-association-part{
        margin-top:350px;
    }

    #notre-association-part div.row img, #nos-missions-part div.row img{
        width:80%;
    }

    #welcome-part{
        background-size:400%;
    }
}