/*  éléments réutilisables (boutons, cartes de projets, lecteurs vidéo). */

.main-container {
    width: 100%;
    max-width:100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
}
@media (min-width:768px) {
    .main-container {
        padding-left: var(--desktop-padding);
        padding-right: var(--desktop-padding);
    }
}

.btn {
    padding: var(--padding-btn);
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
}

/* ---------------- NAV BAR ----------------*/

header {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 9999;
    
}

#nav-bar #logo {
    height: 40px;
    margin: 10px;
    mix-blend-mode: difference;
}

#nav-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    mix-blend-mode: difference;
    height: 80px;

}

#nav-bar ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}

#nav-bar a {
    color: white;
    font-size: 1rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 200;
    text-decoration: none;
    text-transform: uppercase;
}

/* ---------------- FOOTER ----------------*/

.site-footer {
    padding-top: 150px;
}




/* ---------------- TITRE  ----------------*/

.section {
    padding-top: 140px;
}

h1 {
    color: white;
    font-size: 3rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;   
}
@media (min-width:768px) {
    h1 {
        font-size: 5rem;
    }
}

h2 {
    color: white;
    font-size: 3rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;   
}
@media (min-width:768px) {
    h2 {
        font-size: 5rem;
    }

}

/* ------------------------ GRIDS & flex-------------------------------- */

.flex-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.grid-x2 {
    display: grid;
    grid-template-columns: repeat( 1, 1fr );
}
@media (min-width:768px ) {
    .grid-x2 {
        grid-template-columns: repeat( 2, 1fr );
    }
}



/* --------------------------------- gradient ---------------------------------------- */

.black-gradient-2 {
    background: linear-gradient(to top, black 0, rgba(0, 0, 0, 0.199) 0.3, rgba(0, 0, 0, 0));
    width: 100%;
    height : 100%; 
    position: absolute;
    z-index: -2;
}