/* Code par Tanguy Genier. https://wabers.ch/membre/tanguy/ */
@font-face{
  font-family: "OpenSans";
  src: url(fonts/Roboto/Roboto-Regular.ttf) format("truetype");
}
@font-face{
  font-family: "bold";
  src: url(fonts/Roboto/Roboto-Bold.ttf) format("truetype");
}
@font-face{
  font-family: "light";
  src: url(fonts/light.ttf);
}
@font-face {
  font-family: 'montserrat';
  src: url(fonts/montserrat/Montserrat-Regular.ttf);
}
@font-face {
  font-family: 'Bungee';
  src: url(fonts/Roboto/Roboto-Medium.ttf);
}
.sect1 h1::selection, .theTitle::selection, .sect1 .background::selection, .h1-wallpaper::selection, .big-h1::selection,  
.h1-wallpaper, .sect1 h1, .theTitle, .sect1 .background, .h1-wallpaper, .big-h1, .statu-see a{
  background: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}
.first-body{
  display: none!important;
}
.two-body{
  display: block!important;
}
html{
  /* scroll-behavior: smooth; */
  transition: all 3s ease-in-out .5s;
  overflow-x: hidden!important;
}
body{
    font-family: "OpenSans", sans-serif;
    font-size: 180%;
    background: #000;
    color:#fff;
    max-width: 100%;
    margin: 4px 4px 4px 4px;
    transition: transform 0s ease-out 5s;
    overflow-x: hidden!important;
}
*::-webkit-scrollbar{
    width:0em;
    background: transparent;
}
/* *::selection, span::selection{
  background: #0000;
} */
.big-h1::selection{
  background: transparent;
}
/* HEADER */
header.closed{
  visibility: hidden;
  opacity: 0;
}
header.opened{
  visibility: visible;
  opacity: 1;
}
#hrContainer{
  mix-blend-mode: difference;
  padding: 1.5% 0 !important;
  cursor: pointer;
  /* background: #000; */
  position:fixed;
  /* display: flex; */
  top: 0;
  left: 0%;
  width: 100%;
  z-index: 1000;
}
#hrContainer span{
  position:fixed;
  margin-block-start: 0.05em;
  margin-top: 1em;
  top: 0em;
  left: 2.5%;
  /* transform: translateX(-50%); */
  opacity: 0;
  font: 100 70% 'montserrat';
  z-index: 1100;
  transition: all .5s;
  width: 100%;
}
#hrContainer span.overed{
  opacity: 1;
}
#closedHr, .closedHr{
  mix-blend-mode:difference;
  position:fixed;
  top: .5em;
  left: 2.5%;
  align-items: center;
  width: 95%;
  /* padding: 5% 0;
  box-sizing: content-box; */
  border-radius: 50px;
  z-index: 1100;
  transition: width .5s;
  margin-block-start: 0em;
  margin-block-end: 0em;
  /* padding-block-start: 0.5em;
  padding-block-end: 0.5em; */
  transition: all .3s ease-in-out;
}
/* .closedHr{
  margin-block-start: 0.5em;
} */
#closedHr.overed{
  /* width: 91.2%; */
  opacity: .3;
}
#hrContainer.closing{
  transform: translateY(-100px);
  display: none;
}
header{
  width: 100%;
  height: 100%;
  margin: -14px -0;
  padding: 8px 0;
  transform: translateY(-5px);
  /* display: none; */
  /* justify-items: center; */
  position: fixed;
  background: #0000;
  transition: ease-in-out 0.5s;
  z-index: 1000;
}
.grid-container{
  /* margin: auto; */
  /* height: 50%; */
  width: 100%;
  position: absolute;
  left: 0;
  top: 45%;
  z-index: 200;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  grid-template-columns: 48% 2% 48%;
}
/* header.scroll{  margin-top: -10%;opacity: 0;transform: translateY(-10px);} */
/* header.srolled{  margin-top: 0%;opacity: 1;transform: translateY(-10px);} */
header h3{
  text-transform: uppercase;
  padding: 5% 0 7% 0;
  text-align: center;
  justify-items: center;
  text-align: left;
  font-size: 150%;
  margin-block-start: 0em;
  margin-block-end: 0em;
  cursor: default;
}
/* header ul{
  width: fit-content;
  margin: 0 0 0 15%;
} */
header ul li{
  list-style-type: none;
  padding: 1.75% 0%;
}
header ul li a{
  padding: 1.75% 0%;
  font-size: 125%;
  text-align: left;
}
header a:hover{
  text-decoration: underline;
}
header a[type="email"]{
  font-size: 100%;
  padding: 5% 0;
  letter-spacing: normal;
}
header #background{
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: -70%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 600%;
  font-family: "bold";
  font-weight: bolder;
  font-style: italic;
  transition: 1s ease;
}
header #background.show{
  visibility: visible;
  opacity: .1;
}
header .copyr{
  margin-top: 0%;
  font: lighter normal 50% 'OpenSans', sans-serif;
}
h1{
  font-weight: bolder;
  /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}
a{
  color: #fff;
  text-decoration: none;
}
section{
  width: 100%;
  z-index: 2;
}
.first-main{
  transition: all 1s;
}
.first-main.darker{
  opacity: 0.2 !important;
}
/* .main.less{animation: none;} */
.main{
  transition: filter 1s;
  /* filter: blur(0px); */
  opacity: 1;
}
.first-main.blured{filter: blur(20px);opacity: .7;}
/* .main{
  animation: start 2s ease-out 12s both;
}
@keyframes start{
  0%{
      margin-top: 0vh;
  }
  100%{
      margin-top: -5vh;
  }
} */
@keyframes start-opacity{
  0%{
    opacity: 0;
  }
  75%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
/* .two-body{
  animation: start 2s ease-out 1500ms both;
} */
.sect1{
    animation:none;
    /* min-height: 93vh; */
    height: 100vh;
    max-width: 100vw;
    transition: 1s all;
    overflow: hidden;
    /* filter: blur(0px);
    opacity: 1;
    z-index: -1; */
}
.sect1.scrolled{opacity: 0;}
/* .h1-wallpaper-box{
  position: fixed;
  top: 0;
  left: 0%;
} */
.h1-wallpaper{
  /* position: fixed; */
  position: relative;
  top: -3%;
  left: -5%;
  width: 110%;
  z-index: -2;
  transition: margin 1s ease-out;
  filter: blur(2.5px);
}
.sect1 #randomWallpaper2{
  transform: rotate(180deg);
}
/* .sect1::after{
  content: "";
  display: block;
  position: static;
  background:linear-gradient(to bottom, #0000 1%, #fff 40%);
  min-height: 1%;
  min-width: 100%;
  z-index: 1;
} */
section, .h1-wallpaper, #hrContainer{
  animation: start-opacity 6s normal both;
}
.h1-container{
  position: fixed;
  top: 50%;
  left:0%;
  width: 100%;
  /* transform: translate(0%, -100%); */
}
.sect1 h1, .theTitle{
  font-size: 520%;
  line-height: 0;
  color: #fff;
  width: 100%;
  text-align: center;
  z-index: -1;
  /* transition: margin .1s ease-out, opacity .5s; */
  transition: all .25s ease-out, opacity .5s;
  font-family:"Bungee", sans-serif;
  text-transform: uppercase;
  margin-block-start: 0;
  margin-block-end: 0;
  cursor: default;
}
.sect1 .message-box{
  text-align: center;
  font-size: 50%;
  position: fixed;
  bottom: 2%;
  left: 0;
  width: 100%;
  animation: start-opacity 10s reverse both;
}
.sect1 .message{
  opacity: .1;
}
.sect1 .background{
  position: fixed;
  top: 40%;
  left:50%;
  font-size: 520%;
  padding: 3%;
  height: 100%;
  color: transparent;
  z-index: -2;
  transform: translate(-50%, -50%);
}
.sect1 .background.addAnimation{
  animation: start-h1-line-bg 4s normal both;
}
@keyframes start-h1-line-bg{
  0%{
    background-color: #000;
  }
  90%{
    background-color: #000;
  }
  100%{
    background-color: transparent;
    visibility: hidden;
  }
}
.sect1, body, html{
  animation: none;
}
.h1-line{
  position: fixed;
  top:50%;
  z-index: -3;
  /* width: 25%; */
  /* transform: translateY(-50%); */
  border-color: white;
  animation: start-h1-line 4s normal both .5s;
  opacity: 0;
}
.h1-line.left{
  left: 5%;
}
.h1-line.right{
  right: 5%;
}
@keyframes start-h1-line{
  0%{
    width: 0%;
    opacity: 0;  
  }
  30%{
    opacity: 1;  
  }
  70%{
    width: 27%;
    opacity: 1;  
  }
  100%{
    width: 0%;
    opacity: 0;  
  }
}
#h1::before, #h1::after{
    /* content: attr(data-text); */
    /* content: "WΛbΞrs"; */
    animation: redblue alternate infinite;
    animation-delay: 3.5s;
    animation-duration: 5s;
    z-index: -5;
    filter: brightness(200%);
    opacity: 0;
    position: fixed;
    top: 50%;
    left:0%;
    text-align: center;
    width: 100% !important;
  }
  #h1::before{
    color: rgba(130, 0, 0, .5);
  }
  #h1::after{
    color:rgba(0, 0, 130, .5);
    animation-direction: alternate-reverse;
  }
  @keyframes redblue{
    0%{
      top:-4px;
      left: 0px;
      opacity: 0;
    }
    15%{
      top:4px;
      left: -2px;
      opacity: 1;
    }
    25%{
      top:-4px;
      left: -4px;
      opacity: 1;
    }
    37%{
      top:-1px;
      left: -3px;
      opacity: 1;
    }
    50%{
      top: -4px;
      left: 8px;
      opacity: 1;
    }
    62%{
      top:-4px;
      left: -4px;
      opacity: 1;
    }
    75%{
      top: 2px;
      left: -2px;
      opacity: 1;
    }
    90%{
      top:2px;
      left: -3px;
      opacity: 1;
    }
    100%{
      top: 6px;
      left: -10px;
      opacity: 0;
    }
  }
.sect2{
  background: #000;
  /* margin: 102vh 0 0 0; */
}
.sect2 .container{
  width: 100%;
  overflow: hidden;
}
.sect2 .container .separate.un{
  min-height: 60vh;
  background: #fff;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.sect2 h4{
  margin-block-start: 0;
  margin-block-end: 0;
  /* font: 700 100% 'monserrat'; */
}
#presentationText1{
  z-index: 15;
  text-align: center;
  padding: 0;
  position: relative;
  top: 0%;
  left: 0;
  margin: 22.5vh auto;
  display: grid;
  justify-items: center;
  width: 80%;
  max-width: 80%;
}
#presentationText3 {
  border-radius: 2px;
  padding: 1%;
  background: #000;
  z-index: 99;
  mix-blend-mode: difference;
  margin: 10% 0 0% 0;
  /* width: 105%; */
}
.story{
  position: relative;
  top: -5%;
  left: 0%;
  text-align: justify;
  color: #000000aa;
  /* background: #fff7; */
  padding: 2%;
  border-radius: 50px;
}
.rotated, #bgGoX{
  position: absolute;
  width: fit-content;
}
.rotated, .rotated div, #bgGoX{
  transition: all 2.5s ease-out;
}
#bgGoX{
  opacity: .3;
  display: inline;
  font: normal bolder 800% "Bungee";
  background: linear-gradient(90deg, rgb(0, 13, 130), rgb(110, 0, 150)95%);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  z-index: -1;
  top: 110%;
  left: 40%;
}
#backgroundRotatedText2{
  transition: transfrom .4s ease-out;
  top: 0;
  left: -20%;
}
.sect2 .container .rotated div{
  display: inline-block;
  font: normal bolder 400% "Bungee";
  color:rgb(110, 0, 150);
  /* background: linear-gradient(90deg, rgb(0, 13, 130), rgb(110, 0, 150)95%);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent; */
  opacity: .4;
  z-index: -1;
}
.colored{
  background: linear-gradient(90deg, rgb(0, 26, 255), rgb(183, 0, 255)95%);
  background-size: 200%;
  background-position: center;
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: normal!important;
  display: inline;
}
.separate .presentation.text{
  text-align: center;
}
.separate.un .presentation.text span.text{
  color: #000;
  z-index: 99;
}.separate.deux .presentation.text span.text{
  mix-blend-mode: difference;
  padding: 15% 0;
  z-index: 99;
}
.presentation span.thin{font-family: "light", sans-serif;color: #000;z-index: 99;}
/* .separate:nth-child(2) .presentation span{
    background: rgba(0, 110, 255, 0.85);
} */
/* SECTION N*3 */
.sect3{
  background:#000;
  /* opacity: 0; */
  transition: opacity 0.5s;
  /* overflow: hidden; */
  z-index: 15;
}
/* .sect3.scrolled{
  opacity: 1;
} */
/* h1 sect3 */
.big-h1{
  text-align: center;
  margin-left: 10px;
  margin-block-start: 0em;
  font-size: 250% !important;
  /* padding-top: 0.5em; */
  margin-block-end: 0.5em;
  background-clip: text;
  background: linear-gradient(135deg, rgb(255, 0, 234), rgb(0, 4, 255));
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
}
  /* Section n*3 h1, expliquations... ect */

  .sect3 .container-exp{
    margin: 0% 0 5% 10%;
    padding: 5% 0 0 0;
  }
  .sect3 .container-exp .big-h1{
    text-align: left;
    margin-left: 0;

    /* margin-left: 10px; */
    margin-block-start: 0em;
    font-size: 200%;
    padding-top: 0.5em;
    margin-block-end: 0.5em;
  }
  .sect3 .container-exp .text-exp{
    line-height: 130%;
    width: 90%;
    /* font-size: 150%; */
    /* font-weight: bolder; */
  }
  .border-top, .border-bottom{
    font-size: 70%;
    padding-top: 10px;
    line-height: 110%!important;
  }
  .border-top{border-top: #fff solid 1.5px;width: 100%;}
  .border-bottom{border-bottom: #fff solid 1.5px;width: fit-content;}
.sect3 .container{
  scroll-snap-type: both proximity;
  overflow: hidden;
  width: 100vw;
}
/* Project: Général */
  .project-container{
    width: 70%;
    margin: 0 auto;
  }
  .project-container .introduction{
    max-height: fit-content;
    overflow: hidden;
  }
  .project-container h1{
    font-size: 200%;
  }
  .project-container h1.case-depart{
    background: linear-gradient(135deg, rgb(255, 0, 0), rgb(0, 0, 0));
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
  }
  .project-container h1.dealj{
    background: linear-gradient(45deg, rgb(0, 153, 255), rgb(255, 0, 149));
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
  }
  .project-container h1.gym-crassier{
    background: linear-gradient(45deg, rgb(255, 136, 0), rgb(251, 255, 0));
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
    /* salledegym_003-2-1200x824.2.png */
  }
  .project-container .text{
    font-size: 90%;
    font-style: italic;
    position: relative;
    left: 40%;
    width: 60%;
    padding: 0 0 6% 0;
  }
  .project-box{
    display: flex;
    height: 100%;
    overflow: hidden;
  }
  .statu-see{
    display: grid;
    align-items: center;
    text-align: center;
    height: 60%;
  }
  .statu-see .a-box{
    opacity: .25;
    transition: .75s ease;
    /* transform: rotate(270deg); set in js */
    font-size: 300%;
    line-height: 225%;
    text-align: center;
    width: 100%;
    height: min-content;
    /* margin: 50% 0 0 0; */
  }
  .statu-see .a-box:hover{opacity: .5;}
  .sect3 .project{
    scroll-snap-align: start;
    display: block;
    padding: 5% 0;
    width: 100%;
    /* transform: translateX(0%); */
    height: 65%;
    display: grid;
    grid-template-rows: 100%;
    align-items: center;
    margin: 10px .25% 10px .25%;
    background-size: 115%!important;
    filter: sepia(80%);
    transition: filter .7s ease, transform 1s ease .2s;
  }
  .sect3 .project:hover{
    filter: sepia(0%);
  }
  .sect3 .project h1{
    position: relative;
    padding-bottom: 25px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .sect3 .project .text{
    padding:0 2.5% 0 25px;
    max-width: 80%!important;
    position: relative;
    width: fit-content;
    mix-blend-mode: difference;
  }
  .sect3 .text .statu, .border-top{
    margin-block-start: 5px;
    border-top: #fff solid 1.5px;
    line-height: 225%;
  }
  .sect3 .h1-wallpaper{
    z-index: 0;
  }
/* SITES = PROJECT UN/DEUX/TROIS/QUATRE */
  /* Project un: Case départ*/
  .sect3 .project.un{
    background: url(images/897104.jpg);
    /* background-position-x: right; */
  }
  .sect3 .project.un h1,.sect3 .project.un .text{
    /* top: 0%;
    left: 10%; */
    text-align: center;
    margin: 0 auto;
  }
  /* Project deux: DealJ */
  .sect3 .project.deux{
    background: url(images/soirée.png);
    background-position: top;
    background-size: cover;
  }
  .sect3 .project.deux h1,.sect3 .project.deux .text{
    text-align: center;
    margin: 0 auto;
  }
  /* Project trois: MyClass */
  .sect3 .project.trois{
    background: linear-gradient(90deg,#000 49.9%, #fff 50%);
    margin-left: -25.5px;
    background-size: 100%!important;
  }
  .sect3 .project.trois h1,.sect3 .project.trois .text{
    transform: translateX(25.5px);
    text-align: center;
    margin: 0 auto;
    mix-blend-mode: difference;
  }
  /* Project quatre: Gym de Crassier */
  .sect3 .project.quatre{
    background: url(images/salledegym_003-2-1200x824.2.png);
    background-position: top;
    background-size: cover;
  }
  .sect3 .project.quatre h1,.sect3 .project.quatre .text{
    text-align: center;
    margin: 0 auto;
  }

/* MEMBRES */
  .container.deux{
    /* transform: rotate(270deg); */
    /* display: grid; */
    /* width: 80%; */
    /* height: 100vw; */
    /* grid-template-columns: 33.333% 33.333% 33.333%; */
    /* grid-template-columns: 50% 50%; */
    /* grid-gap: 5%; */
    max-width: 50%;
    width: fit-content;
    margin: 0 auto;
    overflow: visible;
  }
  .sect3 .container-exp{
    z-index: 20;
  }
  .sizer{
    width: fit-content;
    /* transform: translateY(-55%); */
    z-index: 1;
  }
  .categorie{
    text-align: center;
    background: linear-gradient(135deg, rgb(255, 0, 234), rgb(0, 4, 255));
  }
  /* .cv.Enzo{
    margin: 0 auto !important;
    display: block;
  } */
  .cv{
    display: inline-block;
    border-radius: 2.5px;
    width: 48.2%;
    margin: 1% .5%;
    height: 230px;
    overflow: hidden;
    /* background: linear-gradient(to bottom, #111 70%, #000); */
    background-size: 300%;
    background: #111;
    transition: background-color .2s ease-out;
    /* margin: .5%; */
  }
  .sect3 .cv h1{
    text-align: center;
    /* margin-left: 3%; */
  }
  .sect3 .cv .text{
    font-size: 90%;
    text-align: center;
  }
  .cv.enligne:hover{
    background: #333;
  }
  .cv.developpement{
    filter:grayscale(100%);
  }.cv.developpement:hover{
    background: rgb(19, 19, 19)
  }

/* CONTACT */
  .sect4{
    height: 100vh;
    background: url(images/macbookpro2.jpg) #000 repeat;
    background-size: cover;
    transition: background-position 1s;
    background-position:30% 50%;
    overflow: hidden;
    /* box-shadow: #000 0 0 1000000000em inset; */
    z-index: 0;
  }
  .sect4::after{
    content: "";
    display: block;
    position: relative;
    top: -100%;
    left: 0;
    background:linear-gradient(to top, #0000 1%, #000 40%);
    min-height: 30%;
    min-width: 100%;
    z-index: 1;
  }
  .sect4 h1{
    display: block;
    text-align: center;
    background-clip: text;
    background: linear-gradient(135deg, rgb(255, 0, 0)1%,rgb(255, 255, 255) 5%, rgb(0, 89, 255) 50%);
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
  }
  .sect4 .sizer{
    height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-40%);
    display: grid;
    text-align: center;
    z-index: 2;
    grid-template-rows: 30% 10% 50%;
  }
  a[type="email"]{
    /* font-weight: bolder; */
    font: normal 300% 'Archivo Narrow', arial;
    letter-spacing: -5px;
    transition: margin .01s;
  }
  a[type="email"] .underline{
    width: 0%;
    height: 5px;
    margin: -5px 0 0 0;
    background: white;
    transition: 1s ease-in-out;
  }
  a[type="email"]:hover .underline{
    width: 100%;
  }
  .copyr{
    margin-top: 40%;
    position: relative;
    bottom: 10%;
    font: 100 normal 70% 'OpenSans', sans-serif;
    color: #fff5;
  }
  .resSoc{
    color: #fff9;
    word-spacing: 1em;
  }
  .sponsors{
    font-size: 70%;
    padding: 2% 0 0 0;
    opacity: .6;
    transition: all .3s;
    cursor: default;
  }
  .sponsors:hover{
    opacity: 1;
  }
  .sponsors a{
    text-shadow: black 0px 1.5px 1px;
  }
/* Iphone 6/7/8 enfin plus pour le moment parce que c'est tard et pi flemme un peu. 375px*/
@media only screen and (min-width:0px) and (max-width:735px){
  body{
    font-size: 120%;
  }
  /* HEADER */
      /* #randomWallpaper1{
        transform: rotate(90deg);
        top: -10%;
        left: -35%;
        width: 220%;
      } */
      /* #randomWallpaper2,  */
      #randomWallpaper3, #randomWallpaper4{
        display: none;
      }
    .sect1 h1{
      font-size: 400% !important;
      /* top: 30%; */
    }
    .sect1 div hr{
      display: none;
    }
    /* .big-h1{
      font-size: 150% !important;
    } */
    #hrContainer span{
      opacity: 1;
    }
    header #background{
      display: none!important;
    }
    .first-main.darker{
      opacity: 1 !important;
    }
    .grid-container{
      grid-template-columns: 100%;
    }
    header ul{
      padding-inline-start: 0px;
      text-align: center;
    }header ul li{
      padding-inline-start: 0px;
      text-align: center;
    }header .hr-middle{
      width: 40%;
    }

  /* Sect2 */
    .sect2 .container .rotated{
      /* display:none; */
      opacity: .25;
      margin-left: auto;
      margin-right: auto;
    }
    .rotated{
      display: none;
    }
    #bgGoX{
      font: normal bolder 500% "Bungee";
    }

  /* Sect3 */
    /* Projets */
      .project-container .text{
        left: 0%;
        width: 100%;
      }
      .project-box {
        height: 70%;
      }
      .statu-see {
        display: none;
    }
    /* Membres */
      .container.deux{
        max-width: initial;
        width: 80%;
      }
      .container.deux .sizer{
        width: 120%;
        padding: 0 0 50% 0;
        /* transform: translateY(-20%); */
      }
      .container.deux .cv{
        width: 80% !important;
        height: 150px;
        text-align: center;
        padding: 0 0 3% 0;
      }
    .sect3 .container h1{
      width: initial;
    }
    /* H1 */
    /* Sect3 */
      /* .sect3 h1{
        font-size: 150% !important;
      } */
    .border-top.n1{
      padding: 10% 0 10% 0;
      text-align: center;
      font-size: 80%;
    }
    .sect3 .project.trois h1, .sect3 .project.trois .text {
      transform: translateX(0px);
    }
    /* Sect4 */
    .sect4 .big-h1{
      text-align: left;
    }
    .sizer{
      height: 100%;
      width: fit-content;
      /* transform: translateY(-12%); */
    }

  /* Sect4 */
    a[type="email"] {
      font: normal 220% 'Archivo Narrow', arial;
      letter-spacing: 0px;
      transition: margin .01s;
    }
}
@media only screen and (min-width:667px) and (max-width:1000px){
  body{
    font-size: 150%;
  }

  /* HEADER */
  .grid-container{
    grid-template-columns: 48% 2% 48%;
    margin: 5% 0 0 0;
  }
  header .hr-middle{
    width: initial;
  }
  /* SECT1 */
    /* H1 */
    .sect1 h1{
      font-size: 350% !important;
      /* top: 30%; */
    }
    .sect1 div hr{
      display: initial;
    }
    @keyframes start-h1-line{
      0%{
        width: 0%;
        opacity: 0;  
      }
      30%{
        opacity: 1;  
      }
      70%{
        width: 17%;
        opacity: 1;  
      }
      100%{
        width: 0%;
        opacity: 0;  
      }
    }  

  /* Sect3 */
    /* Membres */
    .container.deux{
      max-width: initial;
      width: 80%;
    }
    .container.deux .sizer{
      width: 120%;
      height: 200%;
      /* padding: 0 0 50% 0; */
      /* transform: translateY(-20%); */
    }
    .container.deux .cv{
      width: 80% !important;
      height: 150px;
      text-align: center;
      padding: 0 0 3% 0;
    }
  }
/* ------------------------------ Uploading CSS File ------------------------------------- */
.first-body{
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    height: 100%;
    width: 100%;
    background: rgb(0, 0, 0);
    animation: none 2s;
  
    font-style: italic;
    color: #fff;
    font-family: sans-serif;
  }
  @keyframes opacity{
    0%{opacity:0};
    100%{opacity: 1;}
  }
  .first-body .localizer{
    position: fixed;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: #fff;
  }
  .first-body h2{
    text-align: center;
    animation: changeShadow .3s alternate infinite linear;

    color: #fff;
    font-size: 130%;
    font-size: 200%;
    font-family: sans-serif;
  }
  @keyframes changeShadow{
    0%{
      text-shadow: blueviolet 0px 4px 1px;
    }
    100%{
      text-shadow: rgb(226, 43, 119) 0px 4px 1px;
    }
  }
  .first-body h1{
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 100%;
    margin-block-start: 0;
    margin-block-end: 0;
    width: fit-content;
  
    font-style: normal;
  }
  .first-body .explains{
    text-align: center;
    color: #fff;
    width: 100%;
    opacity: .3;
  
    padding-top: 10%;
  }
  .first-body .explains a{
    text-decoration: underline;
    color: #fff;
  }