/* #0D4BAD */
/* #142453 */
/* #1BCAB1 */
/* #343434 */
/* #F0F0F0 */
/* #FCFCFC */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@500&display=swap');

/*____________________ CLASSES DE FLEXBOXES ____________________ */

.flex{display: flex}
.column{flex-direction: column}
.row{flex-direction: row}
.reverse{flex-direction: row-reverse}
/* alignement horizontal */
.justify-center{justify-content: center}
.justify-between{justify-content: space-between}
/* alignement vertical */
.align-start{align-items: flex-start}
.align-center{align-items: center}
.align-end{align-items: flex-end}
/* tailles de colonnes */
.item-50{flex-basis: 50%}
.item-65{flex-basis: 60%}
.item-35{flex-basis: 33%}
.item-45{flex-basis: 40%}

/*____________________ STYLES GÉNÉRIQUES ____________________ */

body{
  margin: 0 auto;
  width: 100%;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 23px;
  color: #343434;
  background: url('../img/silasheimlich-visuel_intro_background.png') top no-repeat #0D4BAD;
  background-size: contain;
  overflow-x: hidden !important;
}

  header{
    padding: 60px 128px;
    height: 175px;
    color: #fff;
    font-size: 20px;
  }
    header a{
      text-decoration: none;
      color: #fff;
      font-size: 18px;
    }
    header p{margin: 0 0}
    header img{margin-right: 10px}

  main{overflow-x: hidden}
    main section{padding: 0 128px}
      main h1{font-size: 90px; color: #fff; margin: 80px 0px 8px 0px}
      main h2{font-size: 90px; margin: 0px auto 100px auto; text-align: center}
        main h2::after {
          content:' ';
          display: block;
          width: 255px;
          height: 26px;
          background: #1BCAB1;
          border-radius: 25px;
          margin: -32px auto;
          box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.16);
        }
      main h3{font-size: 90px; margin: 0px auto 100px auto; text-align: center}
        main h3::after {
          content:' ';
          display: block;
          width: 255px;
          height: 26px;
          background: #1BCAB1;
          border-radius: 25px;
          margin: -32px auto;
          box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.16);
        }

  footer{background: #FCFCFC}
   footer a {
     text-decoration: none;
     color: #343434;
     font-size: 18px;
   }

   .loader{
      position: fixed;
      z-index: 99;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #142453;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .loader > img {width: 300px}
   .loader-hidden {animation: fadeOut 1s; animation-fill-mode: forwards}
   @keyframes fadeOut {
     100% {
       opacity: 0;
       visibility: hidden;
     }
   }

/*____________________ STYLES SPÉCIFIQUE ____________________ */

/* Header */
.logo{
  font-weight: 700;
  transition: font-weight 0.9s, font-size 0.5s;
}
.logo:hover{font-size: 19px}

.bt-contact{
  margin-left: 60px;
  padding: 12px 18px 11px 18px;
  background: #fff;
  border-radius: 8px;
  color: #142453;
}
.bt-contact:hover{
  background: #F0F0F0;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

/* Intro */
.intro {margin-bottom: 450px}
.intro p{
  font-size: 28px;
  line-height: normal;
  color: #fff;
}

/* Work */
#work h2{color: #fff}
#work a{
  text-decoration: none;
  font-family: 'Prompt', Arial, sans-serif;
  color: #142453;
  font-size: 90px;
  font-weight: 500;
  padding: 22px 0px 22px 0px;
  transition: text-shadow 0.7s, font-size 0.7s;
}
#work a:hover{
  font-size: 95px;
  color:#fff;
  text-shadow: 6px 6px 30px rgba(11, 6, 72, 0.5);
}
#work img{
  margin-left: 100px;
  border-radius: 15px;
  position: absolute;
  box-shadow: 6px 6px 30px rgba(0, 0, 0, 0.3);
}
#work div{margin-top: 30px}

#p2{margin-top: 140px}
#p3{margin-top: 280px}
#p4{margin-top: 420px}
#p5{margin-top: 560px}
#p6{margin-top: 700px}

.hide{display: none}

/* About me */
.about{
  padding-top: 300px;
  padding-bottom: 250px;
  background: #FCFCFC;
  clip-path: polygon(0 25%, 100% 0, 100% 75%, 0% 100%);
}
.about h3{
  margin-top: 150px;
  color: #0D4BAD;
}
.about p{line-height: normal}

#parcours{margin: 40px 0px 30px -38px}
#photo_silas{
  margin-left: 100px;
  padding-top: 80px;
  filter: drop-shadow(30px 15px 65px rgba(0, 0, 0, 0.18));
  z-index: 1;
  position: relative;
}
.over-hidden{}

.bt-cv{
  display: block;
  width: 324px;
  padding: 12px 18px 12px 18px;
  background: #0D4BAD;
  border-radius: 10px;
  text-decoration: none;
  line-height: normal;
  text-align: center;
  color: #fff;
  z-index: 10;
  position: relative;
}
.bt-cv img{margin: 4px 10px -5px 0px}
.bt-cv:hover{
  background: #142453;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

/* Webdesign */
.webdesign{
  margin-top: -450px;
  padding-top: 450px;
  padding-bottom: 200px;
  background: #1BCAB1;
  clip-path: polygon(0 22%, 100% 0, 100% 100%, 0% 100%);
}
.webdesign h2{
  color: #fff;
}
.webdesign h2::after{
  content:' ';
  display: block;
  width: 255px;
  height: 26px;
  background: #0D4BAD;
  border-radius: 25px;
  margin: -32px auto;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.16);
}
.webdesign p{
  margin-bottom: 60px;
  line-height: normal;
  color: #fff;
}
.webdesign-img{
  margin-left: 100px;
}

/* Contact me */
.contact{
  margin-top: -400px;
  padding-top: 350px;
  padding-bottom: 200px;
  background: #FCFCFC;
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0% 100%);
}
.contact h3{
  color: #0D4BAD;
  margin-bottom: 130px
}
.contact p{line-height: normal}
.contact a{
  display: block;
  text-align: right;
  text-decoration: none;
  color: #343434;
  margin-top: 25px;
}
.contact img{margin-right: 15px; margin-bottom: -5px}

/* Footer */
.footer{padding: 60px 128px; margin-top: -2px}
.footer p{margin-bottom: 0px}
.bt-top img{
  display: block;
  margin-left: auto;
  margin-right: auto
}
.logo-ft{font-weight: 700}

/*____________________ MEDIA QUERIES ____________________ */

/* Inférieur à 1550px */
@media screen and (max-width: 1550px) {
  /* Intro */
  .intro {margin-bottom: 400px}

  /* Work */
  #work a{font-size: 80px}
  #work a:hover{font-size: 85px}
  #work img{margin-left: 0px}

  /* Webdesign */
  .webdesign {padding-bottom: 400px}
  .webdesign img{position: absolute}
}

/* Inférieur à 1400px */
@media screen and (max-width: 1400px) {
  /* Header */
  header{padding: 60px 128px 0px 128px; height: 100px}

  /* Intro */
  .intro {margin-bottom: 350px}

  /* Work */
  #work a{font-size: 70px}
  #work a:hover{font-size: 75px}
  #work img{margin-left: 0px; width: 400px}
}

/* Inférieur à 1200px */
@media screen and (max-width: 1200px) {
  /* Header */
  header{padding: 60px 50px 0px 50px}
  /* Main */
  main section{padding: 0 50px}
  /* Footer */
  .footer{padding: 60px 50px}
}

/* Inférieur à 1100px */
@media screen and (max-width: 1100px) {
  body {background: url('../img/silasheimlich-visuel_intro_background.png') top/150% no-repeat #0D4BAD}
  /* Header */
  header p{display: none}
  header img{margin-right: 0}
  .bt-contact{margin-left: 30px}

  /* Work */
  #work img{margin-left: 0px; width: 350px}
  #work a{font-size: 60px}
  #work a:hover{font-size: 65px}
  #p2{margin-top: 110px}
  #p3{margin-top: 230px}
  #p4{margin-top: 350px}
  #p5{margin-top: 450px}
  #p6{margin-top: 550px}

  /* About me */
  .about{padding-top: 100px; padding-bottom: 800px; clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%)}
  #photo_silas{display: block; position: absolute; margin: -300px 0 0 400px; height: 780px}

  /* Webdesign */
  .webdesign {padding-top: 250px; padding-bottom: 250px; clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%)}
  .webdesign img{display: block; position: relative; height: 700px; margin: 0 auto}
  .webdesign-img{margin-left: 0px}

  /* Contact */
  .contact {padding-top: 300px; clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%)}
  .contact a{text-align: left}
  .contact p{max-width: 500px}

  .flex-column{flex-direction: column}
}

/* Inférieur à 980px */
@media screen and (max-width: 980px) {
  /* Work */
  #work img{opacity: 0%}
  #work div{flex-basis: 0%; text-align: center; margin: 0 auto}
  .hide2{display: none}
}

/* Inférieur à 780px */
@media screen and (max-width: 780px) {
  body {background: url('../img/silasheimlich-visuel_intro_background.png') top/220% no-repeat #0D4BAD}
  main h1{font-size: 70px; margin-top: 30px}
  main h2{font-size: 70px}
  main h3{font-size: 70px}
  main p{font-size: 18px}
  main a{font-size: 20px}
  /* About me */
  .about{padding-bottom: 700px}
  #parcours{height: 350px}
  #photo_silas{display: block; position: absolute; margin: -300px 0 0 300px; height: 600px}
  .bt-cv img{width: 23px}
  /* Webdesign */
  .webdesign img {max-width: 102%; max-height: 102%; height: auto; display: block;}
  /* Footer */
  .hide3{display: none}
}

/* Inférieur à 640px */
@media screen and (max-width: 640px) {
  body {background: url('../img/silasheimlich-visuel_intro_background.png') top/220% no-repeat #0D4BAD}
  main h1{font-size: 60px; margin-top: 30px}
  main h2{font-size: 60px}
  main h3{font-size: 60px}
  main p{font-size: 18px}
  main a{font-size: 18px}
  /* Intro */
  .intro p{font-size: 22px}
  /* About me */
  .about{padding-bottom: 700px}
  #parcours{height: 300px}
  #photo_silas{display: block; position: absolute; margin: -300px 0 0 300px; height: 580px}
  .bt-cv{width: 280px; padding: 10px 18px 10px 18px}
  .bt-cv img{width: 20px}
  /* Contact me */
  .contact{padding-bottom: 100px}
}

/* Inférieur à 580px */
@media screen and (max-width: 580px) {
  /* About me */
  #parcours{height: 260px}
  #photo_silas{margin: -200px 0 0 200px; height: 480px}
  .bt-cv {width: 250px; margin-top: 20px}
}

/* Inférieur à 510px */
@media screen and (max-width: 510px) {
  /* Header */
  header{padding: 25px 25px 0px 25px}
  .bt-contact{margin-left: 30px; padding: 12px 13px 11px 13px}
  /* Main */
  body {background: url('../img/silasheimlich-visuel_intro_background.png') top/270% no-repeat #0D4BAD}
  main section{padding: 0 25px}
  main h1{font-size: 45px; margin-top: 30px}
  main h2{font-size: 50px}
  main h3{font-size: 50px}
  main p{font-size: 18px; line-height: 17px}
  main h2::after {width: 230px; height: 22px; margin: -22px auto}
  main h3::after {width: 230px; height: 22px; margin: -22px auto}
  /* Intro */
  .intro p{font-size: 20px; line-height: 20px}
  /* Work */
  #work a{font-size: 53px}
  #work a:hover{font-size: 56px}
  /* About me */
  #parcours{height: 260px}
  #photo_silas{margin: -90px 0 0 60px; height: 480px}
  .bt-cv{margin: 0 auto; width: 290px}
  #parcours{max-width: 105%; max-height: 105%; height: auto; display: block; margin: 40px auto 30px -10px}
  /* Webdesign */
  .webdesign h2::after{width: 230px; height: 22px; margin: -22px auto}
  /* Footer */
  .footer{padding: 25px 25px 25px 25px; margin-top: -2px}
  .footer a{font-size: 14px}
}

/* Inférieur à 450px */
@media screen and (max-width: 450px) {
  #photo_silas{margin: -90px 0 0 30px; height: 470px}
}