html {
  font-size: 1.3em;
  font-family: monospace;
  /* height: 100%; */
  /* width: 100%; */
  background-color: #1e2736;
}

body {
  color: #ffffff;
  background-color: #1e2736;
  /* min-height: 100%; */
  /* min-width: 100%; */
}

a {
  color: #e0934e;
}

a:hover {
  color: #dea97a;
}

.title {
  color: #f3e597;
}

img {
  max-width: 100%;
  height: auto;
}

.logo {
  max-width: 40%;
}

header {
  text-align: center;
}

footer {
  padding-top: 50px;
  font-size: 0.7rem;
}

nav > ul {
  list-style: none;
  padding: unset;
}

nav > ul > li {
  float: left;
  padding-right: 0.5em;
  list-style: none;
}

nav::after {
  content: "";
  clear: both;
  display: table;
}

/* Eventually switch this to `main` */
body {
  padding-left: 2%;
  padding-right: 2%;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  html {
    font-size: 1em;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  body {
    padding-top: 3%;
    padding-left: 10%;
    padding-right: 10%;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  html {
    font-size: 1.5em;
  }

  body {
    padding-top: 5%;
    padding-left: 20%;
    padding-right: 20%;
  }

  .logo {
    max-width: 30%;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}