@font-face {
    font-family: ganon;
    src: url(RetGanon.ttf);
}
body {
    background: black;
    font-family: ganon;
    font-style: italic;
}
.container {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 40%;
    left: 50%;
}
.glitch, .glow {
    color: #dfbfbf;
    position: relative;
    font-size: 20vw;
    animation: glitch 5s 5s infinite;
}
.glitch::before, .glow::before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: -5px 0 magenta;
    overflow: hidden;
    top: 0;
    animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}
.glitch::after, .glow::after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -5px 0 lightgreen;
    overflow: hidden;
    top: 0;
    animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}
.glow {
    text-shadow: 0 0 1000px #dfbfbf;
    color: transparent;
    position: absolute;
    top: 0;
}
.subtitle {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1.2vw;
    color: rgba(165, 141, 141, .4);
    text-transform: uppercase;
    letter-spacing: 1em;
    text-align: center;
    position: absolute;
    animation: glitch-2 5s 5.02s infinite;
}
.scanlines {
    overflow: hidden;
    mix-blend-mode: difference;
}
.scanlines::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
    animation: fudge 7s ease-in-out alternate infinite;
}
.link {
    color: #fff;
    position: absolute;
    top: 2%;
    right: 2%;
    font-family: "Oswald", Helvetica, sans-serif;
}
.link a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}
.memo {
    color: #fff;
    position: absolute;
    top: 2%;
    left: 2%;
    font-size: 25px;
}
.youveGotMail {
    margin: auto;
    text-align: center;
}
@keyframes glitch {
    1% {
        transform: rotateX(10deg) skewX(90deg);
   }
    2% {
        transform: rotateX(0deg) skewX(0deg);
   }
}
@keyframes noise-1 {
    3.3333333333% {
        clip-path: inset(30px 0 67px 0);
   }
    6.6666666667% {
        clip-path: inset(40px 0 44px 0);
   }
    10% {
        clip-path: inset(49px 0 15px 0);
   }
    13.3333333333% {
        clip-path: inset(58px 0 22px 0);
   }
    16.6666666667% {
        clip-path: inset(66px 0 3px 0);
   }
    20% {
        clip-path: inset(96px 0 3px 0);
   }
    23.3333333333% {
        clip-path: inset(36px 0 48px 0);
   }
    26.6666666667% {
        clip-path: inset(29px 0 65px 0);
   }
    30% {
        clip-path: inset(7px 0 48px 0);
   }
    33.3333333333% {
        clip-path: inset(36px 0 6px 0);
   }
    36.6666666667% {
        clip-path: inset(82px 0 12px 0);
   }
    40% {
        clip-path: inset(78px 0 10px 0);
   }
    43.3333333333% {
        clip-path: inset(76px 0 10px 0);
   }
    46.6666666667% {
        clip-path: inset(71px 0 30px 0);
   }
    50% {
        clip-path: inset(14px 0 1px 0);
   }
    53.3333333333% {
        clip-path: inset(29px 0 50px 0);
   }
    56.6666666667% {
        clip-path: inset(91px 0 4px 0);
   }
    60% {
        clip-path: inset(42px 0 20px 0);
   }
    63.3333333333% {
        clip-path: inset(13px 0 75px 0);
   }
    66.6666666667% {
        clip-path: inset(23px 0 12px 0);
   }
    70% {
        clip-path: inset(4px 0 46px 0);
   }
    73.3333333333% {
        clip-path: inset(31px 0 45px 0);
   }
    76.6666666667% {
        clip-path: inset(36px 0 29px 0);
   }
    80% {
        clip-path: inset(55px 0 42px 0);
   }
    83.3333333333% {
        clip-path: inset(70px 0 14px 0);
   }
    86.6666666667% {
        clip-path: inset(52px 0 42px 0);
   }
    90% {
        clip-path: inset(83px 0 9px 0);
   }
    93.3333333333% {
        clip-path: inset(76px 0 24px 0);
   }
    96.6666666667% {
        clip-path: inset(60px 0 24px 0);
   }
    100% {
        clip-path: inset(67px 0 17px 0);
   }
}
@keyframes noise-2 {
    0% {
        clip-path: inset(7px 0 60px 0);
   }
    3.3333333333% {
        clip-path: inset(81px 0 19px 0);
   }
    6.6666666667% {
        clip-path: inset(29px 0 57px 0);
   }
    10% {
        clip-path: inset(30px 0 33px 0);
   }
    13.3333333333% {
        clip-path: inset(53px 0 33px 0);
   }
    16.6666666667% {
        clip-path: inset(50px 0 13px 0);
   }
    20% {
        clip-path: inset(34px 0 51px 0);
   }
    23.3333333333% {
        clip-path: inset(46px 0 22px 0);
   }
    26.6666666667% {
        clip-path: inset(8px 0 38px 0);
   }
    30% {
        clip-path: inset(14px 0 46px 0);
   }
    33.3333333333% {
        clip-path: inset(43px 0 56px 0);
   }
    36.6666666667% {
        clip-path: inset(73px 0 18px 0);
   }
    40% {
        clip-path: inset(79px 0 5px 0);
   }
    43.3333333333% {
        clip-path: inset(54px 0 28px 0);
   }
    46.6666666667% {
        clip-path: inset(40px 0 47px 0);
   }
    50% {
        clip-path: inset(69px 0 7px 0);
   }
    53.3333333333% {
        clip-path: inset(31px 0 42px 0);
   }
    56.6666666667% {
        clip-path: inset(25px 0 51px 0);
   }
    60% {
        clip-path: inset(62px 0 11px 0);
   }
    63.3333333333% {
        clip-path: inset(10px 0 84px 0);
   }
    66.6666666667% {
        clip-path: inset(20px 0 9px 0);
   }
    70% {
        clip-path: inset(30px 0 1px 0);
   }
    73.3333333333% {
        clip-path: inset(61px 0 16px 0);
   }
    76.6666666667% {
        clip-path: inset(47px 0 35px 0);
   }
    80% {
        clip-path: inset(74px 0 1px 0);
   }
    83.3333333333% {
        clip-path: inset(88px 0 9px 0);
   }
    86.6666666667% {
        clip-path: inset(94px 0 6px 0);
   }
    90% {
        clip-path: inset(18px 0 47px 0);
   }
    93.3333333333% {
        clip-path: inset(68px 0 9px 0);
   }
    96.6666666667% {
        clip-path: inset(51px 0 44px 0);
   }
    100% {
        clip-path: inset(50px 0 8px 0);
   }
}

@keyframes fudge {
    from {
        transform: translate(0px, 0px);
   }
    to {
        transform: translate(0px, 2%);
   }
}

@keyframes glitch-2 {
    1% {
        transform: rotateX(10deg) skewX(70deg);
   }
    2% {
        transform: rotateX(0deg) skewX(0deg);
   }
}