@charset "UTF-8";

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

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

html {
  overflow-x: hidden;
}




body {
    /* background-color: orangered; */
}

/* 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;
  }
}


.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;
    }
  }


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

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



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

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

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


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

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

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



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

h9 {
    font-size: 40px;
    font-family: Antique;
    color: antiquewhite;
}
h10 {
    font-size: 40px;
    font-family: Antique;
    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%);
  }
}

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


/* SMARTPHONE */

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

/* SMARTPHONE */

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

  body{
    overflow-x: hidden;
  }

  .animated-text {
    font-size: 80px;
  }

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














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




  
   
  
    }