/* Main CSS for all web pages */
body{
	background-color:  #023047;
	font-size: 15px;
}
#logo{
	position: absolute;
	width: 150px;
	height: 150px;
	top: 0px;
	right: 0px;
}
h1{
	font-family: "Bodoni MT", serif;
	font-size: 50px;
	color: #ffffff;
	text-align: center;
}
nav{
	font-family: "Courier New", serif;
	font-size: 15px;
	color: #ffffff;
	text-align: center;
}
ol, h2, dt{
	font-family: "Bodoni MT", serif;
	font-size: 30px;
	color: #ffffff;
}
p, label, dd{
	font-family: "Courier New", Serif;
	color: #ffffff;
}
li{
	color: #ced4da;
	display: inline-block;
	margin: 17px;
}
hr{
	color: white;
}
a:visited{
	color: #ffffff;
	display: inline-block;
}
a:hover, a:active{
	background-color: #ffffff;
	color: #023047;
	display: inline-block;
}
.borderplanets, .borderdwarf{
	padding: 5px;
	border: none;
}
table.satellites, ul{
	border-collapse: collapse;
	color: #0b4f6c;
}
td, th, caption{
	font-family:"Courier New", serif;
	color: white;
	border: 2px solid white;
	border-collapse: collapse;
}
fieldset, label, .color{
	border-radius: 20px;
	background-color: #daf5fe;
	color: #22223b;
}
video, #mars2, #saturn2{
	width: 400px;
	height: 200px;
}
.mainImages{
	width: 150px;
	height: 150px;
}

/* CSS for Our Solar System page, Asteroid Belt Page, Dwarf Planets Page */

#solarSystemPage, #asteroidBeltPage, #dwarfPlanetsPage{
	display: flex;
	justify-content: center;
}
.solarInfoPage{
	flex: 2;
	text-align: right;
	font-size: 15px;
	padding: 10px;
	padding-top: 100px;
	padding-left: 250px;
	padding-right: 50px;
}
.asteroidInfoPage{
	flex: 7;
	text-align: right;
	font-size: 15px;
	padding: 10px;
	padding-top: 100px;
	padding-left: 250px;
	padding-right: 50px;
}
.dwarfPlanetsInfo{
	flex: 5;
	text-align: right;
	font-size: 15px;
	padding: 10px;
	padding-top: 100px;
	padding-left: 250px;
	padding-right: 50px;
}

#solarImageLayout{
	flex: 2;
	padding-left: 150px;
}
#dwarfPlanetsImage1{
	flex: 1;
	padding-left: 150px;
	padding-top: 100px;
}
#dwarfPlanetsImage2{
	flex: 1;
	padding-left: 100px;
	padding-top: 200px;
}
#dwarfPlanetsImage3{
	flex: 1;
	padding-left: 100px;
	padding-top: 100px;
}

#solarImageLayout{
	flex: 2;
	padding-left: 150px;
}
#asteroidImageLayout1{
	flex: 2;
	padding-left: 100px;
	padding-top: 100px;
}
#asteroidImageLayout2{
	flex: 5;
	padding-left: 100px;
	padding-top: 100px;
}

#sideImageLayout{
	flex: 1;
	padding-right: 150px;
	height: 650px;
}
#sunFlex, #oortCloudFlex, #asteroidBeltFlex, #cometFlex, #plutoFlex, #ceresFlex, #erisFlex, #makemakeFlex, #haumeaFlex{
	display: flex;
	justify-content: center;		
	padding-left: 50px;
}
.sunImage, .oortCloudImage, .asteroidBeltImage, .cometsImage, .plutoImage, .ceresImage, .erisImage, .makemakeImage, .haumeaImage{
	flex: 1;
	height: 400px;
	width: 400px;
}
.sunInfo, .oortCloudInfo, .asteroidBeltInfo, .cometsInfo, .plutoInfo, .erisInfo, .haumeaInfo{
	flex: 4;
	text-align: left;
	font-size: 15px;
	padding-left: 50px;
	padding-right: 150px;
}

#kuiperBeltFlex, #asteroidFlex, #meteorFlex{
	display: flex;
	justify-content: center;		
	padding-left: 50px;
}
.kuiperBeltInfo, .asteroidsInfo, .meteorsInfo, .ceresInfo, .makemakeInfo{
	flex: 4;
	text-align: right;
	font-size: 15px;
	padding-left: 150px;
	padding-right: 50px;
}
.kuiperBeltImage, .asteroidsImage, .meteorsImage{
	flex: 1;
	height: 400px;
	width: 400px;
	padding-right: 60px;
}
.eris, .makemake, .haumea{
	flex: 1;
	padding-bottom: 200px;
}
.ceres{
	flex: 1;
	padding-top: 100px;
}
.ddPadding{
	padding-right: 35px;
}


/* CSS for Our 8 Planets Page and Hypothetical Planets Page*/
#planetPage, #hypoPlanetPage{
	display: flex;
	justify-content: center;
}
.planetsInfoPage{
	flex: 7;
	text-align: left;
	font-size: 15px;
	padding: 10px;
	padding-top: 100px;
	padding-right: 250px;
}
.hypoPlanetsInfo{
	flex: 7;
	text-align: left;
	font-size: 15px;
	padding: 10px;
	padding-top: 100px;
	padding-right: 250px;

}
#planetsImageLayout1{
	flex: 2;
	padding-left: 100px;
}
#planetsImageLayout2{
	flex: 2;
	padding-left: 100px;
	padding-right: 150px;
}
#hypoPlaneImageLayout{
	flex: 2;
	padding-left: 100px;
	padding-right: 150px;
	padding-top: 100px;
}
#sideImageLayoutA{
	flex: 1;
	padding-right: 150px;
	height: 650px;
	padding-right: 50px;
}
#sideImageLayoutB{
	flex: 1;
	padding-right: 50px;
	height: 850px;
}
#mercuryFlex, #venusFlex, #earthFlex, #marsFlex, #jupiterFlex, #saturnFlex, #uranusFlex, #neptuneFlex, #HypoFlex, #planetXFlex{
	display: flex;
	justify-content: center;		
	padding-left: 50px;
}
.mercuryImage, .venusImage, .earthImage, .marsImage, .jupiterImage, .saturnImage, .uranusImage, .neptuneImage, .hypoPlanet, .planetX{
	flex: 1;
	height: 400px;
	width: 400px;
}
#venusInfo,#marsInfo,#saturnInfo,#neptuneInfo, #planetXInfo{
	flex: 4;
	text-align: left;
	font-size: 15px;
	padding-left: 50px;
	padding-right: 150px;
}
#mercuryInfo, #earthInfo, #jupiterInfo, #uranusInfo, #hypoInfo{
	flex: 4;
	text-align: right;
	font-size: 15px;
	padding-left: 150px;
	padding-right: 50px;
}  
.soundsmercury, .soundsvenus, .soundsearth{
	flex: 1;
	padding-top: 100px;
}

/* CSS for Black Hole Page */

#blackHolePage{
	display: inline-grid;
}
#sideImageLayout{
	grid-column: 1/2;
	grid-row: 1/6;	
	padding-left: 5px;
	padding-right: 0px;
}
.blackInfo{
	grid-column: 2/4;
	grid-row: 1/4;
	padding-top: 100px;
	padding-right: 550px;
	padding-left: 50px;
	text-align: left;
	font-size: 20px;	
}
.blackImage{
	grid-column: 4/5;	
	grid-row: 2/5;
	padding-right: 150px;
}

#blackHoleGrid{
	display: inline-grid;
}
.blackHoleInfo{
	grid-column: 1/3;
	grid-row: 1/4;
	text-align: right;
	padding-top: 10px;
	padding-right: 50px;
	padding-left: 150px
}
.blackHoleImage{
	grid-column: 3/5;
	grid-row: 3/4;
	padding-top: 10px;
	height: 400px;
	width: 400px;
}

#unicornGrid{
	display: inline-grid;
}
.unicornInfo{
	grid-column: 3/5;
	grid-row: 1/4;
	text-align: left;
	padding-top: 10px;
	padding-left: 50px;
	padding-right: 150px
}
.unicornImage{
	grid-column: 1/3;
	grid-row: 1/2;
	padding-top: 10px;
	height: 400px;
	width: 400px;
}

/* CSS for homepage*/
.homepage{
	width: 200px;
	height: 200px; 
}
#linkLayout{
	display: flex;
}
.links{
	flex: 1;
}