html
{
 background: #FBD786;  /* fallback for old browsers */
 /*background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);*/
 background-image: url("img/gameboy.png"),linear-gradient(30deg, #f7797d, #FBD786);
 background-attachment: fixed;
 font-family: sans-serif;
 color: #111;
}
section
{
 background: #c4b9b9; /* fallback*/
 background: linear-gradient(200deg, #D2BDBDCC, #c4b9b9);
 margin: 10%;
 padding: 10px;
 border-color: gray;
 border-style: dotted;
 /*backdrop-filter: blur(10px);*/
}

h1
{
  text-align: center;
  text-shadow: 3px 2px #d5ffff;
}

a
{
 color: #105010;
}

.buuuuutton
{
  background: #DDE;
  background-image: linear-gradient(200deg, #DDEE, #EEFE);
  padding: 0.4em;
  border-radius: 1em;
  margin: 0.1em;
  animation: 1s ease-in 1s infinite blinker;
  text-decoration: none;
  line-height: 3em;
}

#encours
{
  background: #666;
  background: linear-gradient(200deg, #666C,#555E);
  padding: 1em;
  margin:2em;
  border-radius:0.3em;
  color: white;
  text-decoration: none;
}

#contact {
  width: 100%;
}

@keyframes blinker {
  0% { color: red; }
  50% { color: green; }
  100% { color: blue; }
}

#under-constr {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

#badges
{
margin: 25px;
background: #111B;
padding: 10px;
}


/* volé de https://realitycheckk.com/week1*/
.glitchy-text, h2 {
  position:relative;
  animation:glitch 2.5s infinite linear,glitch-slow 8s infinite ease-in-out;
  text-shadow:.02em 0 0 rgba(255,0,0,.8),-.02em -.01em 0 rgba(0,255,0,.8),.01em .02em 0 rgba(0,0,255,.8);
  font-weight:900;
  letter-spacing:.1em
}

@keyframes glitch {
  0% {
    transform:translate(0) skew(0);
    text-shadow:.02em 0 0 rgba(255,0,0,.8),-.02em -.01em 0 rgba(0,255,0,.8),.01em .02em 0 rgba(0,0,255,.8)
  }
  10% {
    transform:translate(-2px,-1px) skew(1deg);
    text-shadow:.05em 0 0 rgba(255,0,0,.9),-.05em -.025em 0 rgba(0,255,0,.9),.025em .05em 0 rgba(0,0,255,.9)
  }
  20% {
    transform:translate(1px) skew(-1deg);
    text-shadow:-.03em 0 0 rgba(255,0,0,.7),.03em -.015em 0 rgba(0,255,0,.7),-.015em .03em 0 rgba(0,0,255,.7)
  }
  30% {
    transform:translate(-1px,1px) skew(0);
    text-shadow:.04em 0 0 rgba(255,0,0,.85),-.04em -.02em 0 rgba(0,255,0,.85),.02em .04em 0 rgba(0,0,255,.85)
  }
  40% {
    transform:translate(2px,-1px) skew(-1deg);
    text-shadow:.01em 0 0 rgba(255,0,0,.6),-.01em -.005em 0 rgba(0,255,0,.6),.005em .01em 0 rgba(0,0,255,.6)
  }
  50% {
    transform:translate(-1px) skew(1deg);
    text-shadow:.06em 0 0 rgba(255,0,0,1),-.06em -.03em 0 rgba(0,255,0,1),.03em .06em 0 rgba(0,0,255,1)
  }
  60% {
    transform:translate(1px,1px) skew(0);
    text-shadow:.02em 0 0 rgba(255,0,0,.75),-.02em -.01em 0 rgba(0,255,0,.75),.01em .02em 0 rgba(0,0,255,.75)
  }
  70% {
    transform:translate(-2px,-1px) skew(-1deg);
    text-shadow:.03em 0 0 rgba(255,0,0,.8),-.03em -.015em 0 rgba(0,255,0,.8),.015em .03em 0 rgba(0,0,255,.8)
  }
  80% {
    transform:translate(1px,-1px) skew(1deg);
    text-shadow:.01em 0 0 rgba(255,0,0,.65),-.01em -.005em 0 rgba(0,255,0,.65),.005em .01em 0 rgba(0,0,255,.65)
  }
  90% {
    transform:translate(-1px,1px) skew(0);
    text-shadow:.04em 0 0 rgba(255,0,0,.9),-.04em -.02em 0 rgba(0,255,0,.9),.02em .04em 0 rgba(0,0,255,.9)
  }
  to {
    transform:translate(0) skew(0);
    text-shadow:.02em 0 0 rgba(255,0,0,.8),-.02em -.01em 0 rgba(0,255,0,.8),.01em .02em 0 rgba(0,0,255,.8)
  }
}
@keyframes glitch-slow {
  0% {
    filter:brightness(1) contrast(1) hue-rotate(0deg)
  }
  25% {
    filter:brightness(1.2) contrast(1.1) hue-rotate(90deg)
  }
  50% {
    filter:brightness(.9) contrast(1.3) hue-rotate(180deg)
  }
  75% {
    filter:brightness(1.1) contrast(.9) hue-rotate(270deg)
  }
  to {
    filter:brightness(1) contrast(1) hue-rotate(360deg)
  }
}