#buttons a {
    display: block;
    background-color: #014e07;
    color: white;
    padding: 15px;
    margin: 10px;
    text-decoration: none;
    font-weight: bold;
}

#buttons a:hover {
    background-color: #17037A;
}

#buttons {
    text-align: center;
}

h1 {
    text-align: center;
}

h2 {
    text-align: center;
}

#homebutton {
display: block;
    background-color: black;
    color: white;
    padding: 10px;
    margin: 10px;
    text-decoration: none;
    font-weight: bold;
width:150px
}

#homebutton {
    text-align: center;
}

#homebutton:hover {
    background-color: #17037A;
}


#navigation {
  font-family: Georgia, serif;
  font-size: 100%;
  border-top: solid 2px #4E0102;
  border-bottom: solid 2px #4E0102;
}

li {
  display: inline;
  list-style-type: none;
}

li {
display: inline;
list-style-type: none;
} 

a:link, a:visited, a:active {
color: black; text-decoration: none; font-weight: bold;
}
a:hover {
color: black; text-decoration: underline; font-weight: bold;
}
.current {
text-decoration: underline; font-weight: bold;
}

.wrapper {
  width: 80%;
  margin: 5px auto;
}

@media screen and (max-width: 960px){
.wrapper {
width:95%;
}
}

@media screen and (max-width: 640px) {
.wrapper {
width: 95%;
}
h1, h2, h3, h4, p {
word-wrap: break-word;
}
}

@media screen and (max-width: 640px) {
  body { font-size: 115%; }
    h1 { font-size: 115%; }
     h2 { font-size: 115%; }
    p { font-size: 115%; }
    li { font-size:115%; }
     a { font-size: 22px; }
}


.box {
float: left;
margin: 6px; 
padding: 10px;
width: 285px;
height: 480px;
border: 1px solid black;
background-color: white; 
}

#banner {
     background-color: #014e07;
    color: white;
    padding: 10x;
    margin: 5px;
}

ul {
    text-align: center;
}

.contentlist li {
display:block;
}