body {
  background-color: #000;
}

.spacer{
	padding-top: 50px;
}

.dark{
	letter-spacing: 3px;
}

.space{
	padding-top: 75px;
}

.attic, .dark, .room{
color: #fff;
	font-family: "Bebas Neue", sans-serif;
	font-size: 100px;
	font-weight: 500;
	text-decoration: none;
	position: relative;
	line-height: 0.01;
	text-align: center;
	color: #fff;
		&:before, &:after {
			display: block;
			content: attr(adr);
			text-transform: uppercase;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			opacity: .8;
		}
		&:after {
			color: #f0f;
			z-index: -2;
		} 
		&:before {
			color: #0ff;
			z-index: -1;
		}
		&:before {
			animation: glitch 5s cubic-bezier(.25, .46, .45, .94) both 25
		}
		&:after {
			animation: glitch 5s cubic-bezier(.25, .46, .45, .94) reverse both 25
		}
}

@media only screen and (max-width: 400px) {
	.glitch {
		font-size: 3em;
	}
}

@keyframes glitch {
	0% {transform: translate(0)}
	20% {transform: translate(-2px, 2px)}
	40% {transform: translate(-2px, -2px)}
	60% {transform: translate(2px, 2px)}
	80% {transform: translate(2px, -2px)}
	to {transform: translate(0)}
}
}