@charset "UTF-8";
/* SASS: L'ordre de chargement des variables / fichiers scss est très important.
Si on charge les fichiers avant les variables, le fichier ne pourras pas les reconnaitrent car elles n'auront pas été identifiées en amont. Donc, créer les variables avant d'importer les fichiers scss. */
/* VARIABLES */
/* ASTUCES / WARNING!!!: l'astuce d'utiliser "calc" pour redimensionner une font de façon responsive ne fonctionnera pas en Sass comme en CSS natif.
Exemple: 
CSS natif = 
h2 {
    font-size: calc(Xrem + Yvw) 
}

Sass = 
1) on déclare la variable => $fontX = Xrem
2) c'est alors dans le CSS classique que l'on va utiliser la variable $fontX:
h2 {
    font-size: calc($fontX + Yvw)
}
*/
/* IMPORTS FICHIERS SCSS */
/* global style */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* 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%;
}

body {
  font-family: "Montserrat", sans-serif;
  background-color: rgba(0, 0, 0, 0.096);
}

h1 {
  font-size: 2.5rem;
}

li,
button,
label,
input,
p,
a {
  font-size: 2.5rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 2.5rem;
}

h4,
h5 {
  font-size: 2rem;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #2c2c2c;
}

.main-head {
  width: 100%;
  padding: 0 5%;
  background: -webkit-gradient(linear, left top, right top, from(#38a4d3), to(rgba(54, 211, 159, 0.555)));
  background: linear-gradient(left, #38a4d3, rgba(54, 211, 159, 0.555));
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 10vh;
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

nav .logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
}

nav h1 {
  font-size: 4rem;
  margin: 2rem;
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50rem;
          flex: 1 1 50rem;
}

nav .flag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 3rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 10rem;
          flex: 1 1 10rem;
}

.intro {
  min-height: 80vh;
  width: 90%;
  margin: auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* l'usage de "-webkit" permet une validation mutli plateforme de notre commande. il est important de ne pas l'oublier ou l'effet voulu ne fonctionnera pas. Il faut aussi conserver la délcaration d'origine, sans le -webkit devant pour "background-clip" */
}

.intro h2 {
  font-size: 8rem;
  padding-top: 2rem;
  background: -webkit-gradient(linear, left top, right top, from(#38a4d3), to(rgba(54, 211, 159, 0.555)));
  background: linear-gradient(left, #38a4d3, rgba(54, 211, 159, 0.555));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.intro h3 {
  font-size: 6rem;
  padding: 2rem 0rem;
}

.intro p {
  padding-top: 2rem;
  color: #2c2c2c;
}

.splash {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: -1;
}

.intro-text,
.intro-images {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
}

.intro-social {
  margin-top: 4rem;
}

.intro-social a {
  margin-right: 5rem;
}

.active {
  background: #504f4f;
  color: white;
  padding: 1rem 3rem;
  border-radius: 2rem;
}

#plant-left {
  -webkit-animation: plant 1.5s ease infinite alternate;
          animation: plant 1.5s ease infinite alternate;
}

#plant-right {
  -webkit-animation: plant 1.5s ease infinite alternate 0.5s;
          animation: plant 1.5s ease infinite alternate 0.5s;
}

#me {
  -webkit-animation: me 5s ease infinite alternate;
          animation: me 5s ease infinite alternate;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

/* "Transform box: Fill box" permet de recentrer l'animation sur l'objet qui nous intéresse à savoir le centre de l'orloge et non pas l'orloge elle même.
"Transform origin: bottom" permet de déplacer le centre de rotation vers la partie que l'on souhaite, ici on souhaite définir l'origine de rotation de l'aiguille à partir de sa partie inférieur (bottom) */
#clock-arrow {
  -webkit-animation: clock 10s infinite linear;
          animation: clock 10s infinite linear;
  transform-box: fill-box;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

@-webkit-keyframes me {
  from {
    -webkit-transform: rotateZ(-2.5deg);
            transform: rotateZ(-2.5deg);
  }
  to {
    -webkit-transform: rotateZ(2.5deg);
            transform: rotateZ(2.5deg);
  }
}

@keyframes me {
  from {
    -webkit-transform: rotateZ(-2.5deg);
            transform: rotateZ(-2.5deg);
  }
  to {
    -webkit-transform: rotateZ(2.5deg);
            transform: rotateZ(2.5deg);
  }
}

@-webkit-keyframes clock {
  from {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes clock {
  from {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-webkit-keyframes plant {
  from {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(-30%);
            transform: translateY(-30%);
  }
}

@keyframes plant {
  from {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(-30%);
            transform: translateY(-30%);
  }
}

.projects {
  width: 90%;
  margin: 2rem auto;
  min-height: 80vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.projects p {
  margin: 1rem;
}

.projects div {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50rem;
          flex: 1 1 50rem;
  margin-top: 1rem;
  min-height: 60rem;
}

.projects img {
  border-radius: 1rem;
}

.form-section {
  min-height: 80vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.form-section form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3rem 10rem;
  -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.205), 0px 20px 40px rgba(0, 0, 0, 0.205);
          box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.205), 0px 20px 40px rgba(0, 0, 0, 0.205);
  border-radius: 2rem;
}

.form-section form input,
.form-section form textarea {
  margin: 2rem;
}

.form-section form input:focus,
.form-section form textarea:focus {
  outline: 2px solid black;
}

.form-section form textarea {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
}

.form-section form button {
  width: 100%;
  padding: 2rem;
  background: #154353;
  color: white;
}

.form-section form button:focus {
  background: #347681;
}

footer {
  min-height: 10vh;
  background: #154353;
  color: white;
  padding: 0% 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

footer h4 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
}

footer ul {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 1450px) {
  html {
    font-size: 50%;
  }
  svg {
    width: 90%;
  }
  nav {
    width: 100%;
  }
  nav h1 {
    font-size: 4.5rem;
  }
  .projects div {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 55rem;
            flex: 1 1 55rem;
    padding: 2rem;
  }
  .projects div img {
    width: 100%;
    height: 100%;
  }
}

@media screen and (max-width: 1024px) {
  nav .logo {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 30rem;
            flex: 1 1 30rem;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  nav ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100rem;
            flex: 1 1 100rem;
    margin: 1rem 0rem 3rem;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  nav ul a {
    width: 10rem;
  }
  nav .flag {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 10rem;
            flex: 1 1 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .splash {
    display: none;
  }
  svg {
    height: 60%;
  }
  div.logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  div.logo h1 {
    font-size: 4rem;
  }
  .projects div {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50rem;
            flex: 1 1 50rem;
    padding: 2rem;
  }
  .projects div img {
    width: 100%;
    height: 100%;
  }
  footer h4 {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 512px) {
  html {
    font-size: 40%;
  }
  nav {
    padding-top: 1rem;
  }
  nav .logo {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 30rem;
            flex: 1 1 30rem;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  nav .flag {
    margin: 0rem;
  }
  nav ul {
    margin: 2rem 0rem;
  }
  nav .logo h1 {
    font-size: 3rem;
  }
  .intro-text {
    text-align: center;
  }
  .intro-social a {
    margin: 2rem;
  }
  .intro-images {
    text-align: center;
  }
  .intro h2 {
    font-size: 6rem;
    padding: 0rem;
  }
  .intro h3 {
    font-size: 5rem;
  }
  .projects div {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 40rem;
            flex: 1 1 40rem;
  }
  .projects div img {
    width: 100%;
    height: 100%;
  }
  form {
    padding: 0rem;
    width: 95%;
    margin: auto;
  }
  footer h4 {
    font-size: 1.5rem;
  }
}
/*# sourceMappingURL=style.css.map */