body{
        
        color: white;
        font-family: sans-serif;
     }
     .navbar-brand{
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: yellow;
        text-shadow: ;
     }
     
     .nav-bar-header{
     
     }
     #myNavbar{
         
        text-align: left;
        font-size: 12px;
        font-weight: bold;
        color: white;
        font-family: sans-serif;
        line-height: 5; 
        white-space : ;
        word-break : ;
     }


/**/

ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.nav-bar {
   background-color:#0C0C0C;
   width: 180px;
   
   position: fixed;
   overflow: auto;
   padding-left: 1px;
   padding-top: 10px; 
   margin-left: 30px;
   height: 500px;
   background: linear-gradient(to black,grey, pink);


}

.sidenav {
  height: 500px;
  width: 0;

  position: absolute;
  z-index: 1;
  top: 42px;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;


}

.sidenav a {
  padding: 8px 8px 8px 8px;
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;

}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 150px;
}

.nav-bar img{
  position: absolute;
  left: 20px;
  height: 180px;
}



li a {
   text-decoration: none;
   color: inherit;
   padding: 1px;
   display: block;
   font-size: 12px;
}
li a:hover:not(.active) {
   background-color: #444;
   color: #fff;
   
}
.activ {
   background-color: grey;
   color: orange;
}



@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


/* Appliquer un style de base à l'image */

            .rollover-container {
            position: relative;
            display: inline-block;
        }

        .rollover-container:hover .rollover-content {
            opacity: 1; /* Afficher l'image lors du survol */
        }
.rollover-container:hover .rollover-content2 {
            opacity: 1; /* Afficher l'image lors du survol */
        }
        .rollover-content {
            transition: opacity 0.3s ease-in-out;
            opacity: 0; /* Cacher l'image par défaut */
            position: absolute;
            top: 20px; /* Ajustez la position de l'image selon vos besoins */
            left: 0;
        }

/*Contenu cours P1 Photos:  Amy Art-Dreams de Pixabay : ai-generated-8449435_640, 
scym :
Rita-👩‍🍳 und 📷 mit ❤ de Pixabay
Image par Andrea de Pixabay    */


.rollover-content {
            height: 360px
        }


/*Animation*/


.blink {
  animation: blink 3s infinite;
}
@keyframes blink { 
  0% { opacity:0; }
  50% { opacity:1; } 
  100% { opacity:0; }
}

h2{
 margin-bottom: 40px;
}
h3{
  font-weight: bold;
}
h4{
  margin-top: 10px;
}
#text{
  font-size: 16px;
  line-height: 22px;
}

.information {
   background-color:#060606;
   color:white;
   font-size: 15px;
   font-family: sans-serif;
   text-align: justify;
    line-height: 18px;
  
  
   padding: 10px 60px;

    width: 700px;
    height: 500px;
 position: absolute;
   top:0px;
   
}


.retraitPara{
    padding-left: 20px;
}

/*Contenu cours P1 Photos:  Amy Art-Dreams de Pixabay : ai-generated-8449435_640, 
scym :
Rita-👩‍🍳 und 📷 mit ❤ de Pixabay
Image par Andrea de Pixabay    */
#text{
  font-size: 12px;
  line-height: 18px;
}
.information img{
  height: 150px;
  margin-bottom: 11px;
}
/**/