/* @font-face {
    font-family: 'miniature';
    src: url(../assets/Miniature.woff) format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} */

p{
  display: contents;
}

@font-face {
    font-family: 'avara';
    src: url('../font/avara.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "Unica";
  src: url('../font/Unica.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-kerning: normal;
}

@font-face {
  font-family: "Unica";
  src: url('../font/NeueHaasUnica-Bold.woff2') format('woff2');
  font-weight: lighter;
  font-style: normal;
  font-kerning: normal;
}

@font-face {
  font-family: "Volta";
  src: url("https://db.onlinewebfonts.com/t/11f5536560166cbadd8ba6f850ef5500.woff")format("woff");
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'snell';
  src: url('../font/SnellRoundhand.ttc') format('opentype');
  font-weight: normal;
  font-style: normal;
}

body{
  font-family: 'Unica';
  line-height: 125%;
  letter-spacing: -0.02em;
  margin: 2vw;
  height: 115vh;
  color: #6b4f41;

}

.cover{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

}

.header{
  /* color: #ddc2ff; */
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 15vh;
}

.g{
  flex: 1;
  text-align: left;
}


.d{
  flex: 1;
  text-align: left;
}

.contentD, .contentG{
    /* margin: 5vw; */
}

.video{
  width: 100%;
  height: 55%;
}

.bio{
  font-size: 17px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 500;
  margin-left: 100px;
  text-indent: 3em each-line;
  margin-bottom: 40px;
}
iframe{
  margin-top: 20px;
}
img{
  width: 14vw;
}

.photo{
  position: fixed;
  bottom: 80px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.rouge{
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.link:hover{
  text-decoration: underline;
}

/*  mise en forme références  */

.contenu{
  display: flex;
  flex-direction: row;
}

.explication{
  width: 50vw;
}


@media screen and (max-width: 1100px) {
  body{
    font-size: 32px;
    /* height: calc(auto + 60vw); */
  }
  .link{
    text-align: center;
  }
  .cover{
    flex-direction: column;
    align-items: start;
  }
  .contentD, .contentG{
    margin: 20px;
  }
  .bio{
    font-size: 36px;
    margin-left: 4vw;
    line-height: 140%;
  }
  img{
    width: 30vw;
  }
  .photo{
    bottom: 0;
  }
  .contentD{
    margin-bottom: 60vw;
  }
  .d {
    width: 100%;
  }
  iframe{
      position: relative;
      width: 100%;
      left: 0;
  }
  .contenu{
    text-align: center;
    flex-direction: column;
    
  }
  .explication{
    text-align: center;
    width: 100%;
  }
  iframe{
    height: 500px;
  }
  .g {
    text-align: center;
  }
  .d{
    text-align: center;
  }
}