body {
    width: 100vw;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(90, 5px);
    gap: 15px;
    grid-auto-rows: 90px;
    position: relative;
    overflow: hidden;
    background-color: rgb(0, 7, 58);
}


.background-tremble {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: rgb(255, 255, 255);
    border-radius: 60%;
    animation: tremble 5s infinite alternate ease-in-out;
}

header {
  opacity: 100%;
  font-family : "Fifties Movies";
  position: absolute;
  width: 250vw;
  background-color: rgb(255, 255, 255);
  padding: 3px;
  z-index: 10;
}





/* Animation tremblement aléatoire */
@keyframes tremble {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-5px, 3px) rotate(-1deg); }
    50% { transform: translate(3px, -4px) rotate(1deg); }
    75% { transform: translate(-2px, 5px) rotate(-0.5deg); }
    100% { transform: translate(4px, -2px) rotate(0.5deg); }
}


/* TEXTE au-dessus */
p {
    width: 100%;
    font-size: 34px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    animation: couleurChange 8s infinite alternate ease-in-out;
    position: relative; /* pour rester au-dessus du fond */
}

@keyframes couleurChange {
    0% { color: rgba(255, 255, 255, 0.8); }
    100% { color: rgba(83, 112, 255, 0.4); }
}

p:nth-child(odd) { --x: 0.5; --y: 0.8; }
p:nth-child(even) { --x: 0.2; --y: 0.3; }





@font-face {
    font-family: "Grcafon Demo";
    src: url("../js/Grcafon Demo.otf") format("opentype");
    font-weight: normal;
    font-style: normal;

}

.grand {
    
    animation-fill-mode: forwards;
    animation-name: bouger;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate; 
    animation-delay : 0s;
    font-family: "Grcafon Demo", cursive, sans-serif;
    font-size: 20px;
    color: rgba(1, 10, 105, 0.742);
}

.grand:hover{
    
   animation-name : bouger;
   color : rgba(145, 173, 255, 0.8);

}



@keyframes bouger {
    from {
        scale: 100% 1;
        translate: 500px, 500px
    
    }
    to {
        translate: 1px 1px;
        scale: 200% 1;   
    }
}

@font-face {
    font-family: "LibreBarcode39-Regular";
    src: url("../js/LibreBarcode39-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.petit {
    font-family: "LibreBarcode39-Regular", cursive, sans-serif;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.434);
    filter :drop-shadow(50px 20px 16px rgb(52, 137, 255))
}



@font-face {
    font-family: "ERTHQAKE";
    src: url("../js/ERTHQAKE.TTF") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.moyen {
    font-size: 10px;
    color: rgb(199, 207, 255);
}


@keyframes glissement {
    0% { transform: translate(-100px, 0); }
    50% { transform: translate(0, 0); }
    100% { transform: translate(100px, 0); }
}