uni.css

@import url(http://fonts.googleapis.com/css?family=Comfortaa:700|Open+Sans|Roboto:300);

body{
	padding:0;
	margin:0;
	font-family: 'Open Sans', sans-serif;
}

header{
	width:80%;
	text-align:center;
	font-family: 'Comfortaa', cursive;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	margin:0;
	transform-origin: top left;
}
h1{
	
	font-size:1000%;
	margin:0;
	color:#f39c12;
}

h2, h3, h4, h5, h6{
	font-family:"Roboto", sans-serif;
}

a{
	color:black;
	text-decoration:underline;
}
a:hover{
	text-decoration:none;
}
a:visited{
	color:black;
}

button{
	border-radius:5px;
	background:rgba(0, 0, 0, 0.7);
	color:white;
	border-style:none;
	padding:10px;
	transition:all 0.2s ease;
	cursor:pointer;
	z-index:5;
}
button:hover{
	background:white;
	color:black;
}


table{
    margin:0 10px 0 0;
    text-align:center;
    border-collapse:collapse;
}
table td:nth-child(odd){
    background-color:rgba(235, 235, 235, 1);
    padding:10px;
}
table td:nth-child(even){
    background-color:rgba(44, 62, 80, 1);
    padding:10px;
    color:white;
}
table th{
    padding:10px;
    background-color:black;
    color:white;
}
table .RRow{
    border-left:solid 1px black;
}


img{
	max-height:100%;
	max-width:100%;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

@media (max-width: 900px), (max-height: 650px){
  body{
  	font-size:75%;
  }
  table th{
  	padding:0;
  }
  table td{
  	padding:0;
  }
}
@media (max-width: 800px), (max-height: 600px){
  body{
  	font-size:50%;
  }
}

@media (min-width: 800px) and (max-width: 1200px) and (max-height: 900px) and (min-height:650px){
  body{
  	font-size:80%;
  }
}

@media (max-width: 1300px) and (min-height: 400px){
	#Assem{
		bottom:0 !important;
	}
}
@media screen and (max-aspect-ratio: 5/7){
	#Crap{
		top:20vh;
	}
	#Landfill{
		transform:translateY(-3vh);
	}
}
@media screen and (max-aspect-ratio: 5/10){
	#Crap{
		top:15vh;
	}
}






















body {
	overflow: hidden;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(/JSDep/preload/img/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}