#banner
{
  text-align: center;
}

#name
{
  font-size: 18pt;
  margin: 1em;
  font-family: fantasy;
}

#banner img
{
        width: 50%;
}

nav
{
        width: 90%;
        margin: auto;
        text-align: center;
}
nav li {
        display: inline-block;
        width:1in;
        margin-right: 5px;
        font-size:14pt;
        text-align: center;
        background-color: blue;
        color: white;
        box-shadow: black 5px 5px;
}


nav a {
        text-decoration: none;
        color: white;
}
nav ul {
padding: 0;
}

nav li.active {
  background-color: brown;
  border: 3px solid black;
}

nav li:hover{
  background-color:black;
}

.section {
  width: 75%;
  margin: auto;
  padding-bottom: 1em;
  background-color: rgb(220,200,190);
}
.section h2 {
        background-color: white;
        width: fit-content;
        padding: 10px 10px;
        box-shadow: black 5px 5px;

        position: relative;
        top: 10px;
        left: 10px;
}
p a
{
text-decoration:none;
}
#blue
{
color: rgb(0,40,129);
}
.batman
{
color: rgb(0,0,139);
}
#red
{
color: red;
}
#top
{
  color:rgb(27, 10, 88);
  text-align: center;
  padding: 30px;
  text-shadow: 3px 3px 5px #000;
  font-family: 'Sans Normalcy','Nanum Gothic',Arial,sans-serif;
  font-size: 1.5em;
}
.topimg
{
  border: 2px solid #000;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(180, 179, 179, 0.1);
}
.imgbox
{
  display: flex;
  justify-content: center;
}