@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;500&display=swap');

body{
    /* display: flex; */
    /* width: 100vw;
    height: 100vh; */
    /* align-items: center;
    justify-content: center; */
    /* margin: 0; */
    background: #131313;
    color: #fff;
    font-size: 3.8vmax;
    font-family: 'Roboto Mono', monospace;
    font-weight: 100;
    letter-spacing: -3px;
}

/* @media screen and (max-width : 320px)
{
  body
  {
    font-size: 24px;
  }
}

@media screen and (max-width : 1204px)
{
  body
  {
    font-size: 32px;
  }
} */

h1 {
  margin-block-start: 0.1em;
}

a{
    color: #fff;
}

hr.dashed {
    border-top: 5px dashed #fff;
    border-bottom: 0px;
}

hr.glitch-top {
    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%);
    margin-bottom: -2px;
}

hr.glitch-middle {
    animation: glitch 1s linear infinite;
    margin:0px;
}

hr.glitch-bottom {
    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%);
    margin-top: -4px;
}

.bold{
    font-weight: 500;
}

.horiz{
    display: flex;
    justify-content: left;
}

.center-content{
  display: flex;
  align-items: center;
  justify-content: center;
}

.spacer{
    width: 0.5em;
}

.text-glitch{
  animation: glitch 1s linear infinite;
}

@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);
  }
}

.text-glitch:before,
.text-glitch:after{
  content: attr(title);
  position: absolute;
  left: 0;
  top: 0;
}

.text-glitch: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);
  }
}

.text-glitch: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);
  }
}

canvas{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}