@font-face {
    font-family: 'Trajan Pro Regular';
    src: url('Trajan\ Pro\ Regular.ttf');
}


@media screen and (max-width: 576px){
    body{
        background: linear-gradient(#160575,#4b69e4);
        min-height: 100vh; 
        font-family: 'Trajan pro Regular' !important;
        margin: 0px;
    }
    
    
    footer{
        position: absolute;
        bottom: 0%;
        background-color: rgb(11, 10, 10);
        color: aliceblue;
        padding: 0vw;
        width: 100%;
        
    }
    
    ul{
        display: flex;
        justify-content: space-around;
    
    }
    
    ul li {
        list-style-type: none;
    }
    
    nav ul li a{
        color: #f6f0f0;
        text-decoration: none;
        padding : 6px;
    }
    
    p{
        color:#f6f0f0;
    }
    
    .h1{
        justify-self: center;
        color: #f6f0f0 !important;
    }

    .h2{
        color: #f6f0f0 !important;
    }

    .h6{
        color: aliceblue !important;
        margin: 5vw;
    }

    #fond_du_boutton{
        background: linear-gradient(rgb(99, 49, 238),rgb(86, 189, 244)) !important;
    }
    
    #fond_nav{
        background-image: url('../images/hollow-knight-banner.jpg');
        background-size: cover;
        background-position-x: right;
    }

    .nav-link{
        color: rgb(255, 255, 255) !important;
        background-color: #95d4e7;
        background-image: url('../images/feuillage.png');
        justify-self: flex-end !important;
        border-radius: 60px;
    }

    #hollow_cover{
        max-height: 30vh !important;
        border-radius: 10% !important;
        margin: 5vw !important;
    }
        
    #cover_div{
        display: flex !important;
        align-items: center !important;
    }
        
    #titre{
        display: flex !important;
        justify-self: center !important;
        font-size: larger !important;
    }
    
    .accordion-body{
        background-color: rgb(36, 75, 181) !important;
        border-radius: 10px;
    }
    
    .accordion-button{
        background-color: #4b69e4 !important;
    }
    #listing{
        display: flex !important;
        margin: 5% !important;
        flex-direction: column;
    }
    
    #img_boss img{
        max-height: 30vw !important;
        margin: 5vw !important;
    
        
    }
    
    #content_boss{
        background-color: #71b6c9 !important;
        border-radius: 20px !important;
        padding-left: 10vw;
        padding-right: 10vw;
    }


}

@media all and (min-width: 1024px) and (max-width: 1280px){}

body{
    background: linear-gradient(#160575,#4b69e4);
    min-height: 100vh; 
    font-family: 'Trajan pro Regular' !important;
    margin: 0px;
}


footer{
    position: relative;
    bottom: 0%;
    background-color: rgb(11, 10, 10);
    color: aliceblue;
    padding: 0vw;
    width: 100%;
    margin-top: 4vh;
    
}

nav{
    border-radius: 3px;
}

ul{
    display: flex;
    justify-content: space-around;

}

ul li {
    list-style-type: none;
}

nav ul li a{
    color: #f6f0f0;
    text-decoration: none;
    padding : 6px;
}

p{
    color:#f6f0f0;
}

.h1{
    justify-self: center;
    color: #f6f0f0 !important;
}

.h2{
    color: #f6f0f0 !important;
}

.h6{
    color: aliceblue !important;
    margin: 5vw;
}

#fond_du_boutton{
    background: linear-gradient(rgb(99, 49, 238),rgb(86, 189, 244)) !important;
}

#fond_nav{
    background-image: url('../images/hollow-knight-banner.jpg');
    background-size: cover;
    background-position-x: right;
    background-position-y: center;
}

.nav-link{
    color: rgb(255, 255, 255) !important;
    justify-self: flex-end !important;
    padding: 2vw !important;
}

.nav-item{
    padding: 0.2vw;
}

#hollow_cover{
    max-height: 20vh !important;
    border-radius: 10% !important;
    margin: 5vw !important;
}

#cover_div{
    display: flex !important;
    align-items: center !important;
    max-width: 50% !important;
    justify-self: center;
    margin-right: 3vw;
}

#titre{
    display: flex !important;
    justify-self: center !important;
    font-size: larger !important;
}

.accordion-body{
    background-color: rgb(36, 75, 181) !important;
    border-radius: 10px;
}

.accordion-button{
    background-color: #4b69e4 !important;
}

#listing{
    display: flex !important;
    margin: 5% !important;
    flex-direction: column;
}

#img_boss img{
    max-height: 30vw !important;
    margin: 5vw !important;

    
}

#content_boss{
    background-color: #71b6c9 !important;
    border-radius: 20px !important;
    padding-left: 10vw;
    padding-right: 10vw;
}


@media all and (orientation: portrait){}