*{
    margin: 0;
    scrollbar-width: none;
}

@keyframes colorLink {
    from {color: black;}
    to   {color: #588BA7;}
  }
a{
    
    font-family: "Montserrat", serif;
    font-style: normal;
    text-decoration: none;
    color: black;
}

a:hover{
    animation: .2s ease-out colorLink;
    text-decoration: un;
    color: #588BA7;
}

nav{
    margin: 0;
    border: 1px solid black;
    display: flex;
    justify-content: space-between;
    font-size: 1.2em;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

.navGauche{
    width: 80%;
    height: 85px;
    display: flex;
    align-items: center;
    column-gap: 50px;

}

.navGauche img{
    height: 85px;
    width: 80px;
    border-right: 1px solid black;
}

.lienNavigation{
margin: auto;
display: flex;
justify-content: space-between;
width: 100vh;

}

.lienNavigation a{
    margin: auto;
    display: flex;
}

.lienContact{
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        text-align: center;

}

.RS{
    border-left: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
    height: 85px;
    min-width: 85px;
    background-color: #588BA7;
    align-items: center;
    align-content: center;
}

.Contact{
    border-left: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
    height: 85px;
    min-width: 85px;
    background-color: #588BA7; 
    align-items: center;
    align-content: center;
}

.Folio{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid black;
}

.name{
    font-size: 10em;
    font-family: "Passion One", sans-serif;
    font-weight: 900;
    font-style: normal;
    
}

.job{
    font-size: 1.5em;
    padding: 30px;
    display: flex;
    flex-direction: column;
    font-family: "Passion One", sans-serif;
    font-weight: 900;
    font-style: normal;
    gap: 20px;
}

@keyframes slidein {
    from { left: -700px; }
    to   { left: 0px; }
  }

.upPart{
position: relative;
top:-130px;
left: -700px;
animation: 2s ease-out 1s slidein;
height: 900px;
z-index: 1;
}

footer{
    position: relative; 
    height: 200px;
    background-color: aquamarine;
    z-index: 5;
}

.headOfContent{
  
height: 700px;

}

@media (max-width: 1250px) {
    .name{
        font-size: 8em;

    }

    .Folio{
        flex-direction: column;
    }

    .job{
        flex-direction: row;
    }
    
}

@media (max-width: 785px) {
    .name{
        font-size: 6em;

    }

    .Folio{
        flex-direction: column;
    }

    .job{
        flex-direction: row;
    }
    
}

@media (max-width: 595px) {
    .name{
        font-size: 4em;

    }

    .Folio{
        flex-direction: column;
    }

    .job{
        flex-direction: row;
    }

    .upPart{
        top: -80px;
        height: 500px;

        }
    
}