body {
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:110%;
	background:white;
}
nav {
	height:auto;
	background:lemonchiffon;
    padding:10px;
}
nav a {
    text-decoration:none;
}
nav ul li {
	list-style:none;
	border-bottom:black 2px solid;
	border-right:black 2px solid;
	text-align:center;
	width:95%;
	background:white;
}
nav ul li a:link, nav ul li a:visited {
    color:black;
   	text-decoration:none;
}
nav ul li a:hover, nav ul li a:active{
	display:block;
    background:#08C6ED;
    color:black;
}
a:link, a:visited, a:hover,a:active{
	color:#F432AB;
	text-shadow:1px 1px black;
}
p.tip {
    position: relative;
    z-index: 100;
	padding:10px;
}

p.tip span {
    display: none;
}

p.tip:hover span {
    display: block;
    position: absolute;
    width: 200px;
    padding: 3px;
    border: 1px solid black;
    background: linear-gradient(#F432AB,white);
    color: black;
    text-align: center;
	margin-top:1%;
} 
header{
	width:100%;
	margin-top:0%;
	background:#08C6ED;
	padding:10px;
	box-shadow:3px 3px #555; 
}
h1{
	color:white;
    text-shadow:3px 3px gray;	
    text-align:center;
    font-size:3em;
	font-family:"Bubblegum Sans",cursive;
}
h2{
	color:#F432AB;
    text-shadow:1px 1px 1px black;	
    text-align:center;
	font-family:"Bubblegum Sans",cursive;	
    font-size:2em;
}
h3{
	color:#F863BF;
    text-shadow:1px 1px gray;	
    text-align:center;
	font-family:"Bubblegum Sans",cursive;	
    font-size:2em;
}
section, div{
	padding:5px;
	margin-top:0px;
}
#extra {
    background: #08C6ED;
    padding: 25px;
    box-shadow:3px 3px #555;
	
}
footer {
    color: black;
    text-align: right;
    padding: 15px;
	width:100%;
}
img{
	width:50%;
}
img span{
	width:150px;
}
.box{
	text-indent:10px;
	display:inline-grid;
	margin-right:1%;
	margin-left:1%;
	margin-bottom:150px;
	outline: 2px inset #F432AB;
	width:25%;
}
.center{
	margin-right:auto;
	margin-left:auto;
}

.title{grid-area:head;}
.menu{grid-area:nav;}
.content{grid-area:main;}
.extra{grid-area:aside;}
.contact{grid-area:foot;}


/* For mobile phones: */
@media only screen and (max-width: 480px) {
	.grid-container{
		display:grid;
		grid-template-areas:
			'head head head'
			'nav nav nav'
			'main main main'
			'aside aside aside'
			'foot foot foot';
		grid-gap:0px;
		padding:4px;
	}
.box{
		margin-right:5%;
		margin-left:5%;
	}
	p.tip span{
		padding-top:2%;
		padding-right:2%;
	}
	header img{
		display:none;
	}
}
/* For tablets: */
@media only screen and (min-width:481px) {
	.grid-container{
		display:grid;
		grid-template-areas:
			'head head head'
			'main main main'
			'nav nav nav'
			'aside aside aside'
			'foot foot foot';
		grid-gap:0px;
		padding:5px;
	}

	#things{
		display:none;
	}
}

/* For desktop: */
@media only screen and (min-width: 769px) {
	.grid-container{
		display:grid;
		grid-template-areas:
		'head head head head head head'
		'main main main main nav nav'
		'aside aside aside aside nav nav'
		'foot foot foot foot foot foot';
		grid-gap:0px;
		padding:10px;
	}

	#things{
		display:inline;
	}
	#extra img{
		max-width:400px;
	}
	#extra{
		font-size:1.3em;
	}
}