/* this style-sheet is for my custom designs */

/* 
----Main Color Palette---- 
   #802fc5   purple
   #0f7f82   dark teal
   #ed7e00   orange
   #296dff   subdued blue
   #e8dda4   tan 
   #ffcc00   yellow
   #ce0c0c   red
*/

* {
	font-family: Arial, Helvetica, sans-serif;
}

/* body { */
	/* background-image: url("images/background-space.jpg");
	background: url("background-space.jpg");
	background-image: url(images/space.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top:68px;
	margin-bottom:50px; */
	/* background-image: url("images/spacebanner.jpg"); */
/* 	background-color: black;
} */

body {
		/* you need the file path to go up a directory */
		background-image: url("../images/background-space.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: black;
	}

main {
}

h1, h2 {
	text-align: center;
	font-weight: bold;
	color: #FFD700;
}

h1 {
	font-size: 5em;
	text-decoration: underline;
}

h2 {
	font-size: 2em;
}

.planet-h2 {
	font-size: 3em;
	font-family: "Times New Roman", Helvetica, sans-serif;
}

.image {
	display: block;
	/* uncomment below command for color size references */
	/* background-color: green; */
	margin: 0 auto;
} 

.planet-p {
	color: #07079e; /* Navy */
	text-align: center;
	font-weight: bold;
	font-size: 110%;
	background-color:rgba(192,192,192,0.6);
}

#logo {
	display: block;
	margin: 0 auto;
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
	.image {
		width: 90%;
		/* uncomment below command for color size references */
		/* background-color: blue; */
	}
	
	#logo {
		width: 40%;
	}
}

@media screen and (min-width: 431px) and (max-width: 600px) {
	.image {
		width: 50%;
		/* uncomment below command for color size references */
		/* background-color: yellow; */
	}
}

@media screen and (min-width: 431px) and (max-width: 799px) {
	
	#solar {
		width: 100%
	}
	
	#logo {
		width: 25%;
	}
	
	.planet-h2 {
		font-size: 200%;
	}
	
	.image {
		width: 100%;
		/* uncomment below command for color size references */
		/* background-color: yellow; */
	}
	
	.planet-p {
		font-size: 110%;
	}
}

@media screen and (min-width: 431px) and (max-width: 600px) {
	.image {
		width: 50%;
		/* uncomment below command for color size references */
		/* background-color: yellow; */
	}
}