@import "https://fonts.googleapis.com/css?family=Wire+One";
@import "https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic|Open+Sans+Condensed:300|Passion+One:400,700,900";
@import "https://fonts.googleapis.com/css?family=Courgette";
@import "https://fonts.googleapis.com/css?family=Eagle+Lake";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
body { line-height:1 }
ol, ul { list-style:none }
blockquote, q { quotes:none }
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none
}
table {
	border-collapse:collapse;
	border-spacing:0
}
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
html { overflow-y:auto }
body {
	width:100%;
	margin:0 auto;
	text-align:center;
	background-color:#FFF;
	background-image:url(../images/stars2.jpg);
	background-size:contain;
	background-repeat:repeat;
	z-index:-1;
	position:relative
}
div.page-wrapper {
	position:relative;
	width:96%;
	margin:0 auto;
	z-index:1
}
h1 {
	font-family:'Eagle Lake', cursive;
	font-size:340%;
	padding:0;
	color:#FFF;
	text-shadow:1px 1px 1px #333;
	padding:0;
	margin:0;
	text-shadow:0 1px 1px #000;
	text-align:center
}
h2 {
	padding:2px;
	width:80%;
	border-radius:20px;
	margin:5px auto;
	box-shadow:0 0 20px #FFF
}
h2, h3 {
	font-family:'PT Sans', sans-serif;
	font-weight:800;
	font-size:180%;
	text-align:center
}
p { font-family:'Open Sans', sans-serif }
a {
	font-family:'Courgette', cursive;
	text-decoration:none
}
abbr {
	font-family:'Courgette', cursive;
	text-shadow:0 0 1px #000;
	color:#F4EB33
}
h1 { color:#FFF }
h2 { color:#EEE }
div.main h3 { color:#DDD }
aside h3 { color:#AAA }
a { color:#EEE }
a:hover { color:#F4EB33 }
div.design-selection li { color:#F4EB33 }
section.intro h3 { color:#EEE }
section.intro p { color:#FFF }
section.intro a { color:#111 }
section.intro a:hover { color:#F4EB33 }
div.main p { color:#000 }
div.zen-resources abbr:hover { color:#FFF }
section.intro {
	width:33%;
	height:100%;
	display:inline-block;
	vertical-align:top;
	position:fixed;
	left:2%;
	margin:0 auto;
	z-index:5000;
	background-image:url(../images/rocket102.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	top:20px
}
section.intro h3 {
	padding:2px;
	width:80%;
	border-radius:20px;
	margin:5px auto;
	background-color:transparent
}
section.intro div p {
	width:100%;
	padding:7px 10px;
	margin:5% auto;
	border-radius:10px;
	text-shadow:0 1px 1px #333;
	text-align:left;
	box-shadow:1px 1px 20px #333;
	font-size:100%
}
section.intro div.summary p, section.intro div.preamble p { background-color:rgba(255,255,255,.5) }
div.summary p:nth-child(2) {
	text-align:center;
	background-color:rgba(255,255,255,.5)
}
div.main {
	width:400px;
	margin:0 auto;
	display:inline-block;
	vertical-align:top;
	position:relative;
	z-index:100;
	background-image:url(../images/astro1.png);
	background-size:auto;
	background-repeat:no-repeat;
	background-position:center bottom
}
div.main div {
	max-width:300px;
	margin:0 auto;
	position:relative
}
div.main p {
	width:300px;
	height:300px;
	margin:10px auto;
	background-color:transparent;
	border-radius:50%;
	background-repeat:no-repeat;
	font-weight:800;
	text-shadow:0 0 20px #FFF
}
div.main a { text-shadow:1px 1px 1px #000 }
div.explanation h3, div.participation h3, div.benefits h3, div.requirements h3 {
	background-color:rgba(0,0,0,.6);
	border-radius:40%;
	margin:10px auto;
	font-size:160%
}
div.explanation p:nth-child(2) {
	padding:55px 40px;
	font-size:84%;
	background-image:url(../images/marsanimated300.gif)
}
div.explanation p:nth-child(3) {
	padding:50px 45px;
	font-size:85%;
	background-image:url(../images/mars300.png)
}
div.participation p:nth-child(2) {
	padding:60px 40px;
	font-size:94%;
	background-image:url(../images/mercury300.png)
}
div.participation p:nth-child(3) {
	padding:60px 40px;
	font-size:100%;
	background-image:url(../images/neptune300.png)
}
div.participation p:nth-child(4) {
	padding:50px 42px;
	font-size:90%;
	background-image:url(../images/planetBlueyellow300.png)
}
div.benefits p {
	padding:45px 40px;
	font-size:96%;
	background-image:url(../images/pluto300.png)
}
div.requirements p:nth-child(2) {
	padding:50px;
	background-image:url(../images/jupiter300.png);
	font-size:84%
}
div.requirements p:nth-child(3) {
	padding:40px 44px;
	font-size:74%;
	background-image:url(../images/planetGreen300.png)
}
div.requirements p:nth-child(4) {
	padding:60px 40px;
	font-size:98%;
	background-image:url(../images/planetPink300.png)
}
div.requirements p:nth-child(5) {
	padding:40px 50px;
	background-image:url(../images/planetlBlue300.png)
}
div.requirements p[role="contentinfo"] {
	padding:60px;
	font-size:140%;
	background-image:url(../images/moon300.png);
	margin-bottom:200px
}
footer {
	display:flex;
	width:300px;
	margin:100px auto 0;
	box-shadow:1px 1px 30px #000;
	flex-wrap:wrap
}
footer a {
	display:inline-block;
	background-color:transparent;
	padding:4px;
	font-size:110%;
	text-shadow:0 0 1px #000;
	margin:10px auto
}
aside.sidebar {
	width:33%;
	height:100%;
	right:2%;
	display:inline-block;
	vertical-align:top;
	position:fixed;
	margin-top:10px;
	z-index:5000;
	background-image:url(../images/earth400.png);
	background-repeat:no-repeat;
	background-size:50%;
	background-position:bottom center
}
div.design-selection h3, div.design-archives h3, div.zen-resources h3 {
	padding:2px;
	width:100%;
	margin:5px auto;
	border-radius:0;
	margin:0 auto;
	background-color:transparent;
	font-size:150%
}
div.design-selection h3 { margin:0 auto }
div.design-selection li {
	padding:10px 5px;
	box-shadow:1px 1px 5px #333;
	font-size:110%;
	padding:4px;
	width:100%;
	border-radius:20px;
	margin:10px auto;
	box-shadow:0 0 10px #FFF;
	background-color:transparent
}
div.design-archives {
	width:100%;
	margin:0 auto
}
div.design-archives ul {
	display:flex;
	align-items:center
}
div.design-archives li {
	margin:0 auto;
	padding-top:44px;
	padding-left:5px;
	width:145px;
	height:95px;
	background-color:transparent;
	background-image:url(../images/meteorite2.png)
}
div.design-archives li:nth-child(2) {
	font-size:80%;
	padding-top:46px
}
div.zen-resources ul {
	display:flex;
	flex-wrap:wrap;
	margin:20px 0 auto;
	width:100%;
	flex-direction:row-reverse
}
div.zen-resources li { padding:8px 4px }
div.zen-resources li a {
	box-shadow:0 0 1px #000;
	font-weight:800;
	box-shadow:1px 1px 5px #333;
	vertical-align:central
}
div.zen-resources li {
	font-size:110%;
	padding:4px;
	border-radius:20px;
	margin:10px auto;
	background-color:transparent
}
div.zen-resources li:nth-child(1) { transform:rotate(2deg) }
div.zen-resources li:nth-child(2) { transform:rotate(-2deg) }
div.zen-resources li:nth-child(3) { transform:rotate(2deg) }
div.zen-resources li:nth-child(4) { transform:rotate(-2deg) }
div.zen-resources li:nth-child(5) { transform:rotate(2deg) }
@media only screen and (max-height:600px) {
div.page-wrapper {
	background-image:url(../images/astro1.png);
	background-size:auto;
	background-repeat:no-repeat;
	background-position:center bottom;
	width:98%;
	padding:2px;
	margin:auto
}
section.intro {
	position:relative;
	left:0
}
section.intro div p { font-size:96% }
div.main {
	width:31%;
	margin:10px auto 0;
	display:inline-block;
	vertical-align:top;
	position:relative;
	background-size:200px;
	padding-bottom:100px;
	background-color:transparent;
	background-image:none;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:bottom
}
aside.sidebar {
	position:relative;
	right:1%
}
div.participation h3 {
	margin:40px auto 10px;
	box-shadow:none
}
div.zen-resources, div.design-archives {
	margin:0 auto;
	font-size:90%
}
div.participation p:nth-child(2) {
	font-size:94%;
	margin:10px 0 10px -220px
}
div.participation p:nth-child(3) { margin:-300px 0 10px 200px }
div.participation p:nth-child(4) { margin:10px 0 }
div.benefits h3 { margin:20px auto }
div.benefits p { margin:10px 0 }
div.requirements h3 { margin-top:30px }
div.requirements p:nth-child(2) { margin:20px 200px 100px -200px }
div.requirements p:nth-child(3) { margin:-380px -200px 100px 200px }
div.requirements p:nth-child(4) { margin:-80px -200px 10px 200px }
div.requirements p:nth-child(5) { margin:-320px 200px 100px -200px }
div.requirements p[role="contentinfo"] { margin:20px auto 50px }
footer {
	width:300px;
	margin:80px auto 20px;
	flex-wrap:wrap
}
footer a {
	box-shadow:none;
	padding:5px;
	background-color:rgba(0,0,0,.8)
}
h2 { font-size:160% }
}
@media only screen and (max-width:1600px) {
h1 { font-size:300% }
div.explanation h3 { font-size:150% }
}
@media only screen and (max-width:1366px) {
h1 { font-size:280% }
h2, .preamble h3 { font-size:155% }
}
@media only screen and (max-width:1280px) {
h1 { font-size:240% }
h2, .preamble h3 { font-size:145% }
}
@media only screen and (max-width:1200px) {
h1 { font-size:220% }
h2, .preamble h3 { font-size:135% }
section.intro div p { font-size:105% }
}
@media only screen and (max-width:1023px) {
h1 { font-size:200% }
section.intro p { width:94% }
h2, .preamble h3 { font-size:130% }
section.intro div p { font-size:98% }
}
@media only screen and (max-width:960px) {
h1 { font-size:180% }
div.design-selection li { font-size:84% }
div.explanation h3 { font-size:120% }
h2, .preamble h3 { font-size:115% }
section.intro div p { font-size:95% }
}
@media only screen and (max-width:860px) {
h1 { font-size:260% }
h2, .preamble h3 { font-size:170% }
h2 { font-size:170% }
h3 {
	padding:0;
	margin:10px auto;
	font-size:135%
}
div.explanation h3 { font-size:160% }
section.intro div p { font-size:120% }
div.explanation h3, div.participation h3, div.benefits h3, div.requirements h3 {
	padding:10px 0;
	font-size:180%
}
section.intro {
	width:100%;
	max-width:100%;
	margin:10px auto;
	height:auto;
	display:block;
	vertical-align:center;
	position:relative;
	z-index:10001;
	padding:10px 0;
	background:none
}
div.main {
	width:400px;
	margin:0 auto;
	display:inline-block;
	vertical-align:top;
	position:relative;
	z-index:100;
	background-image:url(../images/astro1.png);
	background-size:auto;
	background-repeat:no-repeat;
	background-position:center bottom
}
div.main div {
	max-width:100%;
	margin:0;
	position:relative
}
section.intro div p {
	width:90%;
	padding:10px 5px;
	margin:10px auto;
	background-color:#FFF;
	box-shadow:1px 1px 20px #333
}
section.intro p:first-child { margin-top:30px }
section.intro div {
	width:100%;
	display:block;
	padding:0;
	margin:0 auto
}
div.main {
	width:100%;
	margin:10px auto;
	display:block;
	vertical-align:center;
	position:relative;
	padding:0;
	z-index:10001;
	background-image:none
}
div.main div {
	max-width:100%;
	width:100%;
	margin:10px auto;
	padding:0
}
div.explanation p:nth-child(2), div.explanation p:nth-child(3), div.explanation p:nth-child(4), div.participation p:nth-child(2), div.participation p:nth-child(3), div.participation p:nth-child(4), div.benefits p, div.requirements p, div.requirements p:nth-child(2), div.requirements p:nth-child(3), div.requirements p:nth-child(4), div.requirements p:nth-child(5) {
	margin:10px auto;
	border-radius:50%;
	width:400px;
	height:400px;
	padding:80px 60px;
	background-color:transparent
}
div.explanation p:nth-child(2) {
	padding:65px 60px;
	font-size:110%;
	background-image:url(../images/marsanimated400.gif)
}
div.explanation p:nth-child(3) {
	background-image:url(../images/mars400.png);
	padding:60px;
	font-size:110%
}
div.participation p:nth-child(2) {
	margin-top:30px;
	padding:80px 60px;
	font-size:120%;
	background-image:url(../images/mercury400.png)
}
div.participation p:nth-child(3) {
	padding:90px 60px;
	font-size:126%;
	background-image:url(../images/neptune400.png)
}
div.participation p:nth-child(4) {
	padding:80px 60px;
	font-size:120%;
	background-image:url(../images/planetBlueyellow400.png)
}
div.benefits p {
	width:400px;
	height:400px;
	padding:80px 60px;
	font-size:120%;
	background-image:url(../images/pluto400.png)
}
div.requirements p:nth-child(2) {
	background-image:url(../images/jupiter400.png);
	padding:75px 60px;
	font-size:115%;
	margin-top:20px
}
div.requirements p:nth-child(3) {
	padding:70px 60px;
	font-size:96%;
	background-image:url(../images/planetGreen400.png)
}
div.requirements p:nth-child(4) {
	padding:80px 60px;
	font-size:120%;
	background-image:url(../images/planetPink400.png)
}
div.requirements p:nth-child(5) {
	padding:80px 60px;
	font-size:120%;
	background-image:url(../images/planetlBlue400.png)
}
div.requirements p[role="contentinfo"] {
	padding:120px 60px;
	font-size:150%;
	margin-bottom:0;
	background-image:url(../images/moon400.png)
}
div.requirements {
	padding:0;
	margin-bottom:0
}
footer { margin:10px auto }
aside.sidebar {
	width:100%;
	height:100%;
	left:0;
	display:block;
	vertical-align:center;
	position:relative;
	padding:0;
	margin:0 auto;
	background-image:url(../images/astro1.png);
	background-size:auto
}
div.wrapper {
	width:100%;
	padding:0;
	margin:0 auto
}
div.design-selection { margin-bottom:20px }
div.design-selection ul {
	width:98%;
	margin:0 auto
}
div.design-selection li, div.design-archives li { font-size:125% }
div.design-archives li {
	margin:0 auto;
	padding-top:5px;
	width:145px;
	height:30px;
	background-color:rgba(255,255,255,.3);
	background-image:none
}
div.design-archives li:nth-child(1), div.design-archives li:nth-child(2) {
	font-size:110%;
	padding:4px
}
div.design-archives li a { text-shadow:0 0 2px #000 }
div.design-archives h3, div.zen-resources h3 {
	color:#000;
	text-shadow:0 0 10px #FFF
}
}
@media only screen and (max-width:420px) {
h1 { font-size:200% }
div.explanation p:nth-child(2), div.explanation p:nth-child(3), div.explanation p:nth-child(4), div.participation p:nth-child(2), div.participation p:nth-child(3), div.participation p:nth-child(4), div.benefits p, div.requirements p, div.requirements p:nth-child(2), div.requirements p:nth-child(3), div.requirements p:nth-child(4), div.requirements p:nth-child(5) {
	margin:10px auto;
	border-radius:50%;
	width:300px;
	height:300px;
	font-size:94%
}

div.main p {
	width:300px;
	height:300px;
	margin:10px auto;
	background-color:rgba(100,100,255,.1);
	border-radius:50%;
	border:0 solid;
	background-repeat:no-repeat
}
div.explanation h3, div.participation h3, div.benefits h3, div.requirements h3 { font-size:160% }
div.explanation p { font-size:90% }
div.explanation p:nth-child(2) {
	padding:50px 40px;
	font-size:86%;
	background-image:url(../images/marsanimated300.gif)
}
div.explanation p:nth-child(3) {
	padding:40px 45px;
	font-size:85%;
	background-image:url(../images/mars300.png);
	padding-top:50px
}
div.participation p { font-weight:800 }
div.participation p:nth-child(2) {
	padding:60px 40px;
	font-size:94%;
	background-image:url(../images/mercury300.png)
}
div.participation p:nth-child(3) {
	padding:70px 40px;
	font-size:100%;
	background-image:url(../images/neptune300.png)
}
div.participation p:nth-child(4) {
	padding:50px 42px;
	font-size:90%;
	background-image:url(../images/planetBlueyellow300.png)
}
div.benefits p {
	width:300px;
	height:300px;
	padding:52px 40px;
	font-size:98%;
	background-image:url(../images/pluto300.png)
}
div.requirements p {
	width:300px;
	height:300px;
	background-color:#EEE;
	margin:30px auto;
	border-radius:50%;
	font-size:90%;
	font-weight:800
}
div.requirements p:nth-child(2) {
	padding:50px;
	background-image:url(../images/jupiter300.png);
	font-size:84%
}
div.requirements p:nth-child(3) {
	padding:40px 44px;
	font-size:74%;
	background-image:url(../images/planetGreen300.png)
}
div.requirements p:nth-child(4) {
	padding:60px 40px;
	font-size:96%;
	background-image:url(../images/planetPink300.png)
}
div.requirements p:nth-child(5) {
	padding:60px 50px;
	background-image:url(../images/planetlBlue300.png)
}
div.requirements p[role="contentinfo"] {
	padding:90px 60px;
	font-size:130%;
	width:300px;
	height:300px;
	background-image:url(../images/moon300.png)
}
footer {
	width:96%;
	box-sizing:border-box
}
div.zen-resources ul {
	display:flex;
	flex-wrap:wrap;
	margin:20px 0 0;
	width:96%;
	flex-direction:row-reverse
}
div.zen-resources li { padding:8px 4px }
div.zen-resources li a {
	box-shadow:0 0 1px #000;
	font-weight:800;
	box-shadow:1px 1px 5px #333;
	vertical-align:central
}
div.zen-resources li {
	font-size:100%;
	padding:4px 2px;
	border-radius:0;
	margin:10px auto;
	background-color:transparent
}
}
@media only screen and (max-width:330px) {
div.page-wrapper {
	width:100%;
	padding:0;
	margin:0;
	left:0;
	right:0
}
body {
	width:100%;
	padding:0;
	margin:0
}
h1 { font-size:170% }
section.intro p { width:90% }
h2, .preamble h3 { font-size:120% }
section.intro div p { font-size:100% }
section.intro div.summary, section.intro div.preamble { width:100% }
section.intro div.summary p, section.intro div.preamble p {
	width:96%;
	border-radius:0
}
h1 {
	width:96%;
	margin:5px auto;
	padding:2px
}
div.design-selection h3, div.design-archives h3, div.zen-resources h3 {
	padding:2px;
	width:100%;
	border-radius:0;
	margin:5px auto;
	font-size:120%
}
div.design-selection li {
	padding:5px 3px;
	font-size:100%;
	width:100%;
	border-radius:0;
	margin:10px auto;
	box-shadow:none;
	background-color:transparent;
	border:none;
	background-color:rgba(255,255,255,.3)
}
div.design-archives h3 {
	box-shadow:none;
	color:#FFF
}
div.zen-resources {
	margin-bottom:210px;
	box-shadow:none;
	color:#FFF
}
div.zen-resources h3, div.design-archives h3 {
	box-shadow:none;
	color:#FFF;
	font-size:150%;
	padding:0;
	margin-top:5px;
	text-shadow:none
}
div.zen-resources ul {
	margin-top:0;
	padding-top:0
}
}