/*  Auteur              : Maxime Commergnat
    Date                : Le 10.01.2020
    Description         : Fichier CSS qui contient les styles des pages HTML */

* {
  font-family: sans-serif, sans-serif;
  margin: 0px;
  padding: 0px;
}

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.body-sources {
  overflow-x: hidden;
}

/* Masquer la barre de scroll à droite */

.over-hidden {
  overflow-y: hidden;
}

/* Contour vidéo YTB */

iframe {
  border: 0;
}

/* Position des images / vidéos */

div img {
  position: relative;
  width: 100%;
  height: 100vh;
  display: block;
  flex-wrap: wrap;
}

.japan-lac {
  position: fixed;
  right: 0;
  bottom: 0;
  max-height: var(--media-height);
  object-fit: cover;
}

.title {
  position: absolute;
  text-align: center;
  top: 10px;
  z-index: 1;
  right: 25%;
  left: 25%;
}

.history-title {
  color: black;
}

.pr-katana {
  position: absolute;
  height: 40vh;
  width: 100%;
  margin-top: 40px;
}

.c-iframe {
  position: relative;
  width: 100%;
  height: 100vh;
  display: block;
  flex-wrap: wrap;
  background-color: #3a3a3a;
}

.c-polissage {
  position: relative;
  width: 100%;
  height: 100vh;
  display: block;
  flex-wrap: wrap;
  background-color: #d4d4d4;
}

.img-polissage {
  position: absolute;
  width: 50%;
  height: 50vh;
  display: block;
  flex-wrap: wrap;
  top: 25%;
  left: 25%;
}

.vid-trempe {
  position: absolute;
  width: 50%;
  height: 50vh;
  display: block;
  flex-wrap: wrap;
  top: 25%;
  left: 25%;
}

.vid-tamahagane {
  position: absolute;
  width: 50%;
  height: 50vh;
  display: block;
  flex-wrap: wrap;
  top: 10%;
  left: 25%;
}

/* position du titre h1 */

h1 {
  position: relative;
  text-align: center;
  font-size: 40px;
  color: white;
}

/* position du titre h2 */

h2 {
  position: relative;
  color: white;
  left: 2%;
  margin-top: 3%;
  font-size: 25px;
  margin-bottom: 20px;
}

/* Liens des sources */

.a-sources {
  color: #2b81c7;
  text-decoration: none;
}

/* Bulles de texte */

.content-box {
  text-align: center;
  position: relative;
  bottom: 25vh;
  color: #f1f1f1;
  width: 100%;
}

.pourcent {
  position: absolute;
  margin: auto;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  left: 10%;
}

/* Bulle de texte: Index */

.content-box-index {
  text-align: center;
  position: relative;
  top: 80vh;
  color: #f1f1f1;
  width: 100%;
}

/* Bulle de texte: Définition */

.def-content-box {
  text-align: center;
  position: relative;
  bottom: 30vh;
  color: #f1f1f1;
  width: 100%;
}

/* Bulle de texte: Histoire */

.history-content-box1 {
  text-align: center;
  position: relative;
  bottom: 40vh;
  color: #f1f1f1;
  width: 100%;
}

.history-content-box2 {
  text-align: center;
  position: relative;
  bottom: 40vh;
  color: #f1f1f1;
  width: 100%;
}

.history-content-box3 {
  text-align: center;
  position: relative;
  bottom: 30vh;
  color: #f1f1f1;
  width: 100%;
}

/* Bulle de texte: Fabrication */

.fabrication-content-box1 {
  text-align: center;
  position: relative;
  bottom: -80vh;
  color: #f1f1f1;
  width: 100%;
}

.fabrication-content-box2 {
  text-align: center;
  position: relative;
  bottom: -80vh;
  color: #f1f1f1;
  width: 100%;
}

/* Bulle de texte: Tamahagane */

.tamahagane-content-box1 {
  text-align: center;
  position: relative;
  bottom: 40vh;
  color: #f1f1f1;
  width: 100%;
}

.tamahagane-content-box2 {
  text-align: center;
  position: relative;
  bottom: 25vh;
  color: #f1f1f1;
  width: 100%;
}

.tamahagane-content-box3 {
  text-align: center;
  position: relative;
  bottom: 25vh;
  color: #f1f1f1;
  width: 100%;
}

.tamahagane-content-box4 {
  text-align: center;
  position: relative;
  bottom: -70vh;
  color: #f1f1f1;
  width: 100%;
}

/* Liste histoire */

.center-list {
  position: relative;
  left: 42%;
  width: 20%;
}

.school-list {
  text-align: left;
}

/* Listes sources */

.li-sources {
  margin-left: 2%;
  padding: 5px;
  color: #f1f1f1;
}

/* Mettre le fond de la page en noir */

.black-bgr {
  background-color: #3a3a3a;
}

/* Tableau des caractéristiques du katana */

.tab-katana {
  position: absolute;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 30px;
  top: 50%;
}

.caracteristique-list {
  position: relative;
  color: #f1f1f1;
  width: 25%;
  padding: 20px;
  padding-left: 0px;
  left: 37%;
  list-style: none;
  border-bottom: 1px solid #f1f1f1;
}

/* Le menu de navigation */

#sidebar {
  position: fixed;
  width: 200px;
  height: 100%;
  background-color: #525252;
  right: -200px;
  transition: all 80ms linear;
  top: 0px;
  z-index: 1;
}

#sidebar.active {
  right: 0px;
}

#sidebar div a {
  display: block;
  color: #f1f1f1;
  padding: 15px 10px;
  border-bottom: 1px solid;
}

#sidebar .toggle-btn {
  position: fixed;
  right: 23px;
  top: 15px;
  cursor: pointer;
}

#sidebar div a.btn:hover {
  background-color: #6b6b6b;
}

/* Transformer des liens en bouton pour la navigation */
.btn {
  color: white;
  text-decoration: none;
  background: #525252;
}

/* Bouton de la page active */
.current {
  color: white;
  text-decoration: none;
  background: #333333;
  cursor: default;
}

/* Le bouton hamburger du menu de navigation */

.barre1,
.barre2,
.barre3 {
  display: block;
  width: 30px;
  height: 5px;
  background-color: black;
  margin: 3px 0px;
  transition: 0.4s;
}

.change .barre1 {
  -webkit-transform: rotate(-45deg), translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .barre2 {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
}

.change .barre3 {
  -webkit-transform: rotate(45deg) translate(-5px, -2px);
  transform: rotate(45deg) translate(-5px, -2px);
}

/*adaptation résolution*/
/* Laptop */
@media only screen and (max-width: 1366px) {
  .content-box {
    text-align: center;
    position: relative;
    bottom: 25vh;
    color: #f1f1f1;
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 30vh;
    color: #f1f1f1;
    width: 100%;
  }

  .fabrication-content-box1 {
    text-align: center;
    position: relative;
    bottom: -70vh;
    color: #f1f1f1;
    width: 100%;
  }

  .vid-trempe {
    position: absolute;
    width: 50%;
    height: 50vh;
    display: block;
    flex-wrap: wrap;
    top: 10%;
    left: 25%;
  }

  .vid-tamahagane {
    position: absolute;
    width: 50%;
    height: 50vh;
    display: block;
    flex-wrap: wrap;
    top: 8%;
  }

  .tamahagane-content-box4 {
    text-align: center;
    position: relative;
    bottom: -65vh;
    color: #f1f1f1;
    width: 100%;
  }

  .pr-katana {
    position: absolute;
    height: 40vh;
    width: 100%;
    margin-top: 20px;
  }
}

/* Iphone XR */
@media only screen and (max-width: 414px) {
  .japan-lac {
    position: fixed;
    right: -450px;
    bottom: 0;
    max-height: var(--media-height);
    object-fit: cover;
  }

  h1 {
    position: relative;
    text-align: center;
    font-size: 25px;
    color: white;
  }

  h2 {
    position: relative;
    color: white;
    left: 2%;
    margin-top: 3%;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .content-box-index {
    text-align: center;
    position: relative;
    top: 80vh;
    color: #f1f1f1;
    width: 75%;
  }

  .pourcent {
    position: absolute;
    margin: auto;
    width: 80%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    left: 20%;
  }

  div img {
    position: relative;
    width: 100%;
    height: 100vh;
    display: block;
    flex-wrap: wrap;
  }

  .def-content-box {
    text-align: center;
    position: relative;
    bottom: 30vh;
    color: #f1f1f1;
    width: 75%;
  }

  .history-content-box1 {
    text-align: center;
    position: relative;
    bottom: 75vh;
    color: #f1f1f1;
    width: 75%;
  }

  .history-content-box2 {
    text-align: center;
    position: relative;
    bottom: 70vh;
    color: #f1f1f1;
    width: 75%;
  }

  .history-content-box3 {
    text-align: center;
    position: relative;
    bottom: 50vh;
    color: #f1f1f1;
    width: 75%;
  }

  .fabrication-content-box1 {
    text-align: center;
    position: relative;
    bottom: -70vh;
    color: #f1f1f1;
    width: 75%;
  }

  .fabrication-content-box2 {
    text-align: center;
    position: relative;
    bottom: -80vh;
    color: #f1f1f1;
    width: 75%;
  }

  .tamahagane-content-box1 {
    text-align: center;
    position: relative;
    bottom: 55vh;
    color: #f1f1f1;
    width: 75%;
  }

  .tamahagane-content-box2 {
    text-align: center;
    position: relative;
    bottom: 20vh;
    color: #f1f1f1;
    width: 75%;
  }

  .tamahagane-content-box3 {
    text-align: center;
    position: relative;
    bottom: 30vh;
    color: #f1f1f1;
    width: 75%;
  }

  .tamahagane-content-box4 {
    text-align: center;
    position: relative;
    bottom: -65vh;
    color: #f1f1f1;
    width: 75%;
  }

  .caracteristique-list {
    position: relative;
    color: #f1f1f1;
    width: 50%;
    padding: 20px;
    padding-left: 0px;
    left: 25%;
    list-style: none;
    border-bottom: 1px solid #f1f1f1;
  }

  .c-iframe {
    position: relative;
    width: 100%;
    height: 145vh;
    display: block;
    flex-wrap: wrap;
    background-color: #3a3a3a;
  }

  .vid-trempe {
    position: absolute;
    width: 50%;
    height: 50vh;
    display: block;
    flex-wrap: wrap;
    top: 10%;
    left: 25%;
  }

  .vid-tamahagane {
    position: absolute;
    width: 50%;
    height: 50vh;
    display: block;
    flex-wrap: wrap;
    top: 5%;
    left: 25%;
  }
}

/* Galaxy note 9 */
@media only screen and (max-width: 1200px) {
  .japan-lac {
    position: fixed;
    right: -450px;
    bottom: 0;
    max-height: var(--media-height);
    object-fit: cover;
  }

  h1 {
    position: relative;
    text-align: center;
    font-size: 25px;
    color: white;
  }

  h2 {
    position: relative;
    color: white;
    left: 2%;
    margin-top: 3%;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .content-box-index {
    text-align: center;
    position: relative;
    top: 80vh;
    color: #f1f1f1;
    width: 75%;
  }

  .pourcent {
    position: absolute;
    margin: auto;
    width: 80%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    left: 8%;
  }

  div img {
    position: relative;
    width: 100%;
    height: 100vh;
    display: block;
    flex-wrap: wrap;
  }

  .def-content-box {
    text-align: center;
    position: relative;
    bottom: 40vh;
    color: #f1f1f1;
    width: 100%;
  }

  .history-content-box1 {
    text-align: center;
    position: relative;
    bottom: 85vh;
    color: #f1f1f1;
    width: 100%;
  }

  .history-content-box2 {
    text-align: center;
    position: relative;
    bottom: 70vh;
    color: #f1f1f1;
    width: 100%;
  }

  .history-content-box3 {
    text-align: center;
    position: relative;
    bottom: 50vh;
    color: #f1f1f1;
    width: 100%;
  }

  .fabrication-content-box1 {
    text-align: center;
    position: relative;
    bottom: -80vh;
    color: #f1f1f1;
    width: 100%;
  }

  .fabrication-content-box2 {
    text-align: center;
    position: relative;
    bottom: -78vh;
    color: #f1f1f1;
    width: 100%;
  }

  .tamahagane-content-box1 {
    text-align: center;
    position: relative;
    bottom: 65vh;
    color: #f1f1f1;
    width: 100%;
  }

  .tamahagane-content-box2 {
    text-align: center;
    position: relative;
    bottom: 30vh;
    color: #f1f1f1;
    width: 100%;
  }

  .tamahagane-content-box3 {
    text-align: center;
    position: relative;
    bottom: 40vh;
    color: #f1f1f1;
    width: 100%;
  }

  .tamahagane-content-box4 {
    text-align: center;
    position: relative;
    bottom: -70vh;
    color: #f1f1f1;
    width: 100%;
  }

  .caracteristique-list {
    position: relative;
    color: #f1f1f1;
    width: 50%;
    padding: 20px;
    padding-left: 0px;
    left: 25%;
    list-style: none;
    border-bottom: 1px solid #f1f1f1;
  }

  .c-iframe {
    position: relative;
    width: 100%;
    height: 145vh;
    display: block;
    flex-wrap: wrap;
    background-color: #3a3a3a;
  }

  .vid-trempe {
    position: absolute;
    width: 50%;
    height: 50vh;
    display: block;
    flex-wrap: wrap;
    top: 10%;
    left: 25%;
  }

  .vid-tamahagane {
    position: absolute;
    width: 50%;
    height: 50vh;
    display: block;
    flex-wrap: wrap;
    top: 7%;
    left: 25%;
  }
}