/**
 * BACKGROUND DE LA PAGE
 * CENTRÉ ET EN COVER (COUVERTURE DE L'ENSEMBLE DE L'ESPACE)
 */
body {
    background-image: url("assets/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100% !important;
}

.fa-gamepad {
    
    font-size: 3em;

}

#bestscores {

    z-index: 100000 !important;
}
/**
 * CHANGEMENT DE L'OPACITÉ DE LA COULEUR DE FOND DE LA BARRE DE NAVIGATION
 */
.navbar {
    background-color: rgba(68, 16, 65, 0.6) !important;
}

/**
 * HAUTEUR À 100% POUR LE CONTAINER PRINCIPAL ET LE DOCUMENT HTML
 * DÉSACTIVATION DES BARRES DE SCROLL
 */
html, .height-100 {
    height: 100% !important;
    overflow: hidden;
    
}

/**
 * LIEN DU BAS DE PAGE
 */
a.white-link, a.white-link:visited {
    color: black;
}
a.white-link:hover {
    color: black;
}
a.white-link:active {
    color: rgba(68, 16, 65, 0.6) !important;
}

/**
 * CAROUSEL
 */
.questionCarousel {
    width: 100%;
    height: 300px;
    margin: auto 50 auto 50;
}

.question-card {
    text-align: center;
}

.texte-question {
    color: black;
    
    font-size: 2em;
}

.answer {
    display: block;
    width: 90%;
    margin: 10px auto;
    padding: 10px;

    background-color: rgba(68, 16, 65, 0.6) !important;
    border-color: rgb( 68, 16, 65 );
}

h1 {
    font-size: 3em;
    color: black !important;
    font-weight: bold;

}

h2 {
    font-size: 1.5em;
    color: black !important;
    font-weight: bold;
    
    
}
h3 {
    font-size: 1em;
    color: black !important;
    font-weight: bold;
}
h4 {
    font-size: 3em;
    color: black !important;
    font-weight: bold;
    
}

h5 {
    font-size: 1.2em;
    color: black !important;
    font-weight: bold;
    
}

.btn-dark {

    color: #fff;
    background-color: #9b989c;
    border-color: #343a40;

}


/* ADDING THE RAIN */
.rain{
    height: 100vh; 
    background: url("assets/rain.jpg");
    animation: rain .4s linear infinite; 
    opacity: 0.6;
}
/* ANIMATION THE RAIN*/
@keyframes rain{
    0%{
        background-position: 0% 0%;
    }
    100%{
        background-position: 10% 100%;
    }
}
/* ADDING THE FLASH LIGHT */
.rain:before{
    content:"";
    height: 100; 
    width: 100;
    background: red; 
    opacity: 10; 
    animation: light .6s linear infinite; 
    position: absloute; 
}
/*ANIMATING THE FLASH LIGHT */
@keyframes light{
    0%{
        opacity: 0; 
    }
    5%{
        opacity: 0; 
    }
    10%{
        opacity: 0; 
    }
    20%{
        opacity: 2; 
    }
    25%{
        opacity: 0; 
    }
    30%{
        opacity: 0; 
    }
    40%{
        opacity: 2; 
    }
    45%{
        opacity: 0; 
    }
    50%{
        opacity: 0; 
    }
    60%{
        opacity: 0; 
    }
    75%{
        opacity: 0; 
    }
    90%{
        opacity: 2; 
    }
    100%{
        opacity: 0; 
    }
}