@font-face {
    font-family: "Thin";
    src: url("assets/Typo//EncodeSans-Thin.ttf");
    font-weight: "thin";
}
@font-face {
    font-family: "Light";
    src: url("assets/Typo//EncodeSans-Light.ttf");
    font-weight: "light";
}
@font-face {
    font-family: "Regular";
    src: url("assets/Typo//EncodeSans-Regular.ttf");
    font-style: normal;
}
@font-face {
    font-family: "SemiBold";
    src: url("assets/Typo//EncodeSans-SemiBold.ttf");
    font-style: "Semibold";
}
@font-face {
    font-family: "Bold";
    src: url("assets/Typo//EncodeSans-Bold.ttf");
    font-style: bold;
}
@font-face {
    font-family: "CondensedBlack";
    src: url("assets/Typo//EncodeSans_Condensed-Black.ttf");
    font-style: "Condensedblack";
}
@font-face {
    font-family: "Black";
    src: url("assets/Typo//EncodeSans-Black.ttf");
    font-style: "black";
}
@font-face {
    font-family: "ExtendedBlack";
    src: url("assets/Typo//EncodeSans_Expanded-Black.ttf");
    font-style: "Extendedblack";
}


@media all and (min-width:900px) {
    a:link{
        color: #eae9ec;
        text-decoration: none;
    }
    *{
        margin: 0px;
    }
    body,html {
        margin: 0;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        margin: 0vw;
        width: calc(100%);
        height: calc(100%);                            
        font-family: "Regular", normal;
        background-color: #22372b;
        scrollbar-color: #eae9ec #3a5747;
        
    }
    #couv {
        width: 100vw;
        height: 100vh;
        background-color: transparent;
        z-index: 5;
        position: fixed;
        display: none;
    }

    #contenantProjets {
        margin-left: 18vw;
        margin-top: 95vh;
        margin-bottom: 0vh;
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        z-index: 1;
        background-color: #eae9ec;
    }

    .projets {
        width: 19vw;
        margin: 0.5vw;
        height: auto;
        cursor: pointer;
    }

    .Titres {
        z-index: 7;
        position: fixed;
        display: grid;
        grid-gap: 5vh;
        text-decoration: none;
        margin-left: 3vw;
        margin-top: 3vh;
        font-family: "ExtendedBlack"; 
        font-size: 4vh;
        cursor: pointer;
        color: #7eb394;
}
        .Titres > div {
        background: linear-gradient(0.25turn, #4a3c5b, #7eb394) no-repeat left bottom / 0 100%;
        transition: background-size .5s;
}
        .Titres > div:hover{
        background-size: 100% 100%;
        color: #eae9ec;
}
      #menu_div {
        width:0vw;
        height: 80vh;
        background: linear-gradient(0.60turn, #4a3c5b, #a280ab);
        z-index: 6;
        overflow: auto;
        position: fixed;
        transition: 1s;
        margin-top: 10vh;
        margin-left: 17vw;
        overflow-x: hidden;
        scrollbar-color: #4a3c5b #3a5747;
        scrollbar-width: thin;
        
    }

    .chapitres {
        position: relative;
        font-size: 3vh;
        width: auto;
        margin-top: 3vh;
        margin-bottom: 3vh;
        left: 2vw;
        transition: 1s;
        cursor: pointer;
        color: #eae9ec;
        font-family: "Regular";
        
    }
    #menu_pres{
        height:0vh;
        width: 56vw;
        background-color: #4a3c5b;
        z-index: 6;
        display: grid;
        grid-template-columns: repeat(3, 30%);
        overflow: auto;
        position: fixed;
        transition: 1s;
        margin-top: 38vh;
        margin-left: 40vw;
        overflow-x: hidden;
        scrollbar-color: #4a3c5b #3a5747;
        scrollbar-width: thin;
    }
    #Pres{
        position: relative;
        grid-column: 2/5;
        font-size: 2.5vh;
        width: auto;
        margin-top: 3vh;
        margin-bottom: 3vh;
        margin-right: 3vw;
        left: 2vw;
        transition: 1s;
        color: #eae9ec;
        font-family: "Light";
        line-height: 1.5;
    }
    #Photo{
        position: relative;
        margin-left: 0;
        margin-top: 0;
        grid-column: 1/2;
}
    #Profil{
        width: 18vw;
        height: auto;    
}
    #menu_contact {
        width:0vw;
        height: 25vh;
        background: linear-gradient(0.25turn, #4a3c5b, #7eb394);
        z-index: 6;
        overflow: auto;
        position: fixed;
        transition: 1s;
        margin-top: 10vh;
        margin-left: 40vw;
        scrollbar-color: #4a3c5b #3a5747;
        scrollbar-width: thin;
    }

     #Contacts {
        position: relative;
        font-size: 3vh;
        line-height: 2;
        width: auto;
        margin-top: 4vh;
        margin-bottom: 3vh;
        margin-right: 2vw;
        left: 2vw;
        transition: 1s;
        font-family: "Regular";
        color: #eae9ec;
        vertical-align: middle;
    }
#insta {
    cursor: pointer;
}
#Linkedin {
    cursor: pointer;
}
#header { 
    z-index: 1;
    width: 80vw; 
    height: 95vh;
    position: absolute;
    display: grid;
    margin-top: 0;
    margin-left: 18vw;
    background-color: #eae9ec;
    justify-items: center;
    
}
  #Ambiance{
    width: 80vw;
    height: auto;
    position: absolute;
    display: contents;
              
}
 #AmbianceImg{
    width: 80vw;
    height: auto;
    filter: grayscale(0%);
              
}

#Titre {
    z-index: 9;
    position: absolute;
    text-align: center;
    margin-top: 73vh;
    width: 60vw;
    background-size: 80vw;
    background-position: center;
    background-clip: text;
    font-size: 1em;
    color: #5a496e;
    background-color: #eae9ec;
}
H1 {
    font-family: "SemiBold";
}
H2 {
    font-family: "Thin";
}

footer {
    z-index: 2;
    margin-top: 0vh;
    margin-bottom: 0vh;
    margin-left: 18vw;
    display: grid;
    grid-row: 2/5;
    font-size: 0.8em;
    color: #22372b;
    text-align: center;
    height: 13vh;
    background-color: #eae9ec;
    align-items: center;
        
}
}

/* mettre en place le carroussel
div#slider { 
    z-index: 3;
    width: auto; 
    height: 70vh;
    position: absolute;
    margin-top: 0;
    margin-left: 18vw;
    overflow: hidden;
    background-color: #4a3c5b;
    }
  
div#slider figure img { 
    width: 20%; 
    height: auto; 
    float: left; 
    }
  
/*animer le carroussel
    
@keyframes slidy {
    0% { left: 0%; }
    10% { left: 0%; }
    20% { left: -100%; }
    30% { left: -100%; }
    40% { left: -200%; }
    50% { left: -200%; }
    60% { left: -300%; }
    70% { left: -300%; }
    80% { left: -400%; }
    90% { left: -400%; }        
    100% { right: 400%; }
}
    div#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    margin-top: 0vh;
    padding: 0;
    font-size: 0;
    left: 0;
    text-align: left;
    animation: 30s slidy infinite;    
}
*/