header{

    position: fixed;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;

    width: 100%;
    height: 80px;

    background-color: rgb(70, 70, 255);

    font-family:  fantasy;
    font-weight: 650;

    top: 0;

}

#logo{

    position: absolute;

    width: 80px;
    height: 60px;

    top: 15%;
    left: 25%;

    transition: width 1s;
}

#nav{

    position: relative;

    top: 20%;
    left: 45%;

    width: 30%;
    height: 40%;

    list-style: none;
    text-decoration: none;

}

#nav li{
    display: inline;
    position: relative;
    
    color: rgb(255, 255, 255);
    margin-right: 20px;

    text-transform: uppercase;
}

#nav a::after{
    content: "";

    position: absolute;
    top: 100%;
    left: 0;

    height: 2px;
    width:0;

    background:salmon;

    transition: width 1s;
}


#nav a:hover:after{
    width: 100%;
}

/* Pas de décoration de lien :*/

a{
    text-decoration: none;
    color: unset;
}

/*Le paragraphe qui dit des trucs*/

p{
    
    position: relative;

    height: 30px auto;

    padding: 10px;

    text-align: center;

    color: rgb(255, 255, 255);
    background-color: rgba(47, 59, 164, 0.355);


    top: 15px;

    
}

/* ------------------------------------------------------------------------------------------------------------------------- */


body{

    position: relative;

    width: 100%;
    height: 90%;

    font-family: fantasy;

    color: white;

    background-color: midnightblue;

    top: 50px;
}

/* Dessins svg ! */

#vague{

    position : relative;

    bottom: -5px;

}

/* v Etoiles */
#e1{

    position: absolute;

    width: 5px;
    height: 5px;

    left: 3%;
}

#e2{

    position: absolute;

    width: 5px;
    height: 5px;

    right: 5%;
    top: 330px;
}

#e3{

    position: absolute;

    width: 5px;
    height: 5px;

    top: 200px;
    right: 10%;
}

#e4{

    position: absolute;

    width: 5px;
    height: 5px;

    left: 40%;
    top: 300px;
}

#e5{

    position: absolute;

    width: 5px;
    height: 5px;

    top: 350px;
    left: 10%;
}
/* ^ Fin des étoiles */



/* ------------------------------------------------------------------------------------------------------------------------- */



#premier, #debut{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    /* temporaire : */
    background-color: #4d4ac3;

}

#second{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    /* temporaire : */
    background-color: #002e6b;
}

#debut{

    width: 100%;
    height: 500px;

}

#furet{

    position: relative;

    top: 30%;
    left: 20%;

    height: 170px;
    width: 160px;
}


/* ------------------------------------------------------------------------------------------------------------------------- */



h1{

    position: absolute;
    display: inline-block;

    text-align: center;

    height: 50px;
    width: 550px;

    font-size: 70px;

    top: 100px;
    right: 20%;
}

section{

    position: relative;

    display: flex;

    width: 100%;
    height: 450px;
    
}

h2{

    position: absolute;

    font-size: 35px;
}

#titre1{
    top: 40%;
    left: 10%;
}

#titre2{
    top: 40%;
    right: 20%;
}

/* ------------------------------------------------------------------------------------------------------------------------- */


#vignette_projets{

    position: absolute;

    object-fit: cover;

    top: 25%;
    right: 10%;
    
    width: 400px;
    height: 230px;

    box-shadow: midnightblue 10px 10px 5px;
}

#vignette_cours{

    position: absolute;

    object-fit: fill;

    top: 25%;
    left: 10%;
    
    width: 250px;
    height: 230px;

    box-shadow: midnightblue 10px 10px 5px;

}

/* ------------------------------------------------------------------------------------------------------------------------- */


#premier a{

    position: absolute;
    display: flex;
    flex-wrap: nowrap;

    right: 11%;
    bottom: 13%;

    background-color: transparent;

    font-size: 18px;
}

#premier a::after{
    content: "";

    position: absolute;
    top: 100%;
    left: 0;

    height: 2px;
    width:0;

    background:white;

    transition: width 1s;
}

#premier a:hover:after{
    width: 100%;
}

#second a{

    position: absolute;
    display: flex;
    flex-wrap: nowrap;

    left: 11%;
    bottom: 13%;

    background-color: transparent;

    font-size: 18px;
}

#second a::after{
    content: "";

    position: absolute;
    top: 100%;
    right: 0;

    height: 2px;
    width:0;

    background:white;

    transition: width 1s;
}

#second a:hover:after{
    width: 100%;
}


/* ------------------------------------------------------------------------------------------------------------------------- */



/* footer */

#bouton_accueil{

    position: relative;
    display: inline-block;

    height: 50px;
    width: 60px;

    top: -20px;
    left: 32%;
}

.liens_footer{

    position: relative;

    display: inline-block;
    align-items: center;

    height: 100px;
    width: 150px;

    
    left: 32%;

    letter-spacing: 1px;
    line-height: 30px;

    list-style: none;
}

.liens_footer li:hover{
    color: skyblue;
}