@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;
}

.titre-projet{
  text-transform: uppercase;
  font-size: 2.5vw;
  font-weight: 500;
  margin-bottom: 10vw;
}

.categories-projet{
  font-family: sono;
  font-weight: 500;
  opacity: 50%;
}

#credits{
  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: .8vw;
    width: calc(34.2vw - 0.5px - (0.8vw * 2));
    border-left: .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;
}

*::-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;
}