:root {
    --main-font-color: white;
}

html, body {
    background-color:black;
    margin: 0;
    padding: 0;
    height: 100%;
}

.content-margin {
    margin-bottom: 2em;
}

.main-menu {
    margin: 50px 100px;
    text-align: center;
}

.menu-title-text {
    line-height: initial;
    color: white;
    font-size: 6em;
	letter-spacing: .5em;
	font-family: 'ModuloRegular';
	display: inline-block;
}

.menu-links {
    color: grey;
    font-size: 1.5em;
    font-family: 'Source Code Pro', monospace;
}

.menu-links i {
    margin-right: 0.2em;
}

.menu-links a {
    text-decoration: none;
    color: grey;
}

.menu-links a:hover {
    text-decoration: underline;
    color: white;
}

@media screen and (orientation: landscape) {

    .main-content {
        text-align: left;
        width: 50%;
        display: block;
        margin-left: auto;
		margin-right: auto;
		margin-bottom: 4em;
    }
}

@media screen and (orientation: portrait) {

    .main-content {
        text-align: left;
        width: 90%;
        display: block;
        margin-left: auto;
		margin-right: auto;
		margin-bottom: 4em;
    }
}

.main-content-title {
    font-family: 'Source Code Pro', monospace;
    margin-bottom: 20px;
}

.main-content-title-text {
    color: white;
    font-size: 2em;
    line-height: 1.2;
    /* font-weight: bold; */
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
}

.main-content-subtitle {
    color: grey;
    font-size: 1em;
}

.main-content-text {
    font-size: 1.2em;
    line-height: initial;
    color: white;
    font-family: 'Source Code Pro', monospace;
    font-weight: 100;
}

.shop-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: baseline;
}

.shop-link {
    margin: 0 10px 0 10px;
}

.logo-img {
    height: 3em;
}

.iframe-wrapper {
    overflow: hidden;
    margin-bottom: 1.5em;
}

.iframe-soundcloud {
    position: relative;
    top:-5px;
}

.footer {
    color: grey;
    text-align: center;
}

.glitch {
    position: relative;
    animation: glitch-skew 1s infinite linear alternate-reverse;
}

.glitch::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	left: 2px;
	text-shadow: -2px 0 #ff00c1;
	clip: rect(44px, 450px, 56px, 0);
	animation: glitch-anim 2s infinite linear alternate-reverse;
}

.glitch::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	left: -2px;
	text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
	animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
	0% {
		clip: rect(86px, 9999px, 26px, 0);
		transform: skew(0.79deg);
	}

	5% {
		clip: rect(38px, 9999px, 96px, 0);
		transform: skew(0.86deg);
	}

	10% {
		clip: rect(83px, 9999px, 65px, 0);
		transform: skew(0.57deg);
	}

	15% {
		clip: rect(88px, 9999px, 99px, 0);
		transform: skew(0.4deg);
	}

	20% {
		clip: rect(67px, 9999px, 42px, 0);
		transform: skew(0.93deg);
	}

	25% {
		clip: rect(67px, 9999px, 73px, 0);
		transform: skew(0.39deg);
	}

	30% {
		clip: rect(4px, 9999px, 84px, 0);
		transform: skew(0.93deg);
	}

	35% {
		clip: rect(54px, 9999px, 30px, 0);
		transform: skew(0.22deg);
	}

	40% {
		clip: rect(60px, 9999px, 55px, 0);
		transform: skew(0.18deg);
	}

	45% {
		clip: rect(8px, 9999px, 76px, 0);
		transform: skew(0.54deg);
	}

	50% {
		clip: rect(92px, 9999px, 38px, 0);
		transform: skew(0.53deg);
	}

	55% {
		clip: rect(94px, 9999px, 69px, 0);
		transform: skew(0.77deg);
	}

	60% {
		clip: rect(76px, 9999px, 17px, 0);
		transform: skew(0.67deg);
	}

	65% {
		clip: rect(89px, 9999px, 79px, 0);
		transform: skew(0.7deg);
	}

	70% {
		clip: rect(42px, 9999px, 53px, 0);
		transform: skew(0.17deg);
	}

	75% {
		clip: rect(7px, 9999px, 2px, 0);
		transform: skew(0.97deg);
	}

	80% {
		clip: rect(33px, 9999px, 84px, 0);
		transform: skew(0.15deg);
	}

	85% {
		clip: rect(97px, 9999px, 25px, 0);
		transform: skew(0.17deg);
	}

	90% {
		clip: rect(14px, 9999px, 71px, 0);
		transform: skew(0.99deg);
	}

	95% {
		clip: rect(36px, 9999px, 51px, 0);
		transform: skew(0.63deg);
	}

	100% {
		clip: rect(33px, 9999px, 9px, 0);
		transform: skew(0.15deg);
	}
}

@keyframes glitch-anim2 {
	0% {
		clip: rect(68px, 9999px, 84px, 0);
		transform: skew(0.11deg);
	}

	5% {
		clip: rect(35px, 9999px, 68px, 0);
		transform: skew(0.73deg);
	}

	10% {
		clip: rect(37px, 9999px, 46px, 0);
		transform: skew(0.54deg);
	}

	15% {
		clip: rect(56px, 9999px, 35px, 0);
		transform: skew(0.93deg);
	}

	20% {
		clip: rect(65px, 9999px, 55px, 0);
		transform: skew(0.29deg);
	}

	25% {
		clip: rect(53px, 9999px, 76px, 0);
		transform: skew(0.29deg);
	}

	30% {
		clip: rect(50px, 9999px, 60px, 0);
		transform: skew(0.04deg);
	}

	35% {
		clip: rect(67px, 9999px, 17px, 0);
		transform: skew(0.44deg);
	}

	40% {
		clip: rect(54px, 9999px, 46px, 0);
		transform: skew(0.8deg);
	}

	45% {
		clip: rect(56px, 9999px, 75px, 0);
		transform: skew(0.72deg);
	}

	50% {
		clip: rect(90px, 9999px, 68px, 0);
		transform: skew(0.91deg);
	}

	55% {
		clip: rect(71px, 9999px, 72px, 0);
		transform: skew(0.33deg);
	}

	60% {
		clip: rect(46px, 9999px, 93px, 0);
		transform: skew(0.24deg);
	}

	65% {
		clip: rect(70px, 9999px, 12px, 0);
		transform: skew(0.66deg);
	}

	70% {
		clip: rect(93px, 9999px, 94px, 0);
		transform: skew(1deg);
	}

	75% {
		clip: rect(51px, 9999px, 42px, 0);
		transform: skew(0.79deg);
	}

	80% {
		clip: rect(36px, 9999px, 52px, 0);
		transform: skew(0.65deg);
	}

	85% {
		clip: rect(70px, 9999px, 2px, 0);
		transform: skew(0.89deg);
	}

	90% {
		clip: rect(30px, 9999px, 3px, 0);
		transform: skew(0.16deg);
	}

	95% {
		clip: rect(13px, 9999px, 23px, 0);
		transform: skew(0.19deg);
	}

	100% {
		clip: rect(85px, 9999px, 94px, 0);
		transform: skew(0.17deg);
	}
}

@keyframes glitch-skew {
	0% {
		transform: skew(-4deg);
	}

	10% {
		transform: skew(-2deg);
	}

	20% {
		transform: skew(-2deg);
	}

	30% {
		transform: skew(2deg);
	}

	40% {
		transform: skew(-2deg);
	}

	50% {
		transform: skew(3deg);
	}

	60% {
		transform: skew(5deg);
	}

	70% {
		transform: skew(-2deg);
	}

	80% {
		transform: skew(5deg);
	}

	90% {
		transform: skew(-4deg);
	}

	100% {
		transform: skew(0deg);
	}
}