html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
body {
  background: wheat;
  margin: 0em;
  padding: 0em;
}
header {
  background: black;
  box-sizing: border-box;
  color: wheat;
  overflow: hidden;
  width: 100%;
}
header h2 {
  display: inline-block;
  margin: 0.3em 0em;
}
header .logo {
  font-size: 200%;
  margin: 0em 0.5em;
}
.event {
  background: darkolivegreen;
  border-bottom-right-radius: 15px;
  margin: 0.4em;
  overflow: hidden;
  position: relative;
}
.event header {
  background: black;
  border-bottom: 3px solid #39481f;
  color: lightgoldenrodyellow;
  padding: 0.4em;
  padding-left: 61.80339887%;
  position: relative;
}
.event header h3 {
  padding: 0em 0em 0em 0.5em;
}
.event header .date {
  color: lightsalmon;
  font-size: smaller;
  font-style: italic;
}
.event header .location {
  color: orange;
  font-size: smaller;
}
.event .eventImage {
  background-size: cover;
  height: 100%;
  left: 0em;
  position: absolute;
  top: 0em;
  width: 61.80339887%;
}
.event h3 {
  margin: 0em;
}
.event p {
  padding: 0.5em;
}
.event footer {
  background: #39481f;
}
.event footer a {
  color: orange;
  text-decoration: none;
}
.civilwar {
  background: url('../images/civilwar.jpg');
}
.wwii {
  background: url('../images/wwii.jpg');
}