/* resets */

* {
	font-weight: 400;
	font-size: 100%;
	font-style: normal;
	font-family: 'Open Sans',sans-serif;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
	border: none;
	line-height: 1.5rem;
	word-spacing: .25em;
}

ul li { list-style-type: none; }
ol li {
	list-style-type: decimal;
	list-style-position: inside;
}
strong, b { font-weight: 700; }
em, i { font-style: italic; }
img { margin:1rem }

blockquote {
	margin:.5rem .75rem 1.5rem;
	padding:.75rem;
	background-color:white;
	outline:thin solid hsl(75,95%,40%);
	box-shadow: .5rem .51rem 1rem hsla(75,95%,40%,.5);
}

figure {
	display:block;
	float:left;
	margin: .25rem 2rem 1rem 0rem;
	background-color:white;
	outline:thin solid hsl(75,95%,40%);
	box-shadow: .5rem .5rem 1rem hsla(75,95%,40%,.5);
}

figure img {
	margin:.5em;
}

figure figcaption {
	display:block;
	line-height:1rem;
	margin:.5em;
	font-size:.666666666667rem;
}

a {
	color: hsl(320,100%,50%);
	font-weight: 700;
}

p { margin: 0rem 0rem 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 1.5rem;
	font-weight: 700;
}

h1 {
	font-size: 2.5rem;
	line-height: 3rem;
	margin:.75rem 0rem .25rem;
	}
h2 {
	font-size: 1.5rem;
	line-height: 2rem;
	margin:.75rem 0rem .25rem;
}
h3 { font-size: 1rem;
	line-height: 1.5rem;
}



/* end resets */


body {
	color: hsl(75,100%,10%);
	background-color: hsl(75,80%,30%);
}

div#sizewrap {
	position: relative;
	z-index: 0;
	min-height: 100%;
	background-color: hsl(75,95%,85%);
}

div#main {
	position: relative;
	padding: 6rem 1rem 4rem 1rem;
}

div#notices {
	position: fixed;
	z-index: 10;
	top: 0px;
	height: 6rem;
	width: 100%;
	left: 50%;
	transform: translate(-50%,0%);
	text-align: center;
	background: linear-gradient( hsla(75,95%,85%,1) 75%, hsla(75,95%,85%,0) );
}

div#notices p {
	text-align: center;
	margin: 1rem;
	line-height: 1rem;
}

@keyframes color-cycle {
       from	{ color: hsl(320,100%,50%); }
       to	{ color: hsl(275,100%,50%); }
}


div#splash {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding:0 10%;
	font-weight: 700;
	min-height: 80%;
	text-align: center;
	animation: color-cycle 10s infinite alternate;
}

div#splash p{
	font-size: 2rem;
	line-height: 2.5rem;
	margin:0px;
}

@media (min-width: 35rem) {
	div#notices {
		height: 4rem;
		width: 100%;
		left: 50%;
		transform: translate(-50%,0%);
	}
	div#notices p.copy {
		text-align: left;
		width: 50%;
		margin: 1rem 2rem;

	}
	div#notices p.links {
		position: absolute;
		top: 0px;
		right: 0px;
		text-align: right;
		width: 50%;
		margin: 1rem 2rem;
	}

	div#main {
	padding: 4rem 2rem 4rem 2rem;
	}
}

@media (min-width: 62rem) {
	div#sizewrap {
		width: 60rem;
		margin: auto;
		border-style: solid;
		border-width: thin;
		border-color: hsl(75,80%,10%);
		box-shadow: 1rem 0rem 3rem hsla(75,80%,10%,.5);
	}

	div#notices {
		width: 60rem;
		left: 50%;
		transform: translate(-50%,0%);
	}


}