@font-face {
  font-family: "VCR";
  src: url("https://cdn.shopify.com/s/files/1/1765/5971/t/10/assets/VCR_OSD_MONO.eot?6300736268315524562");
  src: url("https://cdn.shopify.com/s/files/1/1765/5971/t/10/assets/VCR_OSD_MONO.woff?6300736268315524562") format("woff"),
       url("https://cdn.shopify.com/s/files/1/1765/5971/t/10/assets/VCR_OSD_MONO.ttf?6300736268315524562") format("truetype"),
       url("https://cdn.shopify.com/s/files/1/1765/5971/t/10/assets/VCR_OSD_MONO.svg?6300736268315524562#VCR") format("svg");
  font-weight: normal;
  font-style: normal;
}

body
{
  margin: 0;
  padding: 0;
  background-color: black;
}

.image
{
  background-image: url("https://i.ibb.co/LJW2wrb/image-1.jpg");
  background-attachment: fixed; 
  background-repeat: no-repeat; 
  background-size: contain; 
  background-position: center;
  height: 100vh;
  filter: blur(0.6px) drop-shadow(2px 2px 1px grey) grayscale(30%);
  animation: glitch 0.1s infinite linear alternate-reverse;
  position: relative;
}

button /* Anciennement 'a' pour le lien youtube */
{
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "VCR";
  color: white;
  font-size: 10vmin;
  text-shadow: 0.5px 0 yellow, 0 0.5px red, 0.5px 0 yellow, 0 0.5px red; 
  text-align: center; 
  filter: blur(0.6px) saturate(200%)  drop-shadow(1px 1px 1px blue);
  animation: glitch 0.1s infinite linear alternate-reverse;
  animation: verticalglitch 4s infinite linear;
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-size-adjust: none;
}

@keyframes glitch
{
  0%   
  { 
    transform: translateX(0px) 
  }
  25%  
  { 
    transform: translateX(-0.5px) 
  }
  50%  
  { 
    transform: translateX(0px) 
  }
  75%  
  { 
    transform: translateX(0.5px) 
  }
  100% 
  { 
    transform: translateX(0px) 
  }

  }

@keyframes verticalglitch
{
  0%   
  { 
    transform: translateY(0px) 
  }
  49%  
  { 
    transform: translateY(0px) 
  }
  50%  
  { 
    transform: translateY(9px) 
  }
  51%  
  { 
    transform: translateY(0px) 
  }
  100% 
  { 
    transform: translateY(0px) 
  }
}