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

canvas {
    display: block;
		background: "#111";
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

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

	.loading h2 {
		font-family: sidewalk;
	}

.loading {
    position: relative;
    font-size: 5vw;
    color: white;
    font-family: 'sidewalk';
    text-transform: uppercase;
}

.loading::before,
.loading::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    filter: blur(2px);
    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);
    }
}