/*
Color Palette
#9fad91—sage green
#722916—brick red
#738b83—muted teal green
#5d1110-maroon
#755c29-medium brown
#d5cb8c—khaki tan
*/
@font-face {font-family: "beginner"; src: url("EduSABeginner-VariableFont_wght.ttf"); format("ttf");
}
@font-face {font-family: "childrensignature"; src: url("ChildrenSignature.ttf"); format:("ttf")}

body {
font-family:"Outfit", Arial, sans-serif;
color:#5d1110;
background-color:#9fad91;
margin-left:10%;
margin-right:10%;
width: 75%;
min-width: 720px;
margin:0 auto;
}
  	  
p {
margin: 30px;
padding: 30px;
background-color: #d5cb8c;
border: 8px dotted;
border-color: #722916;
opacity: 0.6;
} 
/*display: inline;
position: relative;*/
div.info {
width: 35%;
font-size: 1.2em;
border: double .4em;
padding:.5em;
margin: 1em;
color:#738b83;
float: left;
position: center;

}

div.footericons{
	text-align: center;
	margin:auto;
}
div.photoalbum img{
	border: .8em;
	margin:.5em;
	padding: 1em;
}
div#skipnav{
	position: relative;
	right: 12.5%;
}
h1 {
font-family: "childrensignature";
font-size:3em;
color:#722916;
display: block;
position: center;
background-color:#9fad91;
padding:1em;
border: double 1em;
margin-left:12%;
margin-right:12%;
text-align:center;
	}
h2 {font-family: "childrensignature";
 	font-size:2.2em;
 	clear: left;
	}
table {
margin: 15px;
border:3px;
background-color:#9fad91;
color:#722916;
}
caption{
font-family: "beginner";
font-size:3em;
}
th{
font-family: "beginner";
font-size:1.5em;
}
td{
padding:2em;
border-style: double;
}
nav {display:inline-block;
	margin-left:12%;
	margin-right:12%;
	}
nav ul{
	list-style-type:none;
	}
nav ul li {
	float: left;
	margin-right:.5em;
	}

nav ul li a {
  font-family: "childrensignature";
  font-size:1.8 em;
  padding: 0.25em 1em;
  text-decoration: none; /* no underline */
  background-color:#d5cb8c; /* khaki */
  color: #5d1110; /* maroon */
  border: 2px solid #722916; /*brick red*/
  border-top-left-radius: 1em 1em; /* rounded corner! */
  border-top-right-radius: 1em 1em; /* another rounded corner! */
  }
a {color:#722916;
  }
  
button {
    font-size: 3em;
    background-color: #d5cb8c;
    color: #722916;
    border: 3px double black;
    padding-top: .5em;
    padding-left: 3em;
    padding-right: 3em;
    padding-bottom: .5em;
    box-shadow: 4px 4px 4px #999999;
    font-family: "childrensignature";
    border-top-left-radius: 2.5em 2.5em; /* rounded corner! */
  	border-top-right-radius: 2.5em 2.5em; /* another rounded corner! */
    border-bottom-left-radius: 2.5em 2.5em; /* another rounded corner!! */
  	border-bottom-right-radius: 2.5em 2.5em; /* another rounded corner!!! */
  	}
  
button#lightbulb {
    font-size: 2em;
    background-color: #d5cb8c;
    color: #722916;
    border: 3px double black;
    padding-top: .5em;
    padding-left: .5em;
    padding-right: .5em;
    padding-bottom: .3em;
    box-shadow: 4px 4px 4px #999999;
    font-family: "childrensignature";
    border-top-left-radius: .5em .5em; /* rounded corner! */
  	border-top-right-radius: .5em .5em; /* another rounded corner! */
 }
button:hover, button:focus, button:active {
    /* swap colors */
    color: #d5cb8c;
    background-color: #722916;
    cursor: pointer; /* displays a hand */
  }
@keyframes rotate {
  from {transform: rotate(0deg);
  }
  to {transform: rotate(360deg);
  }
}
img#barfbag {
    animation-name:            rotate; 
    animation-duration:        0.5s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/*psuedo classes*/
a:visited {
	color:#755c29;
	}
a:active {
	color:#d5cb8c;
	}
a:hover {
	color:#9fad91;
	}
p:first-letter {
	font-family: "childrensignature";
	font-size: 3em;
	font-weight:bold;
	} 
nav ul li a:hover{
	font-size:1.5em;
	}
div:hover ul{
	display: block;
	}