/* global style */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* FONTS DOWLOADED ON GOOGLE FONTS & SAVED ON LOCAL FOLDER */
@font-face {
  font-family: "Ruhl";
  src: url(./fonts/FrankRuhlLibre-Regular.ttf);
}

@font-face {
  font-family: "Ruhl Medium";
  src: url(./fonts/FrankRuhlLibre-Medium.ttf);
}

@font-face {
  font-family: "Vibes";
  src: url(./fonts/GreatVibes-Regular.ttf);
}

@font-face {
  font-family: "Terminator";
  src: url(./fonts/Oswald-Regular.ttf);
}

/* l'utilisation de (--) permet de créer des variables que l'on peut ensuite utiliser à n'importe quel endroit du code CSS. Cela permet en une seule manipulation sur la valeur de la variable, de changer tout ou partie d'une section du site sans avoir à revenir sur chaque valeurs indépendemment. */
html {
  font-size: 62.5%;
  --header1: calc(2rem + 1vw);
  --header2: calc(3.5rem + 1vw);
  --header3: calc(3rem + 1vw);
  --header4: calc(2.4rem + 1vw);
  --text: calc(1.5rem + 1vw);
  --big: calc(6rem + 1vw);
  --special-color: #906272;
  --background-color: #414141;
  --gray-text: #525252;
  scroll-behavior: smooth;
}

h1 {
  font-size: var(--header1);
}

li,
button,
label,
input,
p,
a {
  font-size: var(--text);
}
h2 {
  font-size: var(--header2);
}
h3 {
  font-size: var(--header3);
}

h4,
h5 {
  font-size: var(--header4);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Project Fonts Setting */
body {
  font-family: "Ruhl", sans-serif;
  animation: opening 1s ease-in-out;
}

h1,
h2,
h3,
h5 {
  font-family: "Terminator", sans-serif;
}

/* NAV SECTION */
/* Z index + position relative permet de conserver le box shadow visible au dessus des éléments de la section "hero". */
.main-head {
  background: black;
  color: #e4a341;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
  z-index: 2;
  position: relative;
}

nav {
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  min-height: 10vh;
  padding: 2rem 0rem;
}

#logo {
  flex: 1 1 20rem;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  flex: 1 1 20rem;
}

.nav-links a {
  color: #e4a341;
}

/* Ici, flex wrap a été activé sur un élément qui contient d'autres éléments. Lorsque ces autres éléments, dit "enfants" ne pourront plus tenir sur une seul ligne, ils basculerons automatiquement sur plusieurs lignes */
.hero {
  min-height: 90vh;
  width: 100%;
  margin: 0 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

/* ici, flex permet de définir le volume que prend l'élément, le 1er chiffre represente l'axe X(horizontal), le 2ème chiffre l'axe Y(Vertical), et enfin le 3ème chiffre correspond à la taille minimum que l'élément peux prendre avant qu'il ne passe en dessous d'un autre élément si le mode flex wrap a été activé sur l'élément parent qui le contient. */
.hero-introduction {
  flex: 2 1 40rem;
  text-align: center;
  background: url(./img/postapo2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hero-introduction p {
  padding: 5rem 10rem;
  color: white;
}

.hero-introduction h2 {
  color: #e4a341;
  padding-top: 3rem;
}

.hero-introduction a {
  padding: 2rem 8rem;
  color: #e4a341;
  border: 3px solid #e4a341;
  margin-bottom: 4rem;
}

.hero-introduction a:hover {
  background: black;
  color: white;
}

.hero-images {
  flex: 1 1 40rem;
  background: linear-gradient(#000000, transparent), url(./img/postapo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}

/* object-fit cover permet d'adapter la taille de l'image en fonction de la taille de son contenant, en respectant le responsive. Width et height 100% sont là pour indiquer à l'image de couvrir 100% de l'espace du contenant */
.hero-elena {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plant {
  position: absolute;
  bottom: 0;
  left: -20%;
  z-index: -1;
  transform: translateY(60%) rotateZ(-10deg) rotateX(90deg);
  animation: sniper-entrance 3s ease-in-out 0.5s forwards,
    snipe-shake 5s infinite ease-in-out alternate-reverse 3.5s;
  transform-origin: bottom;
}

.plant2 {
  left: 40%;
}

.sniper1 {
  left: 20%;
  top: -5%;
  z-index: 3;
}

.menu-check,
.burger {
  display: none;
  cursor: pointer;
}

/* ABOUT SECTION */
.about {
  display: flex;
  min-height: 100vh;
  flex-wrap: wrap;
}

.about-text {
  background: black;
  color: white;
  flex: 2 1 40rem;
  justify-content: space-around;
}

.about-text div {
  padding: 3rem 6rem;
}

.about-text h3 {
  padding: 2rem 0rem;
  color: #e4a341;
  font-family: "Terminator", sans-serif;
}

.about-text h2 {
  padding: 4rem;
  color: #e4a341;
}

.about-work,
.about-life,
.about-contract {
  width: 100%;
}

.about-image {
  flex: 1 1 40rem;
  position: relative;
}

.about-image img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.about-image h5 {
  position: absolute;
  letter-spacing: 0.5rem;
}

/* GALLERY SECTION made on grid layout */
.gallery {
  background: #454545;
  display: grid;
  min-height: 100vh;
  grid-template-columns: repeat(3, 1fr);
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery1 {
  grid-column: 1/3;
}

.gallery2 {
  grid-row: 1/3;
  grid-column: 3/4;
}

/* CONTACT SECTION */
.contact {
  color: white;
  min-height: 90vh;
  display: flex;
  flex-wrap: wrap;
  background: rgb(0, 0, 0);
}

.contact img {
  flex: 1 1 40rem;
  object-fit: cover;
}

.form-wrapper {
  flex: 3 1 40rem;
}

.form-wrapper h2 {
  margin-bottom: 5rem;
}

.form-wrapper span {
  font-size: var(--big);
  color: #e4a341;
}

.form-wrapper label {
  display: block;
}

.form-wrapper input {
  display: block;
  margin-bottom: 3rem;
  background: black;
  color: #e4a341;
  border: none;
}

.form-wrapper button {
  background: #e4a341;
  border: 1px solid black;
  padding: 1rem 8rem;
  width: 100%;
  cursor: pointer;
}

/* FOOTER SECTION */
footer {
  background: linear-gradient(black, #e4a341);
  padding: 3rem 5%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

footer h4 {
  flex: 3 1 40rem;
  font-size: calc(1.4rem + 1vw);
}

footer ul {
  display: flex;
  flex: 1 1 40rem;
  justify-content: space-between;
  align-items: center;
}

/* ANIMATIONS */

@keyframes opening {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes plant-entrance {
  from {
    transform: translateY(10%) rotateZ(-10deg) rotateX(90deg);
  }
  to {
    transform: translateY(0%) rotateZ(0deg) rotateX(0deg);
  }
}

@keyframes plant-shake {
  from {
    transform: rotateZ(-10deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}

@keyframes sniper-entrance {
  from {
    transform: translateY(-90%) rotateZ(-10deg);
  }
  to {
    transform: translateY(0%) rotateZ(0deg);
  }
}

@keyframes snipe-shake {
  from {
    transform: rotateZ(-10deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}

/* MEDIA QUERIES */
@media screen and (max-width: 842px) {
  .hero {
    width: 100%;
  }

  .hero-introduction p {
    padding: 3rem;
  }

  /* BURGER MENU */
  /* la position relative nous permet de garder visible le motif "burger" quand on click dessus et que le background gris recouvre l'ensemble de la page. */
  .burger {
    position: relative;
    display: block;
  }

  .burger span {
    padding: 0.2rem 2rem;
    background: var(--gray-text);
    margin: 0.5rem 0rem;
    display: block;
    transition: transform 1s ease;
  }

  .nav-links a {
    color: white;
    font-size: var(--header3);
    text-decoration: underline;
  }

  /* Quand on utilise position fixed, il ne faut pas oublier de déterminer l'endroit à partir duquel l'élément va se fixer, avec top / left ou autre... sinon selon l'effet souhaité, comme ici (couvrir l'ensemble de l'écran), cela ne fonctionnera pas.*/
  .nav-links {
    background: var(--background-color);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    flex-direction: column;
    align-items: center;
    transition: transform 1s ease;
  }

  .nav-open {
    transform: translateX(-100%);
  }

  .toggle .line1 {
    transform: rotateZ(90deg) translateX(10px);
    background: whitesmoke;
  }

  .toggle .line2 {
    background: whitesmoke;
  }
  .toggle .line3 {
    opacity: 0;
  }

  /* menu check est un élément input de type "checkbox" qui va nous permettre de simuler un espace clickable, pour notre menu "burger". On le positionne en CSS au dessus du motif burger et on l'adapte à la taille du motif de sorte qu'il le recouvre entièrement et ainsi le rendre clickable au survol. Dans le cas d'une utilisation exclusive de HTML et CSS sans Js, menu check sera utilse.
  Si on utilise Js, alors il n'est pas nécéssaire de faire appel à menu-check*/
  /* .menu-check {
    position: absolute;
    display: block;
    top: 50%;
    right: 5%;
    transform: translate(5%, -50%);
    width: 4.5rem;
    height: 3rem;
    cursor: pointer;
    opacity: 0;
    z-index: 100;
  }

  .menu-check:checked + .nav-links {
    transform: translateX(-100%);
  }

  .menu-check:checked ~ .burger span {
    background: white;
  }

  .menu-check:checked ~ .burger span:nth-child(1) {
    transform: rotateZ(90deg) translateX(10px);
  }

  .menu-check:checked ~ .burger span:nth-child(3) {
    opacity: 0;
  } */

  /* ABOUT SECTION */
  .about-text div {
    padding: 3rem;
  }

  /* GALLERY SECTION */
  /* le simple ajout de la valeur "auto" dans les paramètres Grid row/column, permet de rendre responsive la gallerie d'image. Les images vont être redimensionnées automatiquement en fonction de la taille de l'écran. */
  .gallery img {
    grid-row: auto;
    grid-column: auto;
  }

  /* cette ligne indique que la disposition des images dans la section gallery va se faire de manière automatique, en fonction de la taille des images qui auront au minimum une largeur de 30rem et au maximum la ligne entière (1fr = 1 full row) */
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  }

  /* CONTACT SECTION */
  .contact h2 {
    color: whitesmoke;
    margin-top: 5rem;
  }

  .contact button {
    margin-bottom: 5rem;
  }

  footer ul {
    order: 1;
  }

  footer h4 {
    text-align: center;
    margin-top: 1rem;
    order: 2;
  }
}

/* Cette media est là pour limiter la taille des fonts. Au delà de 1700px de largeur, les fonts prendront les valeurs indiquées. */
@media screen and (min-width: 1700px) {
  html {
    --header1: 3rem;
    --header2: 4.5rem;
    --header3: 3.5rem;
    --header4: 3.5rem;
    --text: 3rem;
    --big: 8rem;
  }
}