@charset "UTF-8";

@font-face {
    font-family:Antique;
    src: url(../fonts/Antique\ Medium\ 2.otf);
}

@font-face {
    font-family: airdrop;
    src: url(../fonts/airdrop-trial.otf);
}


body {
  background-image: url('../images/11292579.png');
  background-repeat: no-repeat;
  background-size: cover;
}




html {
  overflow-x: hidden;
}



.animated-text {
    position: relative;
    display: inline-block;
    font-family: airdrop;
    font-size: 150px;
    text-align: center;
    animation: colorChange 6s ease-in-out infinite alternate;
  }
  
  @keyframes colorChange {
    0% {
      color: #0088ff;
      text-shadow: 0 0 10px #0088ff, 0 0 20px #0088ff, 0 0 30px #0088ff;
    }
    50% {
      color: #00ff88;
      text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88, 0 0 30px #00ff88;
    }
    100% {
      color: red;
      text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red;
    }
  }


    li {
        font-size: 15px;
        font-family: Antique;
        color:antiquewhite
        }




        .rectangle1 {
            height: 100px;
            width: 200px;
            background-color: orangered;
            position: fixed;
            left: 50%;
            top: -100px;
            transform: translateX(-50%);
            animation: defilement1 2s linear infinite;
            z-index: 2;
          }
          
          .rectangle2 {
            height: 100px;
            width: 200px;
            background-color: blue;
            position: fixed;
            left: 50%;
            top: -100px;
            transform: translateX(-50%);
            animation: defilement2 3s linear infinite;
          }

         

          
          @keyframes defilement1 {
            0% {
              top: -100px;
              transform: translateY(0px);
            }
            50% {
              top: calc(50% - 50px);
              transform: translateY(0px);
            }
            100% {
              top: 100%;
              transform: translateY(0px);
            }
          }
          
          @keyframes defilement2 {
            0% {
              top: -100px;
              transform: translateY(0px);
            }
            50% {
              top: calc(50% + 50px);
              transform: translateY(0px);
            }
            100% {
              top: 100%;
              transform: translateY(0px);
            }
          }



          /* a copier dans tous les css */
#back-button {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  
}
#back-button a {
text-decoration: none;
color: white;
}


/* cette classe anime le changement de couleur + ajoute une animation de défilement */
.gradient-title {
animation: colorChange2 5s ease-in-out infinite alternate, defilement 5s linear infinite;

}

@keyframes colorChange2 {
0% {
  color: #0088ff;
  text-shadow: 0 0 10px #0088ff, 0 0 20px #0088ff, 0 0 30px #0088ff;
}
50% {
  color: #00ff88;
  text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88, 0 0 30px #00ff88;
}
100% {
  color: red;
  text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red;
}
}




          .rectangle3 {
            height: 150px;
            width: 100px;
            background-color: orangered;
            position: sticky;
            left: 50%;
            top: -100px;
            transform: translateX(-50%);
            animation: defilement1 2s linear infinite;
            z-index: 2;
          }
          
          .rectangle4 {
            height: 150px;
            width: 100px;
            background-color: blue;
            position:sticky;
            left: 50%;
            top: -100px;
            transform: translateX(-50%);
            animation: defilement2 3s linear infinite;
          }

         

          
          @keyframes defilement1 {
            0% {
              top: -100px;
              transform: translateY(0px);
            }
            50% {
              top: calc(50% - 50px);
              transform: translateY(0px);
            }
            100% {
              top: 100%;
              transform: translateY(0px);
            }
          }
          
          @keyframes defilement2 {
            0% {
              top: -100px;
              transform: translateY(0px);
            }
            50% {
              top: calc(50% + 50px);
              transform: translateY(0px);
            }
            100% {
              top: 100%;
              transform: translateY(0px);
            }
          }
        






h2 {
  font-family: Antique;
  font-size: 60px;
  color: antiquewhite;
}



h3 {
  font-family: Antique;
  font-size: 45px;
  color: antiquewhite;
}



.ligne {
  height: 3px;
  width: 100%;
  background-color: white;
  position: relative;
  top: 50%;
  animation: defilement 5s linear infinite;
}

@keyframes defilement {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}




h4 {
  font-family: Antique;
  font-size: 30px;
  color: antiquewhite;
}

h5 {
  font-family: Antique;
  font-size: 45px;
  color: antiquewhite;
}


h6 {
  font-family: Antique;
  font-size: 45px;
  color: antiquewhite;
}


          

h7 {
  font-family: Antique;
  font-size: 45px;
  color: antiquewhite;
}





h8 {
  font-family: Antique;
  font-size: 45px;
  color: antiquewhite;
}




h9 {
  font-family: Antique;
  font-size: 45px;
  color: antiquewhite;
}

h10 {
  font-family: Antique;
  font-size: 45px;
  color: antiquewhite;
}


























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

  .animated-text {
    font-size: 80px;
  }
  
  
  h2 {
    font-family: Antique;
    font-size: 45px;
    color: antiquewhite;
  }
  
  
  
  h3 {
    font-family: Antique;
    font-size: 35px;
    color: antiquewhite;
  }

  h4 {
    font-family: Antique;
    font-size: 15px;
    color: antiquewhite;
  }
  
  h5 {
    font-family: Antique;
    font-size: 35px;
    color: antiquewhite;
  }
  
  
  h6 {
    font-family: Antique;
    font-size: 35px;
    color: antiquewhite;
  }
  
  
            
  
  h7 {
    font-family: Antique;
    font-size: 35px;
    color: antiquewhite;
  }
  
  
  
  
  
  h8 {
    font-family: Antique;
    font-size: 35px;
    color: antiquewhite;
  }
  
  
  
  
  h9 {
    font-family: Antique;
    font-size: 35px;
    color: antiquewhite;
  }
  
  h10 {
    font-family: Antique;
    font-size: 35px;
    color: antiquewhite;
  }







  .rectangle1 {
    height: 50px;
    width: 150px;
    background-color: orangered;
    position: fixed;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    animation: defilement1 2s linear infinite;
    z-index: 2;
  }
  
  .rectangle2 {
    height: 50px;
    width: 150px;
    background-color: blue;
    position: fixed;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    animation: defilement2 3s linear infinite;
  }

  .rectangle3 {
    height: 50px;
    width: 150px;
    background-color: orangered;
    position: sticky;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    animation: defilement1 2s linear infinite;
    z-index: 2;
  }
  
  .rectangle4 {
    height: 50px;
    width: 150px;
    background-color: blue;
    position:sticky;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    animation: defilement2 3s linear infinite;
  }



  
    }