@font-face{
    font-family: "Header" ;
    src: url('../assets/font/Auliare.otf');
}

* {
 margin: 0%;
 padding: 0%;
 box-sizing: border-box;
}

    
    /*Haut de page = HEADER*/
    header {
        font-family: 'Times New Roman';
        position: fixed;
        background-color: #DC052D;
        color: #fff; 
        width: 100vw; 
        height: 20vh; 
        display: flex; 
        align-items: center;
        font-size: 10px; 
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 10;
        padding: 20px; 
    }


    /*Header - Logo du Bayern*/
    .logo {
        display: flex; 
        align-items: center;
    }


    /*Header - Logo du Bayern*/
    .logo img {
        width: 5vw;
        margin-bottom: 1vw;    
    }

  
    /*Header - Les 5 étoiles du Bayern*/
    .stars img {
        width: 12vw;
        align-items: start;
        margin-bottom: 1vh;
        margin-left: 1vw; 
    }

  

    /*Header - Texte au milieu du header pour expliquer et comprendre facilement la page*/
    .contenu{
        font-size: 1.75vw; 
        align-items: center;
        margin-left: 5vw; 
     }


      /*Texte "H1" dans le Header. "FC Bayern" & le contenu de la page*/
     h1 {
        display: block;
        font-size: 2.75vw;
        margin-bottom: 1vw; 
        margin-left: 1vw; 
        font-family: "Header";
    }

    h4 {
        font-family: "Header";
        font-size: 1.20vw;
    }

  
     /*Navigation = La où les "boutons" sont. Juste en dessous du header*/
     nav {
        position: fixed;
        top: 16vh; 
        width: 100%; 
        height: 5.5vh; 
        background-color: rgb(210, 1, 1); 
        display: flex; 
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        z-index: 10;
        border-bottom: solid white 1px;
    }

     
    /*Toute la page*/
    body{
        background-color: #800505; 
        font-family: Verdana, sans-serif; 
        display: flex; 
        flex-direction: column;
        align-items: center;
    }


    /*Boutons qui servent à naviguer entre les différentees pages*/
    .bouton {
        display: block;
        color: white; 
        font-size: 3vh; 
        font-family: Arial, Helvetica, sans-serif;
    }



    /*L'ensemble du carrousel*/
    .total{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 10vw;
        margin-top: 25vh;
    }


    /*Correspond à chaque joueur (+ prénom nom numéro)*/
    .mySlides{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1px;
        height: 60vh;
        width: 15vw;
        overflow: hidden;
    }


    /*Correspond à l'image des joueurs*/
    .img{
        height: 80%;
        width: auto;
    }


    
    /*Flèche précedente*/
    .prev{
        cursor: pointer;
        align-items: center;
        justify-content: center;
        padding: 1vw;
        margin-top: auto;
        margin-bottom: auto;
        color: rgb(255, 255, 255);
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
    }


    /*Flèche suivante*/
    .next {
        cursor: pointer;
        color: rgb(255, 255, 255);
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        font-weight: bold;
        font-size: 18px;
        padding: 1vw;
        right: 0;
        
    }

     /*Rajouter des effets aux flèches*/
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

    /*Cmaillotorrespond au nom des joueurs*/
    .text {
        color: #f2f2f2;
        font-size: 1vw;
        padding: 8px 12px;
        width: 100%;
        text-align: center;
    }


    /*/*Correspond au numéros des joueurs*/
    .numbertext {
        color: white ;
        font-size: 1vw;
        padding: 8px 12px;
        text-align: center;
    }

    /*Effet quand on change d'imaage dans le caroussel des joueurs*/
    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }

    /* Div qui contient les maillots de la saison 23/24 */
    .maillots {
        margin-top: 9vh;
        background-color: rgb(210, 1, 1);
        display: flex;
        padding: 15px;
        font-size: 1vw;
        font-family: Arial, Helvetica, sans-serif;
       
    }

    .maillotHome{
        width: 23vw;
        height: 35vh;
    }

    .maillotAway{
        width: 25vw;
        height: 35vh;
    }

    .maillotThird{
        width: 23vw;
        height: 30vh;
    }
    
    .textMaillots {
        color: #f2f2f2;
        font-size: 1vw;
        padding: 8px 12px;
        
    }


@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }

@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}