html, body {
	height: 100%; 
	margin: 0; 
	overflow: hidden;
	user-select: none; /* supported by Chrome and Opera */
	   -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Firefox */
	   -ms-user-select: none; /* Internet Explorer/Edge */
}

body{
	background-color:#fff;
	color: #fff;
	margin:0;
	width:100%;
}

/* --------------------------------------------------------------------------- IMAGES */

.background img{
	height: 90%;
	width: auto;
	position: absolute;
	bottom: 0;
	left: 12%;
	z-index: -1;
}

.front img{
	height: 90%;
	width: auto;
	position: absolute;
	bottom: 0;
	left: 12%;
	z-index: 1;
}


/* --------------------------------------------------------------------------- COMPUTER TEXT */

h1{
	font-family: paralucent-condensed, sans-serif;
	font-size: 25vh;
	font-style: normal;
	font-weight: 200;
	letter-spacing: .15em;
	margin: 0;
}

.computerWrapper{
	color:#000;
	font-weight: 200;
	margin:0;
	overflow: hidden;
	padding:0;
	white-space: nowrap;
	width:200%;
}

.computerWrapper .row1{
	margin:0;
	padding:0;
	position: absolute;
	top: 5%;
	z-index: 2;
}

.computerWrapper .row3{
	margin:0;
	padding:0;
	position: absolute;
	top: 63%;
	z-index: 2;
}

.row1aID{
	left: 0%;
  	animation: row1a 30s linear infinite;
}

.row1bID{
	left: 100%;
  	animation-delay: 20s;
  	animation: row1b 40s linear infinite;
}

.computerWrapper .row2{
	margin:0;
	padding:0;
	position: absolute;
	top: 32%;
}

#row2aID{
	left: 25%;
  	animation: row2a 20s linear 1;
  	animation-fill-mode: forwards;
}


#row2bID{
	left: 100%;
  	animation: row2b 20s linear infinite;
  	animation-delay: 15s;
}


@keyframes row1a {
  0% {
    left: 100%;
  }
  100% {
    left: -140%;
  }
}

@keyframes row2a {
  0% {
    left: 25%;
  }
  100% {
    left: -215%;
  }
}

@keyframes row2b {
  0% {
    left: 100%;
  }
  100% {
    left: -140%;
  }
}


/* --------------------------------------------------------------------------- USER BUTTON */

a{
	background-color: #49c4f5;
	border: 3px solid #fff;
	box-shadow: 10px 10px #fff41f;
	color: #fff;
	font-family: orator-std, monospace;
	font-size: 1.1em;
	font-style: normal;
	font-weight: 100;
	font-weight: 400;
	margin:0;
	padding: 15px 25px;
	position: absolute;
	text-decoration: none;
	text-decoration: none;
	width: 20%;
	z-index: 3;
}

.userButton1 a{
	top: 20%;
	animation: buttonAScroll 17s linear infinite;
}

.userButton1 a:hover{
	animation-play-state: paused;
}

@keyframes buttonAScroll{
  0% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}

.userButton2 a{
	top: 50%;
	animation: buttonBScroll 12.5s linear infinite;
}

.userButton2 a:hover{
	top: 60%;
}

@keyframes buttonBScroll{
  0% {
    right: -30%;
  }
  100% {
    right: 100%;
  }
}