/* defaults */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* background-color: black; */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
    background-color: rgb(0, 0, 0);
    font-family: 'Roboto', sans-serif;

}

p {
  font-family: 'Roboto', sans-serif;
}

/* PAGE D'ACCUEIL*/

.button-accueil {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 60px;
  color: black;
  width: calc((100%/8));
  position: absolute;
  font-size: 19px;
  text-align: left;
  cursor: cell;
}

.button-accueil:hover {
  background-color:rgb(0, 0, 0);
}

.p-button-accueil {
  color: black;
}

.p-button-accueil:hover {
  background-color: rgb(255, 255, 255);
}

.bodyIndex {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ascii-art-page1-container {
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  font-size: 10px; 
  color: rgb(0, 0, 0); 
  line-height: 10px;
  background-color: rgb(0, 0, 0);
  width: 100%;
}

pre{
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  }

  .ascii-art-page1 {
    margin: 0px 11px 0px 11px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }

.biblio img {
  visibility: hidden;
  position: absolute;
  z-index: 999;
  width: 20vw;
  /*transform: translate(-50%, -50%);*/
  pointer-events: none;
}

.toTheLeft {
  transform: translate(-100%, 0);
}

.toAbove {
  transform: translate(0, -100%);
}

.toTheLeft.toAbove {
  transform: translate(-100%, -100%);
}

.biblio img.visible {
  visibility: visible;
}


a:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-decoration: none;
}

a {
  color: rgb(245, 245, 245);
  cursor: cell;
}

p a{
  color: rgb(255, 36, 36);
}

.tooltip .tooltiptext {
  visibility: hidden;
  color: rgb(0, 0, 0);
  text-align: left;
  padding: 5px 0;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 0 auto;
  width: calc((100%/8));
  position: absolute;
  font-size: 19px;
  text-align: left;

  /* Position the tooltip */
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip-2 .tooltiptext-2 {
  visibility: hidden;
  color: rgb(245, 245, 245);
  text-align: left;
  padding: 5px 0;
  position: absolute;
  font-size: 200px;
  text-align: left;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip-2:hover .tooltiptext-2 {
  visibility: visible;
}



/*ONE PAGE*/

.container {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.newBackground {
  transition: background-color 2s;
}

.newBackground:hover {
  background-color: rgb(255, 36, 36);
}


.Well:hover {
  animation: pulse 1s infinite;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);
  100% { transform: scale(1); }
  }
}



.ghost:hover {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 1s cubic-bezier(.36,-0.64,.34,1.76);
}




/* BOUTON DE LA PAGE*/

/* BOUTON */


button {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 60px;
  cursor: cell;
}

.button-text {
  font-size: 19px;
  text-align: left;
}


button:hover {
  border-radius:0px;
  -webkit-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.dropdown-content-1 {
  visibility: hidden;
}

/* LIGNES FLEXBOX*/

.line {
  display: flex;
  width: 100%;
}

.column {
  flex-direction: column;
  display: flex;
  width: 100%;
}

.right {
  align-items: flex-end;
}

.center-row {
  justify-content: center;
}

.right-row {
  justify-content: flex-end;
}

.gap-1 {
  margin-left: calc((100%/16)*3);
}

.gap-1-right {
  margin-right: calc((100%/16)*2);
}

.gap-2 {
  margin-left: calc((100%/16)*4);
}

.gap-2-right {
  margin-right: calc((100%/16)*4);
}

.gap-3 {
  margin-left: calc((100%/16)*12);
}

.gap-4 {
  margin-left: calc((100%/16)*11);
}

.gap-5 {
  margin-left: calc((100%/16)*8);
}

.gap-6 {
  margin-left: calc((100%/16)*10);
}

.gap-7 {
  margin-left: calc((100%/16)*6);
}

.gap-8 {
  margin-left: calc((100%/16)*1);
}

.gap-9 {
  margin-left: calc((100%/16)*14);
}


/* BOUTON GRAND*/

.big {
  width: 25%;
  transition: background-color 2s;
}

.big:hover {
  background-color: rgb(255, 247, 136);
}

#big-100 {
  position: relative;
}

#big-100-main {
  transition: all 1s ease-in-out;
}

#bb1, #bb2, #bb3, #bb4 {
  width: 25%;
  height: 60px;
  border-radius: 50px;
  position: absolute;
  margin-left: 40%;
  margin-top: -20px;
  background-color: rgb(245, 245, 245);
  transition: all 1s ease-in-out;
  transform: translate3d(0,0,0);
}

#big-100:hover #bb1, #big-100.hover_effect #bb1 {
  transform: translate(-175px,-125px);}

  #big-100:hover #bb2, #big-100.hover_effect #bb2 {
    transform: translate(0,-125px);
}
#big-100:hover #bb3, #big-100.hover_effect #bb3 {
  transform: translate(145px,-125px);
}
#big-100:hover #bb4, #big-100.hover_effect #bb4 {
  transform: translate(0, 0);
}

.biggerHover {
  transition: height 2s;
}

.biggerHover:hover {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(196, 196, 196);
  height: 300px;
}

.button-text:hover {
  font-size: 25px;
}

.asciiRetour {
  background-color: black;
  width: calc((100%/8));
  text-decoration: none;
}

.asciiRetour:hover {
  background-color: rgb(245, 245, 245);
}

.bioAller {
  background-color: black;
  width: calc((100%/8));
  text-decoration: none;
}
.bioAller:hover {
  background-color: rgb(245, 245, 245);
}


/* BOUTON PETIT */

.small {
  width: calc((100%/16));
  transition: opacity 2s;
}


.small:hover{
  transform: scale(1.2);
  opacity: 0;
  background-color: rgb(255, 36, 36);
}


/* BOUTON MOYEN */

.medium {
  width: calc((100%/8));
}

.medium:hover {
  background-color: rgb(159, 209, 255);
}


.Blend:hover {
  mix-blend-mode: hard-light;
}


/* ----------- BIO  ------------- */

.container-2 {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.TextBio {
  width: 25%;
  height: auto;
  color: rgb(255, 36, 36);
  font-size: 19px;
  line-height: 125%;
  text-align: justify;
  text-justify: auto;
  background-color: rgb(245,245,245);
  hyphens: auto;
}




/*BUTTON*/

.big-2 {
  width: 25%;
  background-color: rgb(154, 164, 173);
}

.medium-2 {
  background-color: rgb(159, 209, 255);
  width: calc((100%/8));
}

.small-2 {
  width: calc((100%/16));
  background-color: rgb(255, 247, 136);
}











































/* --------- RESPONSIVE --------------- */

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

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* background-color: black; */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
    background-color: rgb(255, 36, 36);
    font-family: 'Roboto', sans-serif;

}

p {
  font-family: 'Roboto', sans-serif;
}

/* PAGE D'ACCUEIL*/

.button-accueil {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 60px;
  color: black;
  width: calc((100%/8));
  position: absolute;
  font-size: 19px;
  text-align: left;
  cursor: cell;
}

.button-accueil:hover {
  background-color:rgb(0, 0, 0);
}

.p-button-accueil {
  color: black;
}

.p-button-accueil:hover {
  background-color: rgb(255, 255, 255);
}

.bodyIndex {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ascii-art-page1-container {
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  font-size: 10px; 
  color: rgb(0, 0, 0); 
  line-height: 10px;
  background-color: rgb(0, 0, 0);
  width: 100%;
}

pre{
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  }

  .ascii-art-page1 {
    margin: 0px 11px 0px 11px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }

.biblio img {
  visibility: hidden;
  position: absolute;
  z-index: 999;
  width: 20vw;
  /*transform: translate(-50%, -50%);*/
  pointer-events: none;
}

.toTheLeft {
  transform: translate(-100%, 0);
}

.toAbove {
  transform: translate(0, -100%);
}

.toTheLeft.toAbove {
  transform: translate(-100%, -100%);
}

.biblio img.visible {
  visibility: visible;
}


a:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-decoration: none;
}

a {
  color: rgb(245, 245, 245);
  cursor: cell;
}

p a{
  color: rgb(255, 36, 36);
}

.tooltip .tooltiptext {
  visibility: hidden;
  color: rgb(0, 0, 0);
  text-align: left;
  padding: 5px 0;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 0 auto;
  width: calc((100%/8));
  position: absolute;
  font-size: 15px;
  text-align: left;

  /* Position the tooltip */
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip-2 .tooltiptext-2 {
  visibility: hidden;
  color: rgb(245, 245, 245);
  text-align: left;
  padding: 5px 0;
  position: absolute;
  font-size: 160px;
  text-align: left;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip-2:hover .tooltiptext-2 {
  visibility: visible;
}



/*ONE PAGE*/

.container {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.newBackground:hover {
  background-color: rgb(255, 36, 36);
}

.Well:hover {
  animation: pulse 1s infinite;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);
  100% { transform: scale(1); }
  }
}




.ghost:hover {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 1s cubic-bezier(.36,-0.64,.34,1.76);
}




/* BOUTON DE LA PAGE*/

/* BOUTON */


button {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 60px;
  cursor: cell;
}

.button-text {
  font-size: 15px;
  text-align: left;
}


button:hover {
  border-radius:0px;
  -webkit-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.dropdown-content-1 {
  visibility: hidden;
}

/* LIGNES FLEXBOX*/

.line {
  display: flex;
  width: 100%;
}

.column {
  flex-direction: column;
  display: flex;
  width: 100%;
}

.right {
  align-items: flex-end;
}

.center-row {
  justify-content: center;
}

.right-row {
  justify-content: flex-end;
}

.gap-1 {
  margin-left: calc((100%/16)*3);
}

.gap-1-right {
  margin-right: calc((100%/16)*2);
}

.gap-2 {
  margin-left: calc((100%/16)*4);
}

.gap-2-right {
  margin-right: calc((100%/16)*4);
}

.gap-3 {
  margin-left: calc((100%/16)*12);
}

.gap-4 {
  margin-left: calc((100%/16)*11);
}

.gap-5 {
  margin-left: calc((100%/16)*8);
}

.gap-6 {
  margin-left: calc((100%/16)*10);
}

.gap-7 {
  margin-left: calc((100%/16)*6);
}

.gap-8 {
  margin-left: calc((100%/16)*1);
}

.gap-9 {
  margin-left: calc((100%/16)*14);
}


/* BOUTON GRAND*/

.big {
  width: 25%;
}

.big:hover {
  background-color: rgb(255, 247, 136);
}

#big-100 {
  position: relative;
}

#big-100-main {
  transition: all 1s ease-in-out;
}

#bb1, #bb2, #bb3, #bb4 {
  width: 25%;
  height: 60px;
  border-radius: 50px;
  position: absolute;
  margin-left: 40%;
  margin-top: -20px;
  background-color: rgb(245, 245, 245);
  transition: all 1s ease-in-out;
  transform: translate3d(0,0,0);
}

#big-100:hover #bb1, #big-100.hover_effect #bb1 {
  transform: translate(-175px,-125px);}

  #big-100:hover #bb2, #big-100.hover_effect #bb2 {
    transform: translate(0,-125px);
}
#big-100:hover #bb3, #big-100.hover_effect #bb3 {
  transform: translate(145px,-125px);
}
#big-100:hover #bb4, #big-100.hover_effect #bb4 {
  transform: translate(0, 0);
}

.biggerHover:hover {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(196, 196, 196);
  height: 280px;
}

.button-text:hover {
  font-size: 19px;
}

.asciiRetour {
  background-color: black;
  width: calc((100%/8));
  text-decoration: none;
}

.asciiRetour:hover {
  background-color: rgb(245, 245, 245);
}

.bioAller {
  background-color: black;
  width: calc((100%/8));
  text-decoration: none;
}
.bioAller:hover {
  background-color: rgb(245, 245, 245);
}


/* BOUTON PETIT */

.small {
  width: calc((100%/16));
}


.small:hover{
  transform: scale(1.2);
  opacity: 0;
  background-color: rgb(255, 36, 36);
}


/* BOUTON MOYEN */

.medium {
  width: calc((100%/8));
}

.medium:hover {
  background-color: rgb(159, 209, 255);
}


.Blend:hover {
  mix-blend-mode: hard-light;
}


/* ----------- BIO  ------------- */

.container-2 {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.TextBio {
  width: 25%;
  height: auto;
  color: rgb(255, 36, 36);
  font-size: 15px;
  line-height: 125%;
  text-align: justify;
  text-justify: auto;
  background-color: rgb(245,245,245);
}




/*BUTTON*/

.big-2 {
  width: 25%;
  background-color: rgb(154, 164, 173);
}

.medium-2 {
  background-color: rgb(159, 209, 255);
  width: calc((100%/8));
}

.small-2 {
  width: calc((100%/16));
  background-color: rgb(255, 247, 136);
}
}













































@media screen and (max-width:1199px) {
 
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* background-color: black; */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
    background-color: rgb(196, 196, 196);
    font-family: 'Roboto', sans-serif;

}

p {
  font-family: 'Roboto', sans-serif;
}

/* PAGE D'ACCUEIL*/

.button-accueil {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 60px;
  color: black;
  width: calc((100%/8));
  position: absolute;
  font-size: 19px;
  text-align: left;
  cursor: cell;
}

.button-accueil:hover {
  background-color:rgb(0, 0, 0);
}

.p-button-accueil {
  color: black;
}

.p-button-accueil:hover {
  background-color: rgb(255, 255, 255);
}

.bodyIndex {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ascii-art-page1-container {
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  font-size: 10px; 
  color: rgb(0, 0, 0); 
  line-height: 10px;
  background-color: rgb(0, 0, 0);
  width: 100%;
}

pre{
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  }

  .ascii-art-page1 {
    margin: 0px 11px 0px 11px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }

.biblio img {
  visibility: hidden;
  position: absolute;
  z-index: 999;
  width: 20vw;
  /*transform: translate(-50%, -50%);*/
  pointer-events: none;
}

.toTheLeft {
  transform: translate(-100%, 0);
}

.toAbove {
  transform: translate(0, -100%);
}

.toTheLeft.toAbove {
  transform: translate(-100%, -100%);
}

.biblio img.visible {
  visibility: visible;
}


a:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-decoration: none;
}

a {
  color: rgb(245, 245, 245);
  cursor: cell;
}

p a{
  color: rgb(255, 36, 36);
}

.tooltip .tooltiptext {
  visibility: hidden;
  color: rgb(0, 0, 0);
  text-align: left;
  padding: 5px 0;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 0 auto;
  width: calc((100%/8));
  position: absolute;
  font-size: 15px;
  text-align: left;

  /* Position the tooltip */
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip-2 .tooltiptext-2 {
  visibility: hidden;
  color: rgb(245, 245, 245);
  text-align: left;
  padding: 5px 0;
  position: absolute;
  font-size: 160px;
  text-align: left;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip-2:hover .tooltiptext-2 {
  visibility: visible;
}



/*ONE PAGE*/

.container {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.newBackground:hover {
  background-color: rgb(255, 36, 36);
}

.Well:hover {
  animation: pulse 1s infinite;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);
  100% { transform: scale(1); }
  }
}




.ghost:hover {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 1s cubic-bezier(.36,-0.64,.34,1.76);
}




/* BOUTON DE LA PAGE*/

/* BOUTON */


button {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 60px;
  cursor: cell;
}

.button-text {
  font-size: 15px;
  text-align: left;
}


button:hover {
  border-radius:0px;
  -webkit-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.dropdown-content-1 {
  visibility: hidden;
}

/* LIGNES FLEXBOX*/

.line {
  display: flex;
  width: 100%;
}

.column {
  flex-direction: column;
  display: flex;
  width: 100%;
}

.right {
  align-items: flex-end;
}

.center-row {
  justify-content: center;
}

.right-row {
  justify-content: flex-end;
}

.gap-1 {
  margin-left: calc((100%/16)*3);
}

.gap-1-right {
  margin-right: calc((100%/16)*2);
}

.gap-2 {
  margin-left: calc((100%/16)*4);
}

.gap-2-right {
  margin-right: calc((100%/16)*4);
}

.gap-3 {
  margin-left: calc((100%/16)*12);
}

.gap-4 {
  margin-left: calc((100%/16)*11);
}

.gap-5 {
  margin-left: calc((100%/16)*8);
}

.gap-6 {
  margin-left: calc((100%/16)*10);
}

.gap-7 {
  margin-left: calc((100%/16)*6);
}

.gap-8 {
  margin-left: calc((100%/16)*1);
}

.gap-9 {
  margin-left: calc((100%/16)*14);
}


/* BOUTON GRAND*/

.big {
  width: 25%;
}

.big:hover {
  background-color: rgb(255, 247, 136);
}

#big-100 {
  position: relative;
}

#big-100-main {
  transition: all 1s ease-in-out;
}

#bb1, #bb2, #bb3, #bb4 {
  width: 25%;
  height: 60px;
  border-radius: 50px;
  position: absolute;
  margin-left: 40%;
  margin-top: -20px;
  background-color: rgb(245, 245, 245);
  transition: all 1s ease-in-out;
  transform: translate3d(0,0,0);
}

#big-100:hover #bb1, #big-100.hover_effect #bb1 {
  transform: translate(-175px,-125px);}

  #big-100:hover #bb2, #big-100.hover_effect #bb2 {
    transform: translate(0,-125px);
}
#big-100:hover #bb3, #big-100.hover_effect #bb3 {
  transform: translate(145px,-125px);
}
#big-100:hover #bb4, #big-100.hover_effect #bb4 {
  transform: translate(0, 0);
}

.biggerHover:hover {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(196, 196, 196);
  height: 280px;
}

.button-text:hover {
  font-size: 19px;
}

.asciiRetour {
  background-color: black;
  width: calc((100%/8));
  text-decoration: none;
}

.asciiRetour:hover {
  background-color: rgb(245, 245, 245);
}

.bioAller {
  background-color: black;
  width: calc((100%/8));
  text-decoration: none;
}
.bioAller:hover {
  background-color: rgb(245, 245, 245);
}


/* BOUTON PETIT */

.small {
  width: calc((100%/16));
}


.small:hover{
  transform: scale(1.2);
  opacity: 0;
  background-color: rgb(255, 36, 36);
}


/* BOUTON MOYEN */

.medium {
  width: calc((100%/8));
}

.medium:hover {
  background-color: rgb(159, 209, 255);
}


.Blend:hover {
  mix-blend-mode: hard-light;
}


/* ----------- BIO  ------------- */

.container-2 {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.TextBio {
  width: 25%;
  height: auto;
  color: rgb(255, 36, 36);
  font-size: 15px;
  line-height: 125%;
  text-align: justify;
  text-justify: auto;
  background-color: rgb(245,245,245);
}




/*BUTTON*/

.big-2 {
  width: 25%;
  background-color: rgb(154, 164, 173);
}

.medium-2 {
  background-color: rgb(159, 209, 255);
  width: calc((100%/8));
}

.small-2 {
  width: calc((100%/16));
  background-color: rgb(255, 247, 136);
}
}

  
}


































































@media screen and (max-width:991px) {
  
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* background-color: black; */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
    background-color: rgb(154, 164, 173);
    font-family: 'Roboto', sans-serif;

}

p {
  font-family: 'Roboto', sans-serif;
}

/* PAGE D'ACCUEIL*/

.button-accueil {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 60px;
  color: black;
  width: calc((100%/8));
  position: absolute;
  font-size: 19px;
  text-align: left;
  cursor: cell;
}

.button-accueil:hover {
  background-color:rgb(0, 0, 0);
}

.p-button-accueil {
  color: black;
}

.p-button-accueil:hover {
  background-color: rgb(255, 255, 255);
}

.bodyIndex {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ascii-art-page1-container {
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  font-size: 10px; 
  color: rgb(0, 0, 0); 
  line-height: 10px;
  background-color: rgb(0, 0, 0);
  width: 100%;
}

pre{
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  }

  .ascii-art-page1 {
    margin: 0px 11px 0px 11px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }

.biblio img {
  visibility: hidden;
  position: absolute;
  z-index: 999;
  width: 20vw;
  /*transform: translate(-50%, -50%);*/
  pointer-events: none;
}

.toTheLeft {
  transform: translate(-100%, 0);
}

.toAbove {
  transform: translate(0, -100%);
}

.toTheLeft.toAbove {
  transform: translate(-100%, -100%);
}

.biblio img.visible {
  visibility: visible;
}


a:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-decoration: none;
}

a {
  color: rgb(245, 245, 245);
  cursor: cell;
}

p a{
  color: rgb(255, 36, 36);
}

.tooltip .tooltiptext {
  visibility: hidden;
  color: rgb(0, 0, 0);
  text-align: left;
  padding: 5px 0;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 0 auto;
  width: calc((100%/8));
  position: absolute;
  font-size: 15px;
  text-align: left;

  /* Position the tooltip */
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip-2 .tooltiptext-2 {
  visibility: hidden;
  color: rgb(245, 245, 245);
  text-align: left;
  padding: 5px 0;
  position: absolute;
  font-size: 160px;
  text-align: left;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip-2:hover .tooltiptext-2 {
  visibility: visible;
}



/*ONE PAGE*/

.container {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.newBackground:hover {
  background-color: rgb(255, 36, 36);
}

.Well:hover {
  animation: pulse 1s infinite;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);
  100% { transform: scale(1); }
  }
}




.ghost:hover {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 1s cubic-bezier(.36,-0.64,.34,1.76);
}




/* BOUTON DE LA PAGE*/

/* BOUTON */


button {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 60px;
  cursor: cell;
}

.button-text {
  font-size: 15px;
  text-align: left;
}


button:hover {
  border-radius:0px;
  -webkit-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.dropdown-content-1 {
  visibility: hidden;
}

/* LIGNES FLEXBOX*/

.line {
  display: flex;
  width: 100%;
}

.column {
  flex-direction: column;
  display: flex;
  width: 100%;
}

.right {
  align-items: flex-end;
}

.center-row {
  justify-content: center;
}

.right-row {
  justify-content: flex-end;
}

.gap-1 {
  margin-left: calc((100%/16)*3);
}

.gap-1-right {
  margin-right: calc((100%/16)*2);
}

.gap-2 {
  margin-left: calc((100%/16)*4);
}

.gap-2-right {
  margin-right: calc((100%/16)*4);
}

.gap-3 {
  margin-left: calc((100%/16)*12);
}

.gap-4 {
  margin-left: calc((100%/16)*11);
}

.gap-5 {
  margin-left: calc((100%/16)*8);
}

.gap-6 {
  margin-left: calc((100%/16)*10);
}

.gap-7 {
  margin-left: calc((100%/16)*6);
}

.gap-8 {
  margin-left: calc((100%/16)*1);
}

.gap-9 {
  margin-left: calc((100%/16)*14);
}


/* BOUTON GRAND*/

.big {
  width: 25%;
}

.big:hover {
  background-color: rgb(255, 247, 136);
}

#big-100 {
  position: relative;
}

#big-100-main {
  transition: all 1s ease-in-out;
}

#bb1, #bb2, #bb3, #bb4 {
  width: 25%;
  height: 60px;
  border-radius: 50px;
  position: absolute;
  margin-left: 40%;
  margin-top: -20px;
  background-color: rgb(245, 245, 245);
  transition: all 1s ease-in-out;
  transform: translate3d(0,0,0);
}

#big-100:hover #bb1, #big-100.hover_effect #bb1 {
  transform: translate(-175px,-125px);}

  #big-100:hover #bb2, #big-100.hover_effect #bb2 {
    transform: translate(0,-125px);
}
#big-100:hover #bb3, #big-100.hover_effect #bb3 {
  transform: translate(145px,-125px);
}
#big-100:hover #bb4, #big-100.hover_effect #bb4 {
  transform: translate(0, 0);
}

.biggerHover:hover {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(196, 196, 196);
  height: 280px;
}

.button-text:hover {
  font-size: 19px;
}

.asciiRetour {
  background-color: black;
  width: calc((100%/8));
  text-decoration: none;
}

.asciiRetour:hover {
  background-color: rgb(245, 245, 245);
}

.bioAller {
  background-color: black;
  width: calc((100%/8));
  text-decoration: none;
}
.bioAller:hover {
  background-color: rgb(245, 245, 245);
}


/* BOUTON PETIT */

.small {
  width: calc((100%/16));
}


.small:hover{
  transform: scale(1.2);
  opacity: 0;
  background-color: rgb(255, 36, 36);
}


/* BOUTON MOYEN */

.medium {
  width: calc((100%/8));
}

.medium:hover {
  background-color: rgb(159, 209, 255);
}


.Blend:hover {
  mix-blend-mode: hard-light;
}


/* ----------- BIO  ------------- */

.container-2 {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.TextBio {
  width: 25%;
  height: auto;
  color: rgb(255, 36, 36);
  font-size: 15px;
  line-height: 125%;
  text-align: justify;
  text-justify: auto;
  background-color: rgb(245,245,245);
}




/*BUTTON*/

.big-2 {
  width: 25%;
  background-color: rgb(154, 164, 173);
}

.medium-2 {
  background-color: rgb(159, 209, 255);
  width: calc((100%/8));
}

.small-2 {
  width: calc((100%/16));
  background-color: rgb(255, 247, 136);
}
}

































@media screen and (max-width:768px) {
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* background-color: black; */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
    background-color: rgb(159, 209, 255);
    font-family: 'Roboto', sans-serif;

}

p {
  font-family: 'Roboto', sans-serif;
}

/* PAGE D'ACCUEIL*/

.button-accueil {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 40px;
  color: black;
  width: calc((100%/8));
  position: absolute;
  font-size: 13px;
  text-align: left;
  cursor: cell;
}

.button-accueil:hover {
  background-color:rgb(0, 0, 0);
}

.p-button-accueil {
  color: black;
}

.p-button-accueil:hover {
  background-color: rgb(255, 255, 255);
}

.bodyIndex {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ascii-art-page1-container {
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  font-size: 10px; 
  color: rgb(0, 0, 0); 
  line-height: 10px;
  background-color: rgb(0, 0, 0);
  width: 100%;
}

pre{
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  }

  .ascii-art-page1 {
    margin: 0px 11px 0px 11px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }

.biblio img {
  visibility: hidden;
  position: absolute;
  z-index: 999;
  width: 20vw;
  /*transform: translate(-50%, -50%);*/
  pointer-events: none;
}

.toTheLeft {
  transform: translate(-100%, 0);
}

.toAbove {
  transform: translate(0, -100%);
}

.toTheLeft.toAbove {
  transform: translate(-100%, -100%);
}

.biblio img.visible {
  visibility: visible;
}


a:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-decoration: none;
}

a {
  color: rgb(245, 245, 245);
  cursor: cell;
}

p a{
  color: rgb(255, 36, 36);
}

.tooltip .tooltiptext {
  visibility: hidden;
  color: rgb(0, 0, 0);
  text-align: left;
  padding: 5px 0;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 0 auto;
  width: calc((100%/8));
  position: absolute;
  font-size: 13px;
  text-align: left;

  /* Position the tooltip */
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip-2 .tooltiptext-2 {
  visibility: hidden;
  color: rgb(245, 245, 245);
  text-align: left;
  padding: 5px 0;
  position: absolute;
  font-size: 90px;
  text-align: left;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip-2:hover .tooltiptext-2 {
  visibility: visible;
}



/*ONE PAGE*/

.container {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.newBackground:hover {
  background-color: rgb(255, 36, 36);
}

.Well:hover {
  animation: pulse 1s infinite;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);
  100% { transform: scale(1); }
  }
}




.ghost:hover {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 1s cubic-bezier(.36,-0.64,.34,1.76);
}




/* BOUTON DE LA PAGE*/

/* BOUTON */


button {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 40px;
  cursor: cell;
}

.button-text {
  font-size: 13px;
  text-align: left;
}


button:hover {
  border-radius:0px;
  -webkit-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.dropdown-content-1 {
  visibility: hidden;
}

/* LIGNES FLEXBOX*/

.line {
  display: flex;
  width: 100%;
}

.column {
  flex-direction: column;
  display: flex;
  width: 100%;
}

.right {
  align-items: flex-end;
}

.center-row {
  justify-content: center;
}

.right-row {
  justify-content: flex-end;
}

.gap-1 {
  margin-left: calc((100%/16)*3);
}

.gap-1-right {
  margin-right: calc((100%/16)*2);
}

.gap-2 {
  margin-left: calc((100%/16)*4);
}

.gap-2-right {
  margin-right: calc((100%/16)*4);
}

.gap-3 {
  margin-left: calc((100%/16)*12);
}

.gap-4 {
  margin-left: calc((100%/16)*11);
}

.gap-5 {
  margin-left: calc((100%/16)*8);
}

.gap-6 {
  margin-left: calc((100%/16)*10);
}

.gap-7 {
  margin-left: calc((100%/16)*6);
}

.gap-8 {
  margin-left: calc((100%/16)*1);
}

.gap-9 {
  margin-left: calc((100%/16)*14);
}


/* BOUTON GRAND*/

.big {
  width: 25%;
}

.big:hover {
  background-color: rgb(255, 247, 136);
}

#big-100 {
  position: relative;
}

#big-100-main {
  transition: all 1s ease-in-out;
}

#bb1, #bb2, #bb3, #bb4 {
  width: 25%;
  height: 40px;
  border-radius: 50px;
  position: absolute;
  margin-left: 40%;
  margin-top: -20px;
  background-color: rgb(245, 245, 245);
  transition: all 1s ease-in-out;
  transform: translate3d(0,0,0);
}

#big-100:hover #bb1, #big-100.hover_effect #bb1 {
  transform: translate(-175px,-125px);}

  #big-100:hover #bb2, #big-100.hover_effect #bb2 {
    transform: translate(0,-125px);
}
#big-100:hover #bb3, #big-100.hover_effect #bb3 {
  transform: translate(145px,-125px);
}
#big-100:hover #bb4, #big-100.hover_effect #bb4 {
  transform: translate(0, 0);
}

.biggerHover:hover {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(196, 196, 196);
  height: 200px;
}

.button-text:hover {
  font-size: 13px;
}

.asciiRetour {
  background-color: black;
  width: 25%;
  text-decoration: none;
}

.asciiRetour:hover {
  background-color: rgb(245, 245, 245);
}

.bioAller {
  background-color: black;
  width: 25%;
  text-decoration: none;
}
.bioAller:hover {
  background-color: rgb(245, 245, 245);
}


/* BOUTON PETIT */

.small {
  width: calc((100%/16));
}


.small:hover{
  transform: scale(1.2);
  opacity: 0;
  background-color: rgb(255, 36, 36);
}


/* BOUTON MOYEN */

.medium {
  width: calc((100%/8));
}

.medium:hover {
  background-color: rgb(159, 209, 255);
}


.Blend:hover {
  mix-blend-mode: hard-light;
}


/* ----------- BIO  ------------- */

.container-2 {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.TextBio {
  width: 50%;
  height: auto;
  color: rgb(255, 36, 36);
  font-size: 13px;
  line-height: 125%;
  text-align: justify;
  text-justify: auto;
  background-color: rgb(245,245,245);
}




/*BUTTON*/

.big-2 {
  width: 25%;
  background-color: rgb(154, 164, 173);
}

.medium-2 {
  background-color: rgb(159, 209, 255);
  width: calc((100%/8));
}

.small-2 {
  width: calc((100%/16));
  background-color: rgb(255, 247, 136);
}
}




































































@media screen and (max-width:576px) {
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* background-color: black; */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
    background-color: rgb(255, 247, 136);
    font-family: 'Roboto', sans-serif;

}

p {
  font-family: 'Roboto', sans-serif;
}

/* PAGE D'ACCUEIL*/

.button-accueil {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 35px;
  color: black;
  width: calc((100%/8));
  position: absolute;
  font-size: 10px;
  text-align: left;
  cursor: cell;
}

.button-accueil:hover {
  background-color:rgb(0, 0, 0);
}

.p-button-accueil {
  color: black;
}

.p-button-accueil:hover {
  background-color: rgb(255, 255, 255);
}

.bodyIndex {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ascii-art-page1-container {
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  font-size: 10px; 
  color: rgb(0, 0, 0); 
  line-height: 10px;
  background-color: rgb(0, 0, 0);
  width: 100%;
}

pre{
  display: inline-block;
  font-size: 7px;
  font-family: Ubuntu Mono, monospace !important;
  text-rendering: optimizeSpeed;
  }

  .ascii-art-page1 {
    margin: 0px 11px 0px 11px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }

.biblio img {
  visibility: hidden;
  position: absolute;
  z-index: 999;
  width: 40vw;
  /*transform: translate(-50%, -50%);*/
  pointer-events: none;
}

.toTheLeft {
  transform: translate(-100%, 0);
}

.toAbove {
  transform: translate(0, -100%);
}

.toTheLeft.toAbove {
  transform: translate(-100%, -100%);
}

.biblio img.visible {
  visibility: visible;
}


a:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-decoration: none;
}

a {
  color: rgb(245, 245, 245);
  cursor: cell;
}

p a{
  color: rgb(255, 36, 36);
}

.tooltip .tooltiptext {
  visibility: hidden;
  color: rgb(0, 0, 0);
  text-align: left;
  padding: 5px 0;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 0 auto;
  width: calc((100%/8));
  position: absolute;
  font-size: 10px;
  text-align: left;

  /* Position the tooltip */
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip-2 .tooltiptext-2 {
  visibility: hidden;
  color: rgb(245, 245, 245);
  text-align: left;
  padding: 5px 0;
  position: absolute;
  font-size: 70px;
  text-align: left;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip-2:hover .tooltiptext-2 {
  visibility: visible;
}



/*ONE PAGE*/

.container {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.newBackground:hover {
  background-color: rgb(255, 36, 36);
}

.Well:hover {
  animation: pulse 1s infinite;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);
  100% { transform: scale(1); }
  }
}




.ghost:hover {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 1s cubic-bezier(.36,-0.64,.34,1.76);
}




/* BOUTON DE LA PAGE*/

/* BOUTON */


button {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(245, 245, 245);
  height: 40px;
  cursor: cell;
}

.button-text {
  font-size: 10px;
  text-align: left;
}


button:hover {
  border-radius:0px;
  -webkit-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.dropdown-content-1 {
  visibility: hidden;
}

/* LIGNES FLEXBOX*/

.line {
  display: flex;
  width: 100%;
}

.column {
  flex-direction: column;
  display: flex;
  width: 100%;
}

.right {
  align-items: flex-end;
}

.center-row {
  justify-content: center;
}

.right-row {
  justify-content: flex-end;
}

.gap-1 {
  margin-left: calc((100%/16)*3);
}

.gap-1-right {
  margin-right: calc((100%/16)*2);
}

.gap-2 {
  margin-left: calc((100%/16)*4);
}

.gap-2-right {
  margin-right: calc((100%/16)*4);
}

.gap-3 {
  margin-left: calc((100%/16)*12);
}

.gap-4 {
  margin-left: calc((100%/16)*11);
}

.gap-5 {
  margin-left: calc((100%/16)*8);
}

.gap-6 {
  margin-left: calc((100%/16)*10);
}

.gap-7 {
  margin-left: calc((100%/16)*6);
}

.gap-8 {
  margin-left: calc((100%/16)*1);
}

.gap-9 {
  margin-left: calc((100%/16)*14);
}


/* BOUTON GRAND*/

.big {
  width: 25%;
}

.big:hover {
  background-color: rgb(255, 247, 136);
}

#big-100 {
  position: relative;
}

#big-100-main {
  transition: all 1s ease-in-out;
}

#bb1, #bb2, #bb3, #bb4 {
  width: 25%;
  height: 30px;
  border-radius: 50px;
  position: absolute;
  margin-left: 40%;
  margin-top: -10px;
  background-color: rgb(245, 245, 245);
  transition: all 1s ease-in-out;
  transform: translate3d(0,0,0);
}

#big-100:hover #bb1, #big-100.hover_effect #bb1 {
  transform: translate(-100px,-100px);}

  #big-100:hover #bb2, #big-100.hover_effect #bb2 {
    transform: translate(0,-100px);
}
#big-100:hover #bb3, #big-100.hover_effect #bb3 {
  transform: translate(112px,-100px);
}
#big-100:hover #bb4, #big-100.hover_effect #bb4 {
  transform: translate(0, 0);
}

.biggerHover:hover {
  border-radius: 50px;
  border-style: none;
  background-color: rgb(196, 196, 196);
  height: 100px;
}

.button-text:hover {
  font-size: 12px;
}

.asciiRetour {
  background-color: black;
  width: 25%;
  text-decoration: none;
}

.asciiRetour:hover {
  background-color: rgb(245, 245, 245);
}

.bioAller {
  background-color: black;
  width: 25%;
  text-decoration: none;
}
.bioAller:hover {
  background-color: rgb(245, 245, 245);
}


/* BOUTON PETIT */

.small {
  width: calc((100%/16));
}


.small:hover{
  transform: scale(1.2);
  opacity: 0;
  background-color: rgb(255, 36, 36);
}


/* BOUTON MOYEN */

.medium {
  width: calc((100%/8));
}

.medium:hover {
  background-color: rgb(159, 209, 255);
}


.Blend:hover {
  mix-blend-mode: hard-light;
}


/* ----------- BIO  ------------- */

.container-2 {
  background: url(../images/wendyyy.png) no-repeat center center fixed; 
  background-size: cover;
  width: 100%;
  overflow: hidden;
  animation: type 5s;
  background-color:rgb(0, 0, 0);
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

.TextBio {
  width: 50%;
  height: auto;
  color: rgb(255, 36, 36);
  font-size: 10px;
  line-height: 120%;
  text-align: justify;
  text-justify: auto;
  background-color: rgb(245,245,245);
}




/*BUTTON*/

.big-2 {
  width: 25%;
  background-color: rgb(154, 164, 173);
}

.medium-2 {
  background-color: rgb(159, 209, 255);
  width: calc((100%/8));
}

.small-2 {
  width: calc((100%/16));
  background-color: rgb(255, 247, 136);
}
}