body {
 color: black;
 background-color: white;
 font-family: sans-serif;
}

h2, hr {
 text-align: center;
 width: 100%;
}

body > div {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 width: 100%;
}

.top {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 background-color: rgb(90%, 90%, 90%);;
}

.top > div {
 display: flex;
 justify-content: center;
 align-content: start;
 flex-wrap: wrap;
 flex: 1 1 33%;
 min-width: 30em;
}

.contact, .event, .job, #about > p, #reports > ul {
 background-color: rgb(95%, 95%, 95%);
 padding: 1em;
 margin: 1em;
 width: max( 45%, 20em );
}

.event, .job, #about > p, #reports > ul {
 width: 100%;
}

.sitename, .jobtitle, .reporttype, .eventname {
 font-weight: bold;
 font-size: 1.5em;
 text-align: center;
 padding-bottom: 0.5em;
}

.email {

}

.event {
 width: 100%;
}

.contact > div {
 padding: 3px;
}

a {
 text-decoration: none;
}

a.job {
  display:block;
}

a:hover {
  background-color: rgb(95%, 30%, 30%);
}

li .hours {
 font-weight: bold;
 float: right;
}

ul.hours {
 padding: 5px;
 list-style: none;
 width: 45%;
 min-width: 15em;
}

#reports ul {
 list-style: none;

}


#header {
 position: sticky;
 background: white;
 width: 100%;
 top: 0;
}

#header img {
 position: absolute;
 left: 0px;
 margin: 5px;
 width: 64px;
 display: inline-flex;
}

#header h2 {
 width: auto;
}

#header .logo {
 float: left;
 display: inline-flex;
}

#header .lang {
 border-radius: 1em;
 border: 1px solid black;
 display: inline-flex;
 position: absolute;
 right: 0px;
 padding: 12px;
 top: 10px;
}

#header a {
 text-decoration-line: initial;
}