html {
  width: 100%;
  /* background-color: rgb(99,255,0); */
  overflow-y: visible;
  overflow-x: hidden;
}


@font-face {
  font-family: "fat";
  src: url("../fonts/WorkSans-Black.woff2") format("woff2");
 }
 
@font-face {
  font-family:"heret";
  src: url("../fonts/HEretica_Regular.woff2") format("woff2");
}

@font-face {
  font-family:"cloud";
  src: url("../fonts/Cloud-Candy.woff2") format("woff2");
}

@font-face {
  font-family: "mtl";
  src: url("../fonts/NeueMontreal-Bold.woff2") format("woff2");
 }

 @font-face {
  font-family: "woarp";
  src: url("../fonts/PositiveWarp.woff2") format("woff2");
 }
 
 @font-face {
  font-family: "monuex";
  src: url("../fonts/MonumentExtended-Ultrabold.woff2") format("woff2");
 }
 
 @font-face {
  font-family: "comic";
  src: url("../fonts/Comic-Sans-MS.woff2") format("woff2");
 }
 

body{
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: rgb(0,25,231);
  font-size: 1rem;
 }

 @media screen and (max-width: 1000px) {
  body {
    font-size: 0.7rem;
  }
 }
 
 @media screen and (max-width: 600px) {
  body {
    font-size: 0.4rem;
  }
 }


/* SOMMET ET INFOS */

.top-band{
  width: 100%;
  height: auto;
  /* background-color: black; */
  /* position: relative; */
  top: 0%;
  overflow: hidden;
}

.containertoptext{
  margin: 0 auto;
  white-space: nowrap;
  padding-top: 3px;
  padding-bottom: 3px;  

  white-space: nowrap;
  animation: floatText 8s infinite linear;
  position: relative;
  top: 0%;
  left: 100%;
}



@keyframes floatText {
  to {
    transform: translateX(-380%);
  }
}

/* BANDELOGO */

.logocontain{
  flex-direction: row;
  width: 200%;

  display: flex;
  white-space: nowrap;

  transition: width ease-in-out 1s;

}

.logo{
  padding: 1em;
  width: 48%;

  transition: width ease-in-out 1s;
}

.logostretch{
  position:relative;
  top:0;
  left:0;
  height: 29em;
  width: 100%;
}

.surligne{
  transition: font-size ease-in-out 1s;
}


/* .surligne{
  transition: background-color .5s ease-in-out, color .5s ease-in-out, font-size .5s ease-in-out, white-space .5s ease-in-out, width .5s ease-in-out; } */

  




.presdiv{
  position: relative;
  white-space: normal;
}

 .presentation{
  /* position: absolute; */
  margin: .8em;
  width: 25em;
  margin-left: 40px;
}

.logo.switch-on{
  width: 54%;
}

.logocontain.switch-on{
  width: 100%;
}

.surligne.switch-on{
  font-size: 2.9em;
  line-height: 1.2em;
}



@media screen and (min-width: 600px) {
  
  .logocontain.switch-on{
    width: 100%;
  }

  .logocontain.switch-on .surligne{
    font-size: 2.9em;
    line-height: 1.2em;
  }
}

@media screen and (max-width: 600px) {

  .logocontain{
    flex-direction: column;
    width: 100%;
    pointer-events: none;
  }

  .logo{
    padding: 1em;
    width: 97%; 
  }

  .surligne{
    font-size: 2.9em;
    line-height: 1.2em;
  }

  
  }



    @media screen and (max-width: 1000px) {
      .logo.switch-on{
        width: 10%;
      }
    
      .logostretch{
        height: 38em;
      }
     }
     
     @media screen and (max-width: 600px) {
       .logo.switch-on{
         width: 1%;
       }
    
       .logostretch{
        height: 51em;
      }
    
       .logo{
         padding: .4em;
       }

       .presentation{
         margin: .8em;
       }
      }
    


  
 



/* UTILISATION */

.contwhatcan{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: rgb(135,255,29);
  position: relative;
  right: 0;
}

.paragwhatc{
  margin-left: 0.2em;
  width: 100%;
}

.imgwhat{
  height: 10%;
}

@media screen and (max-width: 1000px) {
  .imgwhat{
    position: absolute;
    bottom: 0%;
    right: 0%;
    height: 17em;
  }
 }
 



.contboutons{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: fit-content;
  width: 100%;
  justify-content: space-around;
}

.bout{
  padding-top: 3em;
  padding-bottom: 3em;
  height: 23em;
  position: relative;
  top: 5%;
}


.beat{
  margin-left: 1.5em;
  margin-right: -2em;
}

.bout:hover{
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;
  
  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
  }
  
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }


/* BUT WHO MADE IT POSSIBLE? */

.middle-band{
  width: 100%;
  height: auto;
  background-color: rgb(135,255,29);
  /* position: relative; */
  top: 0%;
  overflow: hidden;
  background-color: rgb(0,25,231);

}

.middle-text {
  margin: 0 auto;
  white-space: nowrap;
  padding-top: .1em;
  padding-bottom: .1em;


  white-space: nowrap;
  animation: floatText 8s infinite linear;
  position: relative;
  top: 0%;
  left: 100%;
}

@keyframes floatText {
  to {
    transform: translateX(-360%);
  }
}


/* ORIGINE */

.partieswanson{
  position: relative;
  top: 0%;
}

.portrait{
  position: relative;
  top: 0%;
  width: 100%;
  background-color: rgb(135,255,29);
  position: absolute;
}

.containerorigine{
  position: relative;
  padding-top: 40%;
  width: 100%;
  height: fit-content;
}

.origine{
  position: relative;
  width: 70%;
  left: 15%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* margin-left: 1em; */
}


@media screen and (max-width: 600px) {
  .origine {
    left: 0;
    width: 100%;
  }

  .containeroriginer{
    padding-top: 70%
  }
 }




/* BIOGRAPHIE */

.containerbio{
  position: relative;
  margin-bottom: 2em;
  width: 70%;
  bottom: 0%;
  left: 15%;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 600px) {
  .containerbio {
    left: 0;
    width: 100%;
  }
 }


.info{
 display: flex;
 flex-direction: row;
 position: relative;
 white-space: normal;
 overflow: hidden;
 height: fit-content;
 left: 0%;
 margin-top: 1em;
 /* width: 80%; */
 padding-left: .18em;
}

@media screen and (max-width: 600px) {
  .info{
    padding-right: 3em;
    padding-left: .2em;
  }
}

.quoi{
 position: relative;
 margin-left: 7%;
 margin-right: .1em;
 white-space: normal;
}

.important{
  font-size: 2.9em;
  line-height: 1.1em;
  margin-bottom: .1em;
}



.textecorps{
  font-family: "mtl";
  font-size: 1.8em;
  color: rgb(135,255,29);
  line-height: 1.2em;
}

@media screen and (max-width: 1000px) {
  .textecorps{
    font-size: 2.1em;
    line-height: 1.4em;
  }

  .textegrand{
    font-family: "fat";
    font-size: 15em;
  }
 }
 

.textegrand{
  font-family: "fat";
  font-size: 13em;
}

@media screen and (max-width: 600px) {
  .textecorps{
    font-size: 3em;
    line-height: 1.2em;
  }

  .textegrand{
   font-family: "fat";
   font-size: 12em;
 }
 }

.fontcolor2{
  color: rgb(0,25,231);
}

.fontcolor1{
  color: rgb(135,255,29);
}

.svgvert{
  fill: rgb(135,255,29);
}

/* .imgcolor1{
  filter: hue-rotate(0deg);
  background-color: rgb(135,255,29);
} */

.changecolors2{
  background-color: rgb(135,255,29);
}


ul {
  list-style: none;
  list-style-position: inside;
  text-align: left;
  margin-left: 7%;

}

li:before {
  content: '- ';
}