@charset "UTF-8";
/* mixins */
/* polices */
@import url("https://fonts.googleapis.com/css2?family=Anta&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400&display=swap");
/* regles générales */
body {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: white;
  overflow-x: hidden;
  width: 100vw;
  scroll-behavior: smooth;
  /* Ensemble, ces styles permettent aux éléments d'être rendus
    transparents et de devenir progressivement plus opaques en 1 seconde
    lorsque la classe 'is-visible' est ajoutée. Cela crée un effet
    d'animation pour les éléments. */
}
body .animate-on-scroll {
  /* Définit une opacité initiale de 0 pour les éléments */
  opacity: 0;
  /* Définit une transition d'opacité d'une seconde */
  transition: opacity 1.3s;
}
body .animate-on-scroll.is-visible {
  /* Définit une opacité de 1 pour les éléments avec la classe 'is-visible' */
  opacity: 1;
}
body nav p,
body h1,
body footer p,
body .dates,
body h2,
body h3,
body #passion {
  font-family: "Anta", sans-serif;
  font-weight: 400;
  font-style: normal;
}
body a {
  text-decoration: none;
  color: inherit;
}
body main a :not(.contactLink),
body .btn {
  background-color: #061681 !important;
  color: white !important;
  font-weight: bolder !important;
  width: 10em;
  font-size: 1.5em;
}
body main a :not(.contactLink):hover,
body .btn:hover {
  background-color: darkgoldenrod !important;
  transition: 0.7s;
}
body .blueBackground,
body .carousel-control-prev-icon,
body .carousel-control-next-icon,
body .carousel-indicators {
  background-color: #061681;
}
body .blueText {
  color: #061681;
}
body ul {
  list-style: none;
}
body h1 {
  font-size: 4.8rem;
  line-height: 1.5em;
}
@media screen and (max-width: 1200px) {
  body h1 {
    font-size: 2.8rem;
  }
}
body h1 h2 {
  font-weight: bolder;
}
@media screen and (max-width: 1200px) {
  body h1 h2 {
    font-size: 1.8rem;
  }
}
body header nav #photoProfil {
  width: 6vw;
  border-radius: 60px;
}
@media screen and (max-width: 767px) {
  body header nav #photoProfil {
    width: 25vw;
  }
}
body main {
  /* hero / grande image */
  /* texte passions */
  /* parcours */
  /* compétences */
  /* projets */
  /* technos grande image */
  /* contact */
}
body main #hero {
  background: url(images/aerial-background.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
body main #hero #heroTexts {
  position: relative;
  top: 45%;
  width: 35%;
  transition: 1.5s;
}
body main #hero #heroTexts h1 {
  transition: 1.5s;
}
body main #hero #heroTexts h1:hover {
  transform: translate(50%, -50%);
  transition: 1.5s;
}
@media screen and (max-width: 768px) {
  body main #hero #heroTexts {
    top: 50%;
  }
}
@media screen and (max-width: 1600px) {
  body main #hero #heroTexts {
    width: 100%;
    left: 0%;
  }
}
@media screen and (min-width: 1201px) and (max-width: 1599px) {
  body main #hero #heroTexts {
    width: 50%;
  }
}
body main #passions p {
  letter-spacing: 5px;
  font-size: 1.3em;
}
body main #passions #numbers {
  font-size: 400%;
}
body main #passions #numbers p {
  font-size: 50%;
}
body main #parcours img {
  width: 30vw;
  transition: 1s;
}
body main #parcours img:hover {
  transform: rotateY(360deg);
  transition: 1s;
}
@media screen and (max-width: 767px) {
  body main #parcours img {
    width: 80vw;
  }
}
body main #parcours .rounded-pill {
  transition: 1s;
}
body main #parcours .rounded-pill:hover {
  transform: scale(1.1);
  background-color: darkgoldenrod;
  transition: 1s;
}
body main #parcours .dates {
  letter-spacing: 5px;
}
body main #competences i {
  transform: scale(1) !important;
  transition: 0.7s;
}
body main #competences i:hover {
  transform: scale(1.5) !important;
  transition: 0.7s;
  color: darkgoldenrod;
}
body main #projets {
  background: url(./images/ordinateur.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
}
@media screen and (max-width: 992px) {
  body main #projets {
    height: 70vh;
  }
}
body main #aperçusProjets img {
  width: 95%;
  transform: scale(1);
  transition: 0.4s;
  z-index: 0;
  filter: none;
  border: 3px solid darkgoldenrod;
  border-radius: 10px;
}
body main #aperçusProjets img:hover {
  transform: scale(1.1);
  transition: 0.6s;
  z-index: 10;
}
body main #aperçusProjets h1 {
  justify-content: center !important;
  font-size: 2.6em;
}
@media screen and (max-width: 767px) {
  body main #aperçusProjets h1 {
    font-size: 1.4em;
  }
}
@media screen and (max-width: 1200px) {
  body main #aperçusProjets h2 {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  body main #aperçusProjets .carousel-indicators {
    width: 50%;
    margin: auto;
  }
}
body main #aperçusProjets .modal-footer a,
body main #aperçusProjets .modal-footer button {
  background-color: darkgoldenrod !important;
  color: white !important;
  font-weight: bolder !important;
  width: 10em;
  font-size: 1.5em;
}
body main #aperçusProjets .modal-footer a:hover,
body main #aperçusProjets .modal-footer button:hover {
  background-color: #061681 !important;
  transition: 0.7s;
}
body main #aperçusProjets .mysql {
  transform: scale(1) !important;
  transition: 0.7s;
  width: 3em;
  color: #061681;
  border: none;
}
body main #aperçusProjets .mysql:hover {
  transform: scale(1.5) !important;
  transition: 0.7s;
  color: darkgoldenrod;
}
body main #aperçusProjets .mysql:hover {
  transform: none !important;
}
body main #aperçusProjets ul {
  list-style: square;
}
body main #technos {
  background-image: url(./images/workspace.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
  border: 5vw solid #061681;
}
body main #logosTechnos i,
body main #logosTechnos #mysql {
  transform: scale(1) !important;
  transition: 0.7s;
}
body main #logosTechnos i:hover,
body main #logosTechnos #mysql:hover {
  transform: scale(1.5) !important;
  transition: 0.7s;
  color: darkgoldenrod;
}
body main #logosTechnos #mysql {
  width: 5em;
  color: #061681;
}
body main #contact {
  background-image: url(./images/photo_large.jpeg);
  background-position: center;
  background-size: cover;
  height: 100vh;
}
body main #contact i {
  transform: scale(1) !important;
  transition: 0.7s;
}
body main #contact i:hover {
  transform: scale(1.5) !important;
  transition: 0.7s;
  color: darkgoldenrod;
}
body main #contact #textesContactRow {
  margin: auto 0;
}
body main #contact #textesContact {
  background-color: rgba(98, 102, 144, 0.5);
  font-size: 20px;
}/*# sourceMappingURL=style.css.map */