h1{
  font-family: "Sour Gummy", sans-serif;
  color: red;
  text-decoration: underline;
  text-shadow: 2px 2px 2px pink;
}
h2{
  font-family:"Gorditas";
  color: #00008A;
  text-shadow: 2px 1px 4px #0A2A49;
}
h3{
  font-family: "Sour Gummy", sans-serif;
  color: blue;
  font-size: 30px;
  text-shadow: 2px 1px 4px #04b384;
}
body, footer{
  background-color: gold;
  font-family: "Luckiest Guy", sans-serif;
  font-size:20px;
  text-align: center;
  margin: 2em;
}
p{
  font-family: "Shadows Into Light Two", cursive;
}

.img-responsive, img {
  border: 4px solid black;
  max-width: 100%;
}
figure{
  border: 3px solid black;
  background-color: #FFE7FF;
  padding: 0.5em;
  margin-bottom: 3em;
}
a:link{
  color: purple;
}
a:hover{
  color: red;
}
a:clicked{
  color: blue;
}
nav a{font-family: "Gorditas";
}
ul, ol{
  display: inline-block;
  font-family: "Shadows Into Light Two", cursive;
  text-align: center;
}
.box{
  background-color: orange;
  border-color: black;
  border-radius: 4px;
  box-shadow: 2px 2px 3px black;
  margin-bottom: 2em;
  padding: 2em;
}
.container{
  background-color: #ffffff;
  box-shadow: 2px 2px 4px black;
  border-radius: 6px;
  padding: 2em;
  margin-bottom: 2em;

}
section{
  background-color: #ffffff;
  padding: 1em;
}
#web div {
	display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
}
#navitems{
  flex-direction: column;
  list-style: none;
}
#contactInfo ul li{
    display: inline-block;
    list-style: none;
  }
form label,
form input,
form textarea {
	width: 100%;
  margin-bottom: 1em;
}
.sr-only {
  position: absolute;
  left: -10000px;
  display: none;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sr-only:focus {
	position: static;
  width: auto;
  height: auto;
}
  #mobile{
    display: none;
  }
#sidenav{
  position: sticky;
  flex-wrap: wrap;
}
#sidenav label{
	display: inline-block;
  font-style: normal;
  font-size: 1.2em;
  cursor: pointer;
}
#navitems{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  display: none;
}
#sidenav items{
  cursor: pointer;
  flex-direction: row;
}
#sidenav input:checked ~ #navitems {
  display: flex;
}
@media screen and (min-width: 576px) {
  #web div {
  	flex-direction: row;
    flex-wrap: wrap;
  }
   #contactInfo ul li:not(:last-child):after {
  	content: " | ";
  }
  #navitems{
    display: flex;
  }
  #sidenav label {
  	display: none;
  }
}