@import url("https://fonts.googleapis.com/css?family=Crimson+Text:400,700|Fanwood+Text:400,700|Open+Sans:400,700");
*, *:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0; }

html {
  font-size: 18px; }

body {
  color: white;
  background-color: black;
  font-family: 'Crimson Text', serif; }
  body > section {
    max-width: 77rem;
    margin: 0 auto; }

h1 {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute !important; }

h2 {
  font-family: 'Fanwood Text', serif;
  font-weight: normal;
  font-size: 2em;
  margin: 1em 1em 1em 0.5rem; }
  @media (max-width: 35em) {
    h2 {
      font-size: 1.5em;
      margin: 0.75em 0.75em 0.75em 0.5rem; } }
  @media (max-width: 90rem) and (min-width: 57.75rem) {
    h2 {
      margin-left: 10rem; } }

h3 {
  font-size: 1.5em;
  margin: 0 1rem 1rem 0.5rem; }

a, input {
  font-size: 100%;
  color: white;
  transition: color 0.2s ease-in-out; }

a:hover, input:hover {
  color: #444; }

p {
  text-align: justify; }

header img.banner {
  width: 100%;
  min-height: 17em;
  object-fit: cover; }

header img.logo {
  position: absolute;
  max-width: 1062px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 70%;
  bottom: 0;
  padding-bottom: 8%; }
  @media (max-width: 50em) {
    header img.logo {
      width: 90%; } }

header > div {
  position: relative; }

nav {
  z-index: 1;
  position: relative;
  font-size: 120%;
  font-weight: bold; }
  nav input {
    display: none; }
  nav label {
    display: none;
    font-size: 200%;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease-in-out; }
    @media (max-width: 50em) {
      nav label {
        display: block; } }
  nav label:hover {
    color: #444; }
  @media (max-width: 50em) {
    nav > input:checked + ul {
      display: block; } }
  nav > ul {
    display: flex;
    position: absolute;
    top: 1em;
    right: 1em;
    list-style: none; }
    @media (max-width: 50em) {
      nav > ul {
        position: static;
        display: none;
        padding: 1em 4em 1em 1em;
        font-size: 150%; } }
    nav > ul > li {
      margin: 0 1em; }
  nav a {
    text-decoration: none; }

#about iframe, #about p {
  max-width: 100%; }

#about h3 {
  max-width: 80%; }

#about #about-container > div {
  max-width: 38.5rem; }

@media (min-width: 90rem) {
  #about #about-container .about-left {
    float: left; }
  #about #about-container .about-right {
    float: right; } }

@media not all and (min-width: 90rem) {
  #about #about-container > div {
    margin: 0 auto; } }

#about p, #about iframe {
  margin: 0 1rem 1rem 0.5rem; }

#about::after {
  content: "";
  display: block;
  clear: both; }

#awards {
  display: flex;
  flex-flow: row wrap;
  justify-content: center; }
  #awards li {
    margin: 0.5em;
    list-style: none; }
    @media (max-width: 700px) {
      #awards li {
        width: 42%; } }

svg {
  width: 320px; }
  @media (max-width: 700px) {
    svg {
      width: 100%; } }
  svg text {
    font-family: 'Open Sans';
    font-size: 17px;
    fill: white;
    text-anchor: middle; }
  svg text.qualifier {
    transform: translate(160px, 45px); }
  svg text.award {
    transform: translate(160px, 70px);
    font-size: 20px;
    font-weight: bold; }
  svg text.host {
    transform: translate(160px, 95px); }
  svg text.year {
    transform: translate(160px, 140px);
    font-size: 28px; }
  svg use.laurel-right {
    transform: translate(320px, 0) scale(-1, 1);
    width: 80px;
    height: 155px; }

section#devblog {
  max-width: none;
  margin: 0;
  min-height: 25em;
  background-image: url("images/elsinore_wallpaper_2.jpg");
  background-size: cover;
  background-repeat: none;
  display: flex;
  align-items: center;
  justify-content: flex-end; }
  section#devblog a {
    font-size: 120%;
    margin-right: 10%; }

.button {
  border: none;
  padding: 0.75em 1.5em;
  text-decoration: none;
  background-color: black;
  transition: background-color 0.2s ease-in-out; }

.button:hover {
  background-color: #f78a58; }

input {
  cursor: pointer; }

#screenshots ul {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: center; }
  #screenshots ul > li {
    margin: 0.25em;
    list-style: none; }
    #screenshots ul > li img {
      vertical-align: bottom;
      width: 450px;
      height: 253px; }
      @media (max-width: 35em) {
        #screenshots ul > li img {
          width: 100%;
          height: auto;
          object-fit: contain; } }

#team h3 {
  font-size: 1.2em;
  margin-bottom: 0.25em; }

#team > ul {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: center; }
  #team > ul > li {
    margin: 1em;
    flex: 1 1 30em;
    flex-direction: row;
    display: flex;
    list-style: none;
    align-items: flex-start;
    max-width: 40em; }
    #team > ul > li > img {
      flex: 0 0 auto;
      margin-right: 1em;
      object-fit: contain; }
    #team > ul > li > div {
      flex: 1 1 auto;
      min-width: 15em; }
      @media (max-width: 35em) {
        #team > ul > li > div {
          min-width: 0; } }
    @media (max-width: 35em) {
      #team > ul > li {
        flex-direction: column; } }

#presskit > div {
  display: flex;
  justify-content: center;
  flex-flow: row wrap; }
  #presskit > div > section {
    margin: 0 1.5em;
    flex: 1 1 0;
    max-width: 30.8rem; }

#presskit #presskit-facts li {
  margin-left: 2em; }

#presskit #presskit-facts p {
  margin: 0 1rem 1rem 0.5rem; }

#presskit #presskit-logos ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center; }
  #presskit #presskit-logos ul li {
    list-style: none; }
    #presskit #presskit-logos ul li img {
      height: 7em;
      margin: 0 1em; }

footer {
  background-color: #202222;
  margin-top: 2em;
  padding-top: 1em;
  padding-bottom: 2em;
  color: #888; }
  footer h2, footer p, footer ul {
    margin: 0.5em 0; }
  footer #footer-left {
    margin-left: 1em; }
  footer #footer-right {
    text-align: right;
    margin-right: 1em; }
    @media (max-width: 35em) {
      footer #footer-right {
        text-align: left;
        margin-left: 1em;
        margin-top: 2em; } }
  footer > div {
    max-width: 77rem;
    margin: 0 auto;
    display: flex; }
    @media (max-width: 35em) {
      footer > div {
        flex-flow: column; } }
    footer > div > section {
      flex: 1 1 0; }
  footer ul.icons {
    font-size: 150%;
    list-style: none;
    display: flex;
    justify-content: flex-start; }
    @media (max-width: 35em) {
      footer ul.icons {
        justify-content: flex-start; } }
    footer ul.icons a {
      color: #888; }
      footer ul.icons a > i {
        border-radius: 100%;
        border: 1px solid #aaa;
        width: 2em;
        height: 2em;
        line-height: 2em;
        text-align: center; }
      footer ul.icons a > span {
        display: none; }
    footer ul.icons a:hover {
      color: white; }
    footer ul.icons li {
      margin-right: 1em; }
    footer ul.icons li:last-child {
      margin-right: 0; }