html, body {
    margin: 0;
    padding: 0;
		background: "#111";
}
canvas {
    display: block;
		background: "#111";
}

@font-face {
    font-family: 'sidewalk';
    src: url('sidewalk.ttf') format('truetype'); /* IE9 Compat Modes */
	}

@font-face {
    font-family: 'bungee';
    src: url('bungee.ttf') format('truetype'); /* IE9 Compat Modes */
	}

@font-face {
    font-family: 'ghastly';
    src: url('ghastly.ttf') format('truetype'); /* IE9 Compat Modes */
	}

@font-face {
    font-family: 'freaky';
    src: url('freaky.otf') format('opentype'); /* IE9 Compat Modes */
	}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
		font-family:bungee;
 /* background: hsl(0,100%,50%); */
}
h3 {
  font-family: freaky!important;
}
@keyframes redred {
  0% {
    filter: hue-rotate(3deg);
  }
  33% {
    filter: hue-rotate(33deg);
  }
}

@font-face {
    font-family: 'sidewalk';
    src: url('css/sidewalk.ttf');
	}

	.loading  {
		font-family: bungee;
    /* animation: loadingBottom 20s infinite ease-in-out alternate; */
    position: absolute;
    top: 1%;
    right: 20%;
    width: 50%;
    height: 100vh;
    font-size: 150%;
    z-index: 2;
    line-height:1.7;
    /* color: white; */
    /* text-transform: uppercase; */
}

@media only screen and (max-width: 600px) {
    .loading {
      font-size:110%!important;
      right:20%!important;
      top:10%!important;
    }
}
  .loading * {
    /* position:relative; */
    /* text-transform: full-width; */
    margin: 0;
    padding: 0;
    transform: scale(1.2) translate(-3%, 10%) skew(11deg, 5deg) rotate(-4deg);
    animation: redred 5s 0ms infinite ease-in-out;
  }

.loading::before,
.loading::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    filter: blur(5px);
    opacity: 0.8;
}

.loading::before {
    color: magenta;
    z-index: 1;
    /* animation: loadingTop 2s infinite ease-in-out alternate; */
}

.loading::after {
    color: cyan;
    z-index: 2;
    /* animation: loadingBottom 2s infinite ease-in-out alternate-reverse; */
}

@keyframes loadingTop {
    0% {
        clip: rect(0, 900px, 0, 0);
        transform: translate(-2px, -2px) skew(0deg);
    }
    10% {
        clip: rect(10px, 900px, 30px, 0);
        transform: translate(2px, -2px) skew(5deg);
    }
    20% {
        clip: rect(20px, 900px, 40px, 0);
        transform: translate(-2px, 2px) skew(-5deg);
    }
    30% {
        clip: rect(30px, 900px, 50px, 0);
        transform: translate(2px, 2px) skew(10deg);
    }
    40% {
        clip: rect(40px, 900px, 60px, 0);
        transform: translate(-2px, -2px) skew(-10deg);
    }
    50% {
        clip: rect(50px, 900px, 70px, 0);
        transform: translate(2px, -2px) skew(15deg);
    }
    60% {
        clip: rect(60px, 900px, 80px, 0);
        transform: translate(-2px, 2px) skew(-15deg);
    }
    70% {
        clip: rect(70px, 900px, 90px, 0);
        transform: translate(2px, 2px) skew(20deg);
    }
    80% {
        clip: rect(80px, 900px, 100px, 0);
        transform: translate(-2px, -2px) skew(-20deg);
    }
    90% {
        clip: rect(90px, 900px, 110px, 0);
        transform: translate(2px, -2px) skew(25deg);
    }
    100% {
        clip: rect(100px, 900px, 120px, 0);
        transform: translate(0, 0) skew(0deg);
    }
}

@keyframes loadingBottom {
    0% {
        clip: rect(0, 900px, 0, 0);
        transform: translate(2px, 2px) skew(0deg);
    }
    10% {
        clip: rect(10px, 900px, 30px, 0);
        transform: translate(-2px, 2px) skew(-5deg);
    }
    20% {
        clip: rect(20px, 900px, 40px, 0);
        transform: translate(2px, -2px) skew(5deg);
    }
    30% {
        clip: rect(30px, 900px, 50px, 0);
        transform: translate(-2px, -2px) skew(-10deg);
    }
    40% {
        clip: rect(40px, 900px, 60px, 0);
        transform: translate(2px, 2px) skew(10deg);
    }
    50% {
        clip: rect(50px, 900px, 70px, 0);
        transform: translate(-2px, 2px) skew(-15deg);
    }
    60% {
        clip: rect(60px, 900px, 80px, 0);
        transform: translate(2px, -2px) skew(15deg);
    }
    70% {
        clip: rect(70px, 900px, 90px, 0);
        transform: translate(-2px, -2px) skew(-20deg);
    }
    80% {
        clip: rect(80px, 900px, 100px, 0);
        transform: translate(2px, 2px) skew(20deg);
    }
    90% {
        clip: rect(90px, 900px, 110px, 0);
        transform: translate(-2px, 2px) skew(-25deg);
    }
    100% {
        clip: rect(100px, 900px, 120px, 0);
        transform: translate(0, 0) skew(0deg);
    }
}