button{
  cursor: pointer;
}






#sideMenu {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 10000;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 0px;
      text-align: left;
    }

    #sideMenu a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 17px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    #sideMenu a:hover {
      color: #f1f1f1;
    }

    #menuButton {
      font-size: 13px;
      cursor: pointer;
      margin-left: 0px;
      font-weight: bolder;
      box-shadow: 1px 1px 5px black;

      z-index: 10;
    }

@media screen and (max-width: 768px)
{
  #menuButton{
    color: darkblue; font-weight: bolder; background-color: black; width: 97%;
      position: fixed;
      top: 0px;
      /*background: linear-gradient(rgb(228, 35, 157), rgb(228, 170, 245));*/
      border-radius: 5px;
      padding: 3px 5px;
    }

}
 
   /* Styles pour la fenêtre modale */
    #fenetreModale {
      /*display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); 
      justify-content: center;
      align-items: center;
      position: absolute;
      z-index: 5;
      */
      display: none;
      position: fixed;
      top: 0; 
      left: 0;
      width: 100%;
      height: 80%;
      background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent justify-content: center; */
      z-index: 5;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     background-color: white;
     margin-top: 70px;
     box-shadow:-0.2em 0 .4em gray;
     padding:7px; 

    }

    #contenuModal {
      background: linear-gradient(to bottom, #808080, #D2691E);
      background: linear-gradient(to bottom, #0000FF, #FF00FF);
      background: linear-gradient(to bottom, #0000FF, #87CEEB);
      padding-top: 100px;
      padding-bottom: 100px;
      padding-left: 30px;
      padding-right: 30px;
      border-radius: 5px;
      opacity: 0.99999;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }



    /* Styles pour la fenêtre modale lectures commentaire videos dans Watch */
    .content_of_video_interactions{
     display: none;
      position: fixed;
      top: 0; 
      left: 0;
      width: 100%;
      height: 80%;
      background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent justify-content: center; */
      z-index: 5;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     background-color: white;
     margin-top: 70px;
     box-shadow:-0.2em 0 .4em gray;
     padding:7px; 
     padding-top:0px; 
    

    }



/* NEW POST DISPLAYING CSS*/

/* Fullscreen container */
    #fullscreenContainer {
      width: 100vw;
      height: 100vh;
      position: relative;
    }

    /* Transparent div on the right */
    #transparentDiv {
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0); /* Fully transparent background */
      color: white;
      display: flex;
      flex-direction: ;
      justify-content: center;
      align-items: center;
    }

    /* Transparent div at the bottom */
    #bottomTransparentDiv {
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(100% - 50px); /* Width of the whole screen minus the width of the right div */
      height: 100px;
      background-color: rgba(0, 0, 0, 0); /* Fully transparent background */
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    /* Video element taking the full height and width of the container */
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
}

.OnlySmallScreen
{
  display: none;
}


@media screen and (max-width: 768px)
{
  .content_of_video_interactions{
    
    /*color: black;
    width: 90%;
    margin-left: 5%;
    bottom:7%;
    height: 80%;
    border-radius: 7px;
    overflow: scroll;
    */
     padding:0px; 

  }

  .OnlySmallScreen
  {
    display: block;
    position: fixed;
    top: 0%;
    left: 0%;
    /*transform: translate(-50%, -50%);*/
  }

  .parallax-container {
      overflow: hidden;
  }
}


.openaccountLink{
  display: inline-block;
  border-radius:3px;
  padding: 3px 0px;
  width:100%;
  text-align:center; 
  background-color:rgb(196, 188,150);
  margin:30px 0px;
  border: 3px solid rgb(196, 188,150);
  color: black; 
}


.openaccountLink: hover{
  background-color: inherit;
  color: rgb(196, 188,150);
}