@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
@import url('https://fonts.googleapis.com/css?family=Roboto');

body { background-color:#000000; margin: 0; padding: 0;}
a:link {color:#EB1F97; text-decoration:none;} 
a:visited {color:#EB1F97; text-decoration:none;} 
a:hover {color:#009aff; text-decoration:none;} 
a:active {color:#009aff; text-decoration:none;}
#wrapper { max-width:1440px; margin-left:auto; margin-right:auto; background-color:#ffffff;}
#inwrap {max-width: 70%; margin-left:auto; margin-right:auto;}
#left { float:left; width:41%; border-right:solid; border-right-width:2px; border-right-color:#D8D8D8; padding-right:8%;}
#right {float:left; width:41%; padding-left:8%;}
.side1 {float:left; width:40%;}
.side2 {float:left; width:57%;}
.box {padding: 10px; background-color:#3985DD;}
hr {display: block; border: 0; height: 3px; background: #000000;}
#footer1 { max-width:2048px; padding:5px 0 30px 5%; background-color: #000000; text-align:left;}
.footer1_box {font-family: Arial, Helvetica, sans-serif; width: 21% height: 50px; font-size:10px; background-color: #000000; color:#ffffff; display: inline-block; padding:5px; vertical-align: bottom; text-align:left; margin-top:20px; margin-right:4%;}
.social {height:50px; float:left; margin-left:10px;}
img {display: block; max-width: 100%; height: auto;}
#banner { position:relative; background-color:#000000; display:block;  padding: 5% 0;}
#nasa {position:absolute; top:12%; left:2%;}
#chandra {position:absolute; top:20%; right:4.1%;}
p.intro {font-family: 'Roboto', sans-serif; font-size:24px; font-weight: bold; line-height:37px; text-align:left;}
p.title {font-family: 'Roboto', sans-serif; font-size:16px; font-weight: bold; line-height:22px; text-align:left;}
p {font-family: 'Libre Baskerville', serif; font-size:14px; line-height:20px;  text-align:left;}
p.caption {font-family: 'Libre Baskerville', serif; font-size:12px; line-height:16px;  text-align:left;}
p.box {font-family: 'Roboto', sans-serif; font-size:12px; font-weight:bold; line-height:16px; color:#ffffff; text-align:left;}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media only screen and (max-width: 800px) {
p { font-size: 80%; }
p.intro { font-size: 90%; }
p.title { font-size: 90%; }
p.caption { font-size: 70%; }
#nasa img {width: 50%; height: auto;}
#chandra img {width: 50%; height: auto;}
#footer1 {float:left; max-width:100%;}
}