/*General*/
body{
	margin:0;
	padding:0;
	font-family:sans-serif;
}

/*Header*/
header{
	width:100%;
	font-size:1.5em;
	background-color:#eaa300;
	color:white;
	font-weight:bold;
	position:fixed;
	z-index:100;
	top:0;
	box-sizing:border-box;
	height:4rem;
}

nav{
	margin:auto;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:auto;
}

nav h1{
	margin:0;
}

/*Main*/

main{
	width:52rem;
	max-width:100%;
	padding:1em;
	box-sizing:border-box;
	margin:auto;
	margin-top:4em;
	margin-bottom:1em;
}

h2{
	text-align:center;
}

/*Packages*/
#package-container{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}

.package{
	width:10em;
	height:10em;
	max-width:100%;
	border-radius:15px;
	padding:1em 0;
	box-sizing:border-box;
	display:block;
	color:#fff;
	text-decoration:none;
	text-align:center;
}

.inline-svg{
	height:1em;
	max-width:1em;
	display:block;
	margin:auto;
	pointer-events:none;
}

.package img{
	font-size:4em;
	filter:brightness(0) invert(1);
}

.package h3{
	margin-bottom:0;
}

.package p{
	margin-top:0;
}

#showpony{
	background-color:#4b59b2;
}

#ferret{
	background-color:#503314;
}

#continue{
	background-color:#fb7f15;
}

#continue img{
	filter:none;
}

.center{
	text-align:center;
}

/*Button links*/
.a-button{
	text-decoration:none;
	color:white;
	background-color:#eaa300;
	width:10em;
	text-align:center;
	display:block;
	margin:auto;
}

/*Footer*/
footer{
	width:100%;
	margin:0;
	background-color:#eaa300;
	color:white;
	text-align:center;
	font-size:.75em;
	position:fixed;
	bottom:0;
}

footer p{
	margin:0;
	padding:.5em;
}

footer a{
	color:#fff;
}