@charset "UTF-8";
/* CSS Document */

html {
	height: 100%;
	background: url(images/splashBackground.png) no-repeat center;
	background-size: cover;
	background-color: #2a2622;
}

/* multiple backgound images. I have have the R positioned 55% from the right and 70% from the top. its size is 30% width and 50% height to the body. The body is 90% width and 80% height to the html. */
body {
	margin-left:auto;
    margin-right:auto;
	width: 90%;
	height: 90%;
	background:url(images/Remblem.png) 55% 70% no-repeat, url(images/paintSplatter.png) right center no-repeat;
	background-size: 30% 50%, 80% 80%;
	max-width: 1200px;
	min-width: 300px;
	min-height: 400px;
	max-height: 700px;	
}


#Text {
	position: absolute;
	top: 77%;
	left: 30%;
	width: 40%;
	height: 25%;
	max-height: 230px;	
	min-height: 100px;
}

#Rgrafx {
	float:left;
	background: url(images/RgrafxLogo.png) no-repeat;
	background-size: 90% 90%;
	width: 35%;
	height: 45%;
}

#ComingSoon {
	float:right;
	margin-top:15px;
	background: url(images/comingSoon.png) 55% 80% no-repeat;
	width: 40%;
	height: 20%;
	background-size: 90% 90%;
}

#mail {
	position: absolute;
	top: 40%;
	left: 35%;
	width: 40%;
	height: 50%;
}

#mail img {
	width: 50%;
	height: 100%;
}

/* Media Queries */

@media only screen and (min-height:1000px) and (min-width:1000px) {
	
				body {
				margin-left:auto;
				margin-right:auto;
				width: 90%;
				height: 90%;
				background:url(images/Remblem.png) 55% 70% no-repeat, url(images/paintSplatter.png) right center no-repeat;
				background-size: 30% 50%, 80% 80%;
				max-width: 1200px;
				min-width: 300px;
				min-height: 400px;
				max-height: 700px;	
	}
                #Text {
					position: absolute;
					top:50%;
					left: 30%;
					width: 40%;
					height: 25%;
					max-height: 200px;
					min-height: 100px;
					max-width:650px;
				}
	
			}
/*		
@media screen and (min-height:1200px)and (min-width:1200px){
			#Text {
					position: absolute;
					top:50%;
					left: 10%;
					width: 40%;
					height: 25%;
					max-height: 200px;
					min-height: 100px;
					max-width:650px;
				}
	
}
*/

@media only screen and (max-width: 450px) {
	
			body {
					margin-left:auto;
					margin-right:auto;
					width: 90%;
					height: 90%;
					background:url(images/Remblem.png) 55% 55% no-repeat, url(images/paintSplatter.png) right center no-repeat;
					background-size: 35% 35%, 80% 60%;
					max-width: 1200px;
					min-width: 400px;
					min-height: 400px;
					max-height: 500px;	
	}
			#Text {
					position: absolute;
					top: 75%;
					left: 20%;
					width: 40%;
					height: 25%;
					max-width:450px;
					min-width: 250px;
					max-height: 200px;
					min-height: 100px;
					
				}
			#Rgrafx {
					float:left;
					background: url(images/RgrafxLogo.png) no-repeat;
					background-size: 90% 90%;
					width: 35%;
					height: 45%;
}

			#ComingSoon {
					float:right; 
					margin-top:15px;
					background: url(images/comingSoon.png) 55% 80% no-repeat;
					width: 40%;
					height: 20%;
					background-size: 90% 90%;
}

			#mail {
					position: absolute;
					top: 40%;
					left: 35%;
					width: 40%;
					height: 50%;
		}

			#mail img {
					width: 50%;
					height: 100%;
		}
}