/*element principal en relatif pour permettre aux elements absolus d'etre positionnes*/
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: rgb(172, 184, 219);
    font-weight: 600;
    font-family: 'Josefin Sans';
    font-size: 1.25em;
}
.rt{
  animation: glitch 1s linear infinite;
  position: relative;
    margin-left:38%;
    margin-top: 1%;
    width: 65%;
    height: 80%;
    text-align:-webkit-auto;
    z-index: 1000;
}

@keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg); 
  }
}

.rt:before,
.rt:after{
  content: attr(title);
  position: absolute;
  left: 0;
}

.rt:before{
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg); 
  }
}

.rt:after{
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg); 
  }
}
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/fond1.jpg");
    filter: blur(5px);
}

.center {
    position: relative;
    margin-left:15%;
    margin-top: 10%;
    width: 65%;
    height: 80%;
    text-align: center;
    z-index: 1000;
}

.center h1, .center h2  {
    text-align: center;
}


.tryagain {
    margin-top: 5%;
}

.tryagain a, .center a{
    font-weight: 800;
    font-size: 1.3em;
    color: rgb(14, 227, 14);
    text-align: center;
    margin-left: 43%;
}

footer {
    position:sticky;
    
    left: 25%;
    width: 50%;
    color: rgb(73, 73, 73);
    text-align: center;
    font-size: 0.5em;
}