@font-face{
    font-family: 'HVDPoster';
    src: url('../fonts/HVD_Poster.ttf');
}

body{
    background-color: black;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: block;
}

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: white;
}

header{
    position: fixed;
    top:0px;
   left:24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#container{
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;

}

img.bg{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.6;
    animation: imageOpacity 3s alternate infinite;

}


@keyframes imageOpacity{
    2%,64%{
        opacity: 0.6;

    }
    4%,40%{
        opacity: 1;


    }
    62%{
        opacity: 0.75;



    }
    70%,80%{
        opacity: 0.9;


      }
    100%{
        opacity: 0.6;

    }
}

h1{
    text-align: center;
    font-family: 'HVDPoster', Fallback, sans-serif;
    letter-spacing: 0.2em;
    font-size: 72px;
    filter:blur(12px);
    transition: all 4s ease;

}

h1:hover{
  filter:blur(0px);
  transition: all 0.4s ease;
}


.glitch{
    animation: glitch 5s alternate infinite;
  }
  
  @keyframes glitch{
    2%,64%{
      transform: translate(2px,0) skew(0deg);
      filter: blur(0px);
      letter-spacing: 0.2em;

    }
    4%,60%{
      transform: translate(-2px,0) skew(0deg);
      filter: blur(3px);
      letter-spacing: 0.22em;


    }
    62%{
      transform: translate(0,0) skew(5deg); 
      filter: blur(1px);
      letter-spacing: 0.19em;



    }
    70%,80%{
        transform: translate(-2px,0) skew(0deg);
        filter: blur(5px);
        letter-spacing: 0.21em;


      }
    100%{
        transform: translate(2px,0) skew(0deg);

        filter: blur(0px);
        letter-spacing: 0.2em;

    }
  }

  h1.glitch:hover{
    filter:blur(0px);
  }

  footer{
    position:fixed;
    bottom: 48px;
    width: 100%;
    text-align: center;
  }

  a{
    font-family: 'Darker Grotesque', sans-serif;
    font-size: 24px;
    display: inline-block;
    padding:9px 24px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.32);
    border:solid 3px #ffffff;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    border-bottom-right-radius: 225px 15px;
    border-bottom-left-radius:15px 255px;
  }

  a:hover{
    animation: shake 0.3s infinite ;
  }
  

  @keyframes shake{
    0%   { transform: translate(0px,0px); }
    25%   { transform: translate(-2px,2px); }
    30%   { transform: translate(1px,-1px); }
    50%   { transform: translate(-1px,2px); }
    60%   { transform: translate(1px,-2px); }
    75%   { transform: translate(-2px,0px); }
    85%   { transform: translate(1px,-1px); }
    1000%   { transform: translate(0px,0px); }
  }
  @keyframes strike{
    0%   { width : 0; }
    100% { width: 100%; }
  }
  .strike {
    position: relative;
  }
  .strike::after {
    content: ' ';
    position: absolute;
    bottom: 22px;

    transform: rotate(-6deg) scale(1.2,1);
    left: 0;
    width: 0%;
    height: 5px;
    border-top-left-radius: 6px 3px;
    border-top-right-radius: 3px 6px;
    border-bottom-right-radius: 6px 3px;
    border-bottom-left-radius:3px 6px;
    background:#FFE043;
    transition: all 0.1s ease;
    z-index: -1;
  }

  .strike:hover::after{
    width: 100%;

  }
  
  .noise {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200vh;
    background: transparent url('../assets/noise-transparent.png') repeat 0 0;
    background-repeat: repeat;
    animation: bg-animation .2s infinite;
    opacity: 0.3;
    visibility: visible;
  }
  
  @keyframes bg-animation {
      0% { transform: translate(0,0) }
      10% { transform: translate(-5%,-5%) }
      20% { transform: translate(-10%,5%) }
      30% { transform: translate(5%,-10%) }
      40% { transform: translate(-5%,15%) }
      50% { transform: translate(-10%,5%) }
      60% { transform: translate(15%,0) }
      70% { transform: translate(0,10%) }
      80% { transform: translate(-15%,0) }
      90% { transform: translate(10%,5%) }
      100% { transform: translate(5%,0) }
  }

  @media only screen and (max-width: 600px) {
header{
  width: 100%;
  left:0;
}


h1{

  font-size: 44px;
  animation: glitch 5s alternate infinite;


}
  }