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

@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

body
{
	background-image:url(images/backgroundsmall.jpg);
	background-repeat: repeat-x;
	/* background-size: 3750px 4000px; */
	background-position:50% 0px;
	background-color:#000;
}

#maincontainer
{
	width:1250px;
	margin:0 auto;
}

#sky
{
	width: 100%;
	background-image: url("images/planet.png");
	background-position: 100px bottom;
	background-size: 187px 187px;
	background-repeat: no-repeat;
}

#logo
{
	width: 470px;
	height: 441px;
	margin:0 auto;
}

#welcomebox
{
	padding-top:90px;
	padding-left:15px;
	padding-right:10px;
	width:650px;
	float: left;
	display: inline;
}

#picturebox
{
	width:372px;
	margin-top:170px;
	float:right;
	display:inline;
}

#subcontent
{
	padding-left:15px;
	padding-right:10px;
	width:100%;
	float:left;
	display:inline;
}

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

H1
{
	font-family: 'Amatic SC', cursive;
	color: #00a888;
	font-size:90px;
	margin-bottom: 0px;
	padding:0px;
}

H2
{
	font-family: 'Amatic SC', cursive;
	color: #ffab62;
	font-size:44px;
	margin-bottom: 10px;
}

H3
{
	color: #00a888;
	font-size: 22px;
	font-family: Calibri, Arial, Candara, Segoe, "Segoe UI", Optima, sans-serif;
	margin-bottom: 0px;
	margin-top:0px;
	font-weight: bold;
}

H4
{
	color: #00a888;
	font-size: 20px;
	font-family: Calibri, Arial, Candara, Segoe, "Segoe UI", Optima, sans-serif;
	margin-bottom: 0px;
	margin-top:0px;
	font-weight: normal;
}

p
{
	font-family: Calibri, Arial, Candara, Segoe, "Segoe UI", Optima, sans-serif;
	color: #eeebff;
	font-size:18px;
	margin-top:0px;
	margin-bottom:15px;
}

.bubble1
{
	font-family: Calibri, Arial, Candara, Segoe, "Segoe UI", Optima, sans-serif;
	color: #361852;
	font-size:17px;
	margin-top:0px;
	margin-bottom:15px;
	width:200px;
	height:100px;
	float: left;
	display: inline;
	position:relative;
	margin-top:47px;
	margin-left:-255px;
	line-height:100%;
}

.bubble2
{
	font-family: Calibri, Arial, Candara, Segoe, "Segoe UI", Optima, sans-serif;
	color: #361852;
	font-size:17px;
	margin-top:0px;
	margin-bottom:15px;
	width:200px;
	height:100px;
	float: left;
	display: inline;
	position:relative;
	margin-top:65px;
	margin-left:-240px;
	line-height:100%;
}


.bubble3
{
	font-family: Calibri, Arial, Candara, Segoe, "Segoe UI", Optima, sans-serif;
	color: #361852;
	font-size:17px;
	margin-top:0px;
	margin-bottom:15px;
	width:200px;
	height:100px;
	float: left;
	display: inline;
	position:relative;
	margin-top:40px;
	margin-left:-240px;
	line-height:100%;
}


.bubble4
{
	font-family: Calibri, Arial, Candara, Segoe, "Segoe UI", Optima, sans-serif;
	color: #361852;
	font-size:17px;
	margin-top:0px;
	margin-bottom:15px;
	width:200px;
	height:100px;
	float: left;
	display: inline;
	position:relative;
	margin-top:60px;
	margin-left:-260px;
	line-height:100%;
}


.bubblebox
{
	float:left;
	display:inline;
}

.name
{
	font-family: 'Amatic SC', cursive;
	color: #ffab62;
	font-size:40px;
	margin-bottom: 0px;
	text-align: center;
	float: left;
	display:inline;
	width: 95%;
}

.copyright
{
	font-family: Calibri, Arial, Candara, Segoe, "Segoe UI", Optima, sans-serif;
	color: #eeebff;
	font-size:12px;
}

#copyrightbox
{
	margin-top: 30px;
	margin-bottom: 20px;
	float: left;
	display: inline;
}

/* -------------- Mobile Screen Optimization --------------- */

@media only screen and (max-width: 768px)
{
	body
	{
		background-image:url(images/backgroundmobile.jpg);
	}
	
	img
	{
		max-width: 300px;	
	}
	
	#maincontainer
	{
		width:100%;
	}
	
	#welcomebox
	{
		width:90%;
	}
	
	#sky
	{
		background-position: 0px bottom;
	}
	
	#logo
	{
		width:300px;
	}
	
	#picturebox
	{
		width:280px;
		float:left;
		margin-top:30px;
	}
	
	#subcontent
	{
		width:90%;	
	}
	
}