body {
  /* We can't trust our users on this one */
  color: #000;
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1675;
}

#nav {
  text-align: right;
  position: fixed;
  right: 8px;
  font-size: 1rem;
  line-height: 2;
}

.primary-main {
  padding: 2rem;
  width: calc(50vw - 0.25rem);
  /* This is the scientifically proven best ratio for our content */
  margin-left: 13.3837%;
}

.logo {
  width: 20rem;
  bottom: 2rem;
  right: 2rem;
  display: block;
  position: fixed;
}

@media screen and (max-width: 65em) {
  #nav {
    position: relative;
  }

  .primary-main {
    width: 70%;
  }

  .logo {
    bottom: default;
    left: 2rem;
    position: absolute;
    right: default;
    top: 2rem;
  }
}

@media screen and (max-width: 36em) {
  .logo {
    width: 15rem;
  }
}

@media screen and (max-width: 30em) {
  body {
    font-size: 1rem;
    font-weight: 300;
  }

  #nav {
    font-size: 0.85rem;
  }

  .logo {
    width: 10rem;
  }
}

@media screen and (max-width: 25em) {
  .logo {
    width: 8rem;
  }
}