body {
	background: #e84eab;
	margin:0;
	padding:0;
	min-height:100vh;
}

#bg {
	background: url(/images/Sprocki-Site-BG2.png) center/cover no-repeat;
	height:100vh;
	width:130vw;
	position: fixed;
	top: 0vh;
	left: 0vw;
	animation: bgmove 30s ease 2s infinite alternate;
}

#lineup {
	font-size:2vmax;
	text-decoration:blink;
}

@keyframes bgmove {
	from {left:0vw;}
	to {left:-30vw;}
  }

#header {
	position:absolute;
	top:3vh;
	left:25vw;
	width:50vw;
	mix-blend-mode: difference;
}

#springr {
	position: fixed;
	top: 5vh;
	right: 5vw;
	width:5vw;
	height:90vh;
	mix-blend-mode: difference;
}

#springl {
	position: fixed;
	top: 5vh;
	left: 5vw;
	width:5vw;
	height:90vh;
	mix-blend-mode: difference;
	-webkit-transform: scaleX(-1);
	  transform: scaleX(-1);
}

@font-face {
  font-family: Redaction;
  src: url(/images/Redaction_50-Bold.woff2);
}

#text {
	position:absolute;
	top:25vh;
	left: 30vw;
	width: 40vw;
	text-align:center;
	font-family: Redaction;
	color:white;
	font-size:1vmax;
	mix-blend-mode: screen;
	padding-bottom:50vh;
}

.textbig {
	font-size:4vmax;
}

#text a {
	color:white;
	text-decoration:none;
}

#text a:hover {
	color:white;
	text-decoration:underline;
}

#dancerholder {
	position: fixed;
	bottom:5vh;
	left:15vw;
	width:70vw;
	background:transparent;
}


.dancer {
	position:fixed;
	bottom:5vh;
	width: 16vw;
	mix-blend-mode: difference;
	animation: dance 5s ease-in-out 0s infinite alternate;
	rotate: -10deg;
}

#dancer1 {
	left:15vw;
}

#dancer2 {
	left:33vw;
}

#dancer3 {
	left:51vw;
}
#dancer4 {
	left:69vw;
}

@media screen and (min-width: 800px) {
  #dancer2 {
	display:none;
  }
  #dancer3 {
	display:none;
  }
}

@media screen and (max-width: 800px) {
	#text {
		left:15vw;
		width:70vw;
		font-size:2vmax;
	  }
}

.dancer:nth-child(2n) {
	-webkit-transform: scaleX(-1);
	  transform: scaleX(-1);
	  animation-delay: 1s;
}

@keyframes dance {
	from {rotate: -10deg;}
	to {rotate: 10deg;}
	
}