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

body {
    background-color: #161616;
    animation: in normal 0.3s;
    color: #fff;
    opacity: 1;
    font-family: 'Roboto', sans-serif;
}

@keyframes in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.h1 {font-size: 72px;}
.h2 {font-size: 48px;}
.h3 {font-size: 36px;}
.h4 {font-size: 24px;}
.h5 {font-size: 16px;}
.h6 {font-size: 12px;}

.left75 {
    width: 80%;
    height: 45vh;
    margin: auto;
}

.bolder {
    font-weight: 900;
}

.glitch {
    font-size: 8rem;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
  
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
      0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  
    animation: glitch 500ms infinite;
  }
  
  .glitch span {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .glitch span:first-child {
    animation: glitch 650ms infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(-0.025em, -0.0125em);
    /* color: green; */
    opacity: 0.8;
  }
  
  .glitch span:last-child {
    animation: glitch 375ms infinite;
    clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
    transform: translate(0.0125em, 0.025em);
    /* color: red; */
    opacity: 0.8;
  }
  
  /* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */
  
  @keyframes glitch {
    0% {
      text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
        -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    14% {
      text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
        -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    15% {
      text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
        0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
        -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    49% {
      text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
        0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
        -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    50% {
      text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
        0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    99% {
      text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
        0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    100% {
      text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
        -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
        -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }
  }
  
@keyframes dtuanim {
    from {transform: translateY(25%);}
    to {transform: translateY(0%);}
}

.dtu {
    animation-delay: 0.3s;
    animation: dtuanim 0.5s normal;
    transform: translateY(0%);
}

.forks {
    animation-delay: 2s;
    animation: forkslide normal 0.5s;
    transform: translateY(0%);
    opacity: 1;
    margin: auto;
    text-align: center;
}

.forklink {
    margin: 10px;
    transition: all 0.2s ease;
    font-size: 4vh;
}

.forklink:hover {
    color: #0eb9fd;
}

@keyframes forkslide {
    from {transform: translateY(50%); opacity: 0;}
    to {transform: translateY(0%); opacity: 1;}
}