@font-face {
        font-family: "SAO UI";
        src: url(font/SAOUI-Regular.otf);
    }
    
    body {
        font-family: "SAO UI";
        display: block;
        background-image: url("images/Sword-Art-Online-Aincrad.jpeg");
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    header {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: auto;
        background-color: #251f1f;
    }
    
    header img {
        display: flex;
        height: auto;
        width: 40%;
    }
    .logos{
       width: 25%;
       height: auto;
       margin-left: 3%;
       margin-right: 2%;
    }
    /* LA bar de naviguation*/
    
    nav {
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        background-image: url("images/jauge_vie.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        text-align: center;
        color: black;
        height: auto;
    }
    /* bouton*/
    
    .en_haut {
        margin-left: 14%;
        margin-top: 4%;
    }
    
    .en_haut a {
        height: 60%;
        width: 100%;
        border-radius: 20%;
        border: 3px solid;
        font-size: 25px;
    }
    
    .en_bas {
        margin-top: 10%;
        margin-right: 4%;
        display: flex;
        align-items: center;
        gap: 20px;
    }
    
    .en_bas a {
        height: 60%;
        width: 100%;
        border-radius: 20%;
        border: 3px solid;
        font-size: 16px;
    }
    /* footer aceuil*/
    
    footer.accueil {
        display: flex;
        flex-direction: column;
        height: 500px;
        width: auto;
        background-image: url("images/fondfooter3.png");
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    fieldset {
        float: left;
        display: flex;
        flex-direction: column;
        font-size: 20px;
        color: rgb(116, 116, 248);
        border-radius: 15%;
        text-align: center;
    }
    /*footer autre page */
    
    footer.autrep {
        background-image: url("images/footertoutpage4.png");
        display: flex;
        flex-direction: column;
        width: auto;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .bfooter {
        flex-direction: row;
        height: 20%;
        width: 100%;
        font-size: 50px;
        margin-top: 20%;
        text-align: right;
        justify-content: space-around;
    }
    
    .accueil {
        flex-direction: column;
        height: 20%;
        width: 100%;
        font-size: 50px;
        text-align: left;
        justify-content: space-around;
    }
    
    a {
        text-decoration: none;
        color: black;
    }
    
    .formautre {
        float: right;
        display: flex;
        color: rgb(116, 116, 248);
        border-radius: 15%;
    }
    /* hover image*/
    
    .hover {
        transition: 0.2s;
    }
    
    .hover:hover {
        transform: scale(1.5);
    }
    /* Page d'accueil*/
    /* Les 3 image en dessous de la bar de naviguation*/
    
    div.dessousmenu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 5%;
        margin-top: 10%;
    }
    
    .dessousmenu img {
        height: auto;
        width: 25%;
        margin: 5%;
    }
    /* video*/
    
    div video {
        display: flex;
        margin-left: 30%;
        margin-right: 30%;
        margin-top: 5%;
        margin-bottom: 10%;
        height: 100%;
    }
    /* baniere*/
    
    .banniere {
        display: flex;
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 5%;
        height: 100%;
    }
    /* présentation*/
    
    .présentation {
        display: flex;
        font-size: 25px;
        height: 5%;
        width: auto;
        margin: 4%;
        color: #c7c5d1;
    }
    
    .présentation>img {
        height: auto;
        width: 100%;
        margin-right: 5%;
    }
    /* Page de l'auteur*/
    /* presentation auteur*/
    
    .Reki {
        display: flex;
        font-size: 25px;
        height: 5%;
        width: auto;
        color: #b3b4b4;
        margin: 5%;
        margin-bottom: 15%;
        background-color: #2e8fa0;
        border-radius: 3%;
    }
    
    .Reki>img {
        width: 35%;
        height: 100%;
        margin-left: 2%;
        margin-right: 5%;
        object-fit: cover;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    /* presentation light novel*/
    
    .lightnovel {
        display: flex;
        font-size: 25px;
        width: auto;
        color: #908f92;
        margin: 5%;
        background-color: #554385;
        border-radius: 3%;
    }
    
    .lightnovel>img {
        height: auto;
        width: 25%;
        margin-left: 2%;
        margin-right: 5%;
        object-fit: cover;
    }
    
    iframe {
        margin-left: 30%;
        margin-right: 30%;
        margin-bottom: 10%;
        margin-top: 10%;
    }
    /* Page concept art*/
    
    .artwork {
        display: flex;
        font-size: 25px;
        height: 5%;
        width: auto;
        margin: 5%;
    }
    
    .artwork>img {
        height: auto;
        width: 20%;
        height: 20%;
        margin-left: 2%;
        margin-right: 5%;
        object-fit: cover;
    }
    /* Page dérivé*/
    
    .autre {
        font-size: 25px;
        height: 5%;
        width: auto;
        margin: 5%;
        color: beige;
    }
    
    .autre>img {
        height: auto;
        width: 85%;
        height: 10%;
        margin-left: 2%;
        margin-right: 5%;
        object-fit: cover;
    }
    /* Page php*/

.reponse{
    display: flex;
    color: azure;
    font-size: 50px;
    background-color: #251f1f;
}