/* @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: 2.5vw 5vw 5vw 5vw; 
  height: 100vh;
  overflow-y: hidden;
}

.cover{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 94vh;

}

.info{
  font-size: 16px;
}

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

.g{
  flex: 1; 
}


.d{
  flex: 1;
}

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

iframe{
  margin-top: 20px;
}
/* img{
  width: 14vw;
} */

.photo{
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
}

.ciel{
  position: fixed;
  left: 0;
  top: 10vh;
  width: 100%;
  height: 90%;
  z-index: 20;
  overflow-x: auto;
  overflow-y: hidden;
}

.contenuCiel{
  margin-left: 99vw;
  width: 2700vw;
  height: 100%;
  z-index: 21;
  display: flex;
  flex-direction: row;

}

.scan{
  width: 60vw;
  margin: 10px;
  opacity: 0.95;
}

.scan img{
  width: 100%;
}

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

.studio{
  width: 90vw;
}

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

.arrow{
  display: flex;
  flex-direction: row;
  font-size: 24pt;
  width: 100%;
  text-align: left;
}
.debut{
  flex: 4;
}
.fin{
  flex: 1;
}
.visible{
  display: none;
}
@media screen and (max-width: 1100px) {
  .visible{
    display: block;
  }
  body{
    margin-top: 2vw;
    margin-left: 0;
    margin-right: 0;
    font-size: 32px;
    height: 100vh;
    overflow: hidden;
    /* height: calc(auto + 60vw); */
  }
  .link{
    text-align: right;
  }
  .header{
    height: 30vh;
    flex-direction: column;
  }
  .cover{
    flex-direction: column;
    align-items: start;
    width: 100vw;
    overflow: hidden;
  }
  .contentD, .contentG{
    margin: 20px;
    text-align: center;

  }
  .bio{
    font-size: 36px;
    margin-left: 4vw;
    line-height: 140%;
  }
  .info{
    font-size: 32px;

  }
  .photo{
    bottom: 0;
  }
  .studio{
    height: 70vh;
    width: auto;
  }
  .contentG{
    margin: 0;
  }
  .contentD{
    margin: 0;
    margin-bottom: 60vw;
  }
  .g{
    margin: 20px;
  }
  .d {
    
    width: 100%;
  }
  .debut{
    margin-left: 20px;
  }
  .fin{
    text-align: right;
    margin-right: 20px;
  }
  iframe{
      position: relative;
      width: 100%;
      left: 0;
  }
  .ciel{
    top: 35vh;
  }
  .contenuCiel{
    width: 4275vw;
  }
  .scan{
    width: 95vw;
  }
  .arrow{
    flex-direction: column;
    text-align: center;
  }
}