body{
margin:0;
text-align: center;
font-family: 'Press Start 2P', cursive;
background-image: url(./Fond_index.png);
background-size: cover;
min-height: 100%;
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
}
h1{
   margin:20vh;
   text-align: center;
   font-size: 48px;
   color: white;
   text-shadow: 2px 2px #000; 
}
h2{
   text-align: center;
   margin:10vh;
}
.btn{
    font-family: 'Press Start 2P', cursive;
   padding: 15px 40px;
    border: none;
    outline: none;
    color: black;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 12px;
    background-color: yellow;
}

.btn ::after {
   content: "";
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #333;
   left: 0;
   top: 0;
   border-radius: 10px;
}

.btn ::before {
   content: "";
   background: linear-gradient(
      45deg, orange, red, blue, pink, 
      purple
   );
 position: absolute;
 top: -2px;
 left: 2px;
 background-size: 600%;
 z-index: -1;
 width: calc(100% + 4px);
 height: calc(100% + 4px);
 filter: blur(8px);
 animation: glowing 20s linear infinite;
 transition: opacity .3s ease-in-out;
 border-radius: 10px;
 opacity: 1;
}

@keyframes glowing {
   0% {background-position: 0 0;}
   50% { background-position: 400% 0;}
   0% {background-position: 0 0;}
}

.zzz{
   position: absolute;
   top: 62%;
   left: 28%;
   font-size: 20px;
   font-weight: bold;
   color: #fff;
   opacity: 0;
   animation: floatUp 3s linear infinite;
   text-shadow: 2px 2px #000
}

.zzz:nth-child(1) { animation-delay: 0s; }
.zzz:nth-child(2) { animation-delay: 1s; }
.zzz:nth-child(3) { animation-delay: 2s; }

@keyframes floatUp{
   0% {
      transform: translate(0, 0) scale(0.5) rotate(0deg);
      opacity: 0;
   }
   10% {
      opacity: 1;
   }
   50% {
      transform: translate(30px, -60px) scale(1.2) rotate(-10deg); 
   }
   100% {
      transform: translate(50px, -120px) scale(2) rotate(10deg);
      opacity: 0;
   }
}