@media (orientation:landscape) {
      .gris{
        opacity: 50%;
      }
      
      #a-propos{
        opacity: 50%;
        margin-left: 2vw;
      }
      
      #a-propos:hover{
        opacity: 100%;
        cursor: pointer;
      }

      #projets{
        opacity: 50%;
        margin-left: 2vw;
        text-decoration: none;
        mix-blend-mode: difference;
        color: white;
      }
      
      #projets:hover{
        opacity: 100%;
        cursor: pointer;
      }

      #carroussel{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;

      }

      #carroussel img{
        width: 100vw !important;
        height:fit-content ;
        top: 50%;
        transform: translateY(-50%);

        position: relative;
      
      }

    #credits{
        mix-blend-mode: difference;
        color: white;
    }

    #right{
      color: transparent !important;
    }

    #left{
      color: transparent !important;
    }

    #lienInfos{
      overflow: hidden;
      position: absolute; 
      left: 50%;
      transform: translateX(-50%);
    }

    #lien{
      color: white;
      text-decoration: none;
    }

    .show{
      max-width: 100%;
    }

    .hide{
      max-width: 0%;
    }
} 

@media (orientation: portrait) {
    .gris{
      opacity: 50%;
    }
    
    #a-propos{
      opacity: 50%;
      /* margin-left: .5vw; */
    }
    
    #a-propos:hover{
      opacity: 100%;
      cursor: pointer;
    }

    #projets{
      opacity: 50%;
      /* margin-left: 2vw; */
      text-decoration: none;
      mix-blend-mode: difference;
      color: white;
    }
    
    #projets:hover{
      opacity: 100%;
      cursor: pointer;
    }

    #carroussel{
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100vw;
      height: 100dvh;
      overflow: scroll;
      display: flex;
      flex-direction: row;
    }

    #carroussel > img{
      height: 100%;
      transform: translateX(-20%);
    }

    #credits{
        mix-blend-mode: difference;
        color: white;
        background-color: transparent !important;
        width: 97vw !important;
    }

    #right{
      font-size: 20vw;
      mix-blend-mode: difference;
      color: white;
      display: flex;
      flex-direction: row;
      justify-content: end;
      align-items: center;
    }

    #left{
      font-size: 20vw;
      mix-blend-mode: difference;
      color: white;
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: center;
    }

    #lienInfos a{
      color: white !important;
      text-decoration: none;
    }

    #lienInfos{
      display: flex;
      flex-direction: row-reverse;
    }
}