* {
  box-sizing: border-box;
}

:root {
  /* Variable css des fontes variables, pas touche */
  --weight: 0;
  --width: 0;
  --height: 0;
  /* Variable css des couleurs, vous pouvez les modifiers */
  --couleur-fond: rgb(0, 4, 58);
  --couleur-degrade: rgb(0, 4, 17);
  --couleur-texte: rgb(234, 0, 0);
  font-size: calc(1rem + ((1vw - .48rem) * 1.389));
}

a, span{
  font-size: .6rem;
}

/* Typographie Syne-Mono, à ne pas modifier */
@font-face {
  font-family: "Syne-Mono";
  src: url("fonts/Syne-Mono.woff");
}

/* Vos fontes variables, remplacez par vos noms de fichiers */
@font-face {
  font-family: "Varia";
  src: url("fonts/Myredhotcar.ttf");
}
@font-face {
  font-family: "Varia2";
  src: url("fonts/Squarepusher.ttf");
}

/* Ici on touche à rien normalement */
body {
  padding: 50px;
  height: 100vh;
  margin: 0;
  background: var(--couleur-fond);
  font-size: 18px;
  font-family: Helvetica, Tahoma, sans-serif;
  font-weight: 300;
  color: var(--couleur-texte);
  line-height: 1.44;
}

.syne-mono{
  font-family: "Syne-Mono";
  font-size: .6rem;
}
.syne-mono>a{
  color:var(--couleur-texte);
}

.grain {
    position: fixed;
    height: 100vh;
    width: 100vw;
    left:0;
    top:0;
    pointer-events: none;
    background-image: url(img/noise-256w.png);
    mix-blend-mode: soft-light;
    opacity: 0.7;
    animation: grain 0.1s steps(1) infinite;
    animation-duration: 1s;
    animation-timing-function: steps(1);
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: grain;
    z-index: 100;
}
.color-fond {
    position: fixed;
    height: 70vh;
    width: 100vw;
    left:0;
    bottom:0;
    z-index: 99;
    background: rgb(37,37,37);
    background: linear-gradient(0deg, var(--couleur-degrade) 45%, rgba(0,0,0,0) 100%);
    transition: .1s height;
}

@keyframes grain {
    0%, 100% { background-position: 0% 0%; }
    20% { background-position: 50% 50%; }
    40% { background-position: 25% 25%; }
    60% { background-position: 75% 75%; }
    80% { background-position: 0% 100%; }
}

.barre-nav{
  position: fixed;
  height: 50px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  padding: 0 1.6rem 0 1.6rem;
}
.nav1{
  top:0;
  left:0;
}

.nav2{
  bottom:0;
  left:0;
}

.audio-variable-font {
  border: 1px solid var(--couleur-texte);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height: 100%;
  z-index: 104;
  position: relative;
}


/* .audio-variable-font .micro {
  border-right: 1px solid var(--couleur-texte);
  width: 1px;
  padding: 20px;
  position: relative;
  text-align: center;
} */

.bout-mic{
  display: none;
}
/* .audio-variable-font .micro .micro-wrapper {
  display: table;
  height: 100%;
}
.audio-variable-font .micro .micro-wrapper .dtc {
  display: table-cell;
  vertical-align: middle;
}
.audio-variable-font .micro img {
  display: inline-block;
  width: 60px;
  height: 87px;
  position: relative;
  z-index: 2;
} */
/* .audio-variable-font .micro button {
  transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
  display: inline-block;
  color: var(--couleur-texte);
  font-size: 0.77rem;
  text-align: center;
  margin-top: 20px;
  border: 1px solid var(--couleur-texte);
  border-radius: 18px;
  padding: 7px 15px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  cursor: pointer;
} */
/* .audio-variable-font .micro button:focus {
  outline: none;
}
.audio-variable-font .micro button:hover {
  color: #000;
  background-color: var(--couleur-texte);
} */
.audio-variable-font .micro canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.audio-variable-font .cadre-fontes {
  text-align: center;
  width: 100%;
  align-self: center;
  padding: 20px 30px;
  font-size: 12rem;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.typeface1{
  font-family: "Varia", sans-serif;
  font-variation-settings: "wdth" var(--width), "wght" var(--weight), "opsz" var(--height);
    margin-bottom: -.1em;
    font-size: 13rem;
}
.font2{
  font-family: "Varia2", sans-serif;
  font-variation-settings: "wdth" var(--width), "wght" var(--weight), "opsz" var(--height);
  font-size: 5rem;
}
.font3{
  font-family: "Varia3", sans-serif;
  font-variation-settings: "wdth" var(--width), "wght" var(--weight), "opsz" var(--height);
  font-size: 3rem;
  margin-bottom: -.1em;
  margin-top: 1.7rem;
}