/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  
  /* Default link style */
a {
  color: white; /* A nice blue */
  text-decoration: none; /* Underline by default */
}

/* When the mouse hovers over a link */
a:hover {
  color: white; /* Darker blue on hover */
  text-decoration: none; /* Remove underline on hover */
}

/* When a link has been visited (clicked) */
a:visited {
  color: white; /* Purple for visited links */
}

/* When a link is being clicked */
a:active {
  color: black; /* Yellow when active (being clicked) */
}

  background-color: white;
  color: white;
  font-family: "Twinkle Star", cursive;
  font-weight: 400;
  font-style: normal;

}
@font-face {
  font-family: 'Twinkle Star';
  src: url('fonts/TwinkleStar.ttf') format('ttf'),
       url('fonts/TwinkleStar.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
  
}
body {
  font-family: 'Twinkle Star', cursive; /* Apply the font */
}
html,
body,
h1 {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

#app {
  background: #000;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
}

#wrapper {
  text-align: center;
}

.sub {
  color: #ff4a54;
  letter-spacing: 1em;
}

@mixin glitchCopy {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch {
  position: relative;
  color: #fff;
  font-size: 4em;
  letter-spacing: 0.5em;
  animation: glitch-skew 1s infinite linear alternate-reverse;

  &::before {
    @include glitchCopy;
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
  }

  &::after {
    @include glitchCopy;
    left: -2px;
    text-shadow: -2px 0 #ff00c1, 2px 2px #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
  }
}

@keyframes glitch-anim {
  $steps: 20;
  @for $i from 0 to $steps {
    #{percentage($i*(1/$steps))} {
      clip: rect(random(100) + px, 9999px, random(100) + px, 0);
      transform: skew((random(100) / 100) + deg);
    }
  }
}

@keyframes glitch-anim2 {
  $steps: 20;
  @for $i from 0 to $steps {
    #{percentage($i*(1/$steps))} {
      clip: rect(random(100) + px, 9999px, random(100) + px, 0);
      transform: skew((random(100) / 100) + deg);
    }
  }
}

@keyframes glitch-skew {
  $steps: 10;
  @for $i from 0 to $steps {
    #{percentage($i*(1/$steps))} {
      transform: skew((random(10) - 5) + deg);
    }
  }
}