@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;
  background: linear-gradient(#222228, #202420);
  background-attachment: fixed;
  color: #ddd;
  font-family: "Atkinson Hyperlegible";
}
body header {
  text-align: center;
}
body p {
  font-weight: 200;
}
body h1 {
  margin-top: 1.5em;
}
body a:visited, body a:hover {
  color: #ddd;
}
body #event-list {
  list-style: none;
  text-align: center;
  padding: 0;
}
body #event-list li {
  display: block;
  width: 300px;
  text-decoration: none;
  margin: 2em auto;
  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 text- .event-date, body #event-list li a:hover text- .event-date, body #event-list li a:visited text- .event-date {
  font-weight: regular;
}
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: 135%;
  font-weight: lighter;
  margin: 0.2em 0 0.5em 0;
}
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;
  font-size: 150%;
  margin-bottom: 0;
}

h2#event-detail-location {
  font-weight: lighter;
  font-size: 120%;
  margin-top: 0;
  margin-bottom: 2em;
}
h2#event-detail-location a, h2#event-detail-location a:hover, h2#event-detail-location a:visited {
  text-decoration: none;
}

#event-detail-image {
  width: 100%;
  text-align: center;
}
#event-detail-image img {
  margin: 1em auto;
}

table#event-detail-info {
  font-weight: lighter;
  font-size: 120%;
  font-style: italic;
  margin: 2em;
  border-spacing: 1em 0.5em;
}
table#event-detail-info td:first-child {
  text-align: center;
}
table#event-detail-info .ticket-link {
  font-weight: normal;
}

/* Responsive media queries */
@media screen and (max-width: 600px) {
  body {
    margin: 0.2in 0;
  }
  #content {
    margin: 0 2em;
  }
  img#logo-image {
    width: 90%;
  }
  table#event-detail-info {
    margin: 1em;
  }
}
@media screen and (min-width: 600px) and (max-width: 1000px) {
  body {
    margin: 0.4in 0;
  }
  #content {
    margin: 0 10%;
  }
  table#event-detail-info {
    margin: 1em;
  }
}
@media screen and (min-width: 1000px) {
  body {
    margin: 0.4in 0;
  }
  #content {
    margin: 0 20%;
  }
}