header h1 {
  font-size: 12px;
  color: #000000;
  display: inline-block;
  position: fixed;
  top: 0;
  right: 100%;
  transform: rotate(-90deg);
  transform-origin: 100% 0;
  /*
white-space: nowrap; — Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
*/
  white-space: nowrap;
  padding: 20px 41px 0 0;
  text-decoration: none;
  z-index: 9;

  cursor: url('juan-cursor.png') 0 0, pointer; /* Legacy */
  cursor: url('juan-cursor.svg') 0 0, pointer; /* FF */
  cursor: -webkit-image-set(url('juan-cursor.png') 1x, url('juan-cursor-2x.png') 2x) 15 15, pointer; /* Webkit */
}

header h1:hover {
  color: #cccccc;
}

nav {
  position: fixed;
  justify-content: space-between;
  display: inline-block;
  top: 86vh;
  left: 0;
  transform-origin: 0 0;
  transform: rotate(-90deg) translate(-50%, 0);
  padding: 20px 41px 0 2rem;
  z-index: 8;
}

nav a {
  font-size: 12px;
  color: #000000;
  line-height: 1.125;
  text-decoration: none;

  margin: 0 8px;

  cursor: url('juan-cursor.png') 0 0, pointer; /* Legacy */
  cursor: url('juan-cursor.svg') 0 0, pointer; /* FF */
  cursor: -webkit-image-set(url('juan-cursor.png') 1x, url('juan-cursor-2x.png') 2x) 15 15, pointer; /* Webkit */
}

nav a:hover {
  color: #cccccc;
}

@media (max-width: 540px) {
  header {
    display: flex;
    top: 0;
    left: 0;
  }

  header h1 {
    flex: 1;
    font-size: 12px;
    color: #000000;
  }

  header h1:hover {
    color: #cccccc;
  }

  nav {
    margin-left: auto;
  }

  nav a {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
  }

  header nav a:hover {
    color: #cccccc;
  }