@font-face {
    font-family: gara;
    src: url(fonts/Garabosse-Perle_1.woff);
}

@font-face {
  font-family: gara-light;
  src: url(fonts/Garabosse-Mignon·ne.woff);
}

@font-face {
  font-family: sono;
  src: url(fonts/Sono[MONO\,wght].ttf);
}

body{
  font-family: sono;
}

.toDisplay{
  opacity: 100% !important;
}

.noDisplay{
  opacity: 0%;
  transition: .15s;
}


@media (orientation: landscape) {
  .filtre{
    display: inline-block;
  }
  .titre-projet{
    text-transform: uppercase;
    font-size: 2.5vw;
    font-weight: 500;
      }
  
  .categories-projet{
    font-family: sono;
    font-weight: 500;   
  }
  
  #credits{
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: calc(100vw - .8vw);
    height: auto;
    padding: .4vw;
    text-align: end;
    font-family: sono;
    font-weight: 500;
    z-index: 2;
    }
  
    #a-propos-frame{
      /* display: none; */
      position: fixed;
      top: 0px;
      left: 0px;
      height: fit-content;
      padding: .8vw;
      width: calc(34.2vw - 0.5px - (0.8vw * 2));
      border-right: .5px solid black;
      border-bottom: .5px solid black;
      background-color: white;
      font-family: sono;
      font-weight: 500;
      text-align: start;
      font-size: .8vw;
      z-index: 10;
      mix-blend-mode: normal;
      transition: .15s;
      opacity: 0%;
  }
  
  *::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  * {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  #right{
    position: absolute;
    top: 0px;
    left: 50%;
    width: 50%;
    height: 100%;
  }
  
  #left{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
  }
  
  #right:hover{
    cursor:url(ressources/droite.png), auto;
  }
  
  #left:hover{
    cursor:url(ressources/gauche.png), auto;
  }
  
  * {
    overscroll-behavior: none;
  }
  
  .closeabout{
    opacity: 0% !important;
    pointer-events: none;
  }
  
  .openabout{
   opacity: 100% !important;
   pointer-events: all;
  }
  
  .gray{
    opacity: 50%;
  }
}

@media (orientation: portrait){
  @font-face {
    font-family: gara;
    src: url(fonts/Garabosse-Perle_1.woff);
  }
  
  @font-face {
  font-family: gara-light;
  src: url(fonts/Garabosse-Mignon·ne.woff);
  }
  
  @font-face {
  font-family: sono;
  src: url(fonts/Sono[MONO\,wght].ttf);
  }
  
  .filtre{
    display: inline-block;
    opacity: 50%;
  }
  body{
  font-family: sono;
  }
  
  .titre-projet{
  text-transform: uppercase;
  font-size: 8vw;
  font-weight: 500;
  font-variation-settings: "MONO" .3;
  }
  
  .categories-projet{
  font-family: sono;
  font-weight: 500;
  font-size: 4vw;
  text-align: start;
  }
  
  #credits{
    background-color: white;
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 100vw;
  height: auto;
  padding: .4vw;
  text-align: end;
  font-family: sono;
  font-weight: 500;
  z-index: 2;
  }
  
  #a-propos-frame{
    /* display: none; */
    position: fixed;
    top: 0px;
    right: 0px;
    height: fit-content;
    padding: 2vw;
    width: calc(100vw - 4vw);
    border-bottom: .5px solid black;
    background-color: white;
    font-family: sono;
    font-weight: 500;
    text-align: start;
    font-size: 4vw;
    z-index: 10;
    mix-blend-mode: normal;
  }

  #a-propos-frame #cross{
    position: relative;
    margin-bottom: 5vw;
    padding: 0px;
    opacity: 50%;
  }
  
  *::-webkit-scrollbar {
  display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  * {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  }
  
  #right{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 50%;
  height: 100%;
  }
  
  #left{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 100%;
  }
  
  #right:hover{
  cursor:url(ressources/droite.png), auto;
  }
  
  #left:hover{
  cursor:url(ressources/gauche.png), auto;
  }

  .closeabout{
    opacity: 0% !important;
    pointer-events: none;
  }
  
  .openabout{
   opacity: 100% !important;
   pointer-events: all;
  }
  
  .gray{
    opacity: 50%;
  }

  #filtres{
    display: flex;
    flex-direction: column;
  }
}