@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 100;
  src: url("/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 100;
  font-style: italic;
  src: url("/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 200;
  src: url("/fonts/AtkinsonHyperlegibleNext-Light.woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 200;
  font-style: italic;
  src: url("/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: regular;
  src: url("/fonts/AtkinsonHyperlegibleNext-Regular.woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: regular;
  font-style: italic;
  src: url("/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: bold;
  src: url("/fonts/AtkinsonHyperlegibleNext-Bold.woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: bold;
  font-style: italic;
  src: url("/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: bolder;
  src: url("/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: bolder;
  font-style: italic;
  src: url("/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2");
}
body {
  margin: 0.5in 0.3in;
  background-color: #222;
  color: #ddd;
  font-family: "Atkinson Hyperlegible";
}
body #content {
  margin: 0 20%;
}
body header {
  text-align: center;
}
body p {
  font-weight: 200;
}
body #event-list {
  list-style: none;
  text-align: center;
}
body #event-list li {
  text-decoration: none;
  margin-top: 1em;
  text-align: left;
}
body #event-list li a, body #event-list li a:hover, body #event-list li a:visited {
  color: #ddd;
  text-decoration: none;
}
body #event-list li a .event-title, body #event-list li a:hover .event-title, body #event-list li a:visited .event-title {
  display: block;
  font-size: 125%;
  font-weight: lighter;
}
body #event-list li a .thumb, body #event-list li a:hover .thumb, body #event-list li a:visited .thumb {
  display: block;
}

/* Event detail pages */
h2#event-detail-date {
  font-weight: lighter;
}

/* Responsive media queries */
@media screen and (max-width: 600px) {
  body {
    margin: 0.75in 0.3in;
  }
  #content {
    margin: 0;
  }
}
@media screen and (min-width: 600px) and (max-width: 1000px) {
  #content {
    margin: 0 10%;
  }
}