header {
  overflow: hidden;
  position: relative;
  color: var(--moss);
  background-color: var(--vellum);
}

.header-contents {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1366px;
  min-width: 360px;
  margin: auto;
}

@keyframes tickle {
  0% {
    transform: none;
  }
  50% {
    transform: scale(1.1) rotate(-12deg) translateY(-2px);
  }
  100% {
    transform: scale(1.2) rotate(12deg) translateY(-4px);
  }
}

#logo {
  margin-top: 56px;
  transition: color 150ms ease;
}

#logo:hover {
  color: var(--sand);
  animation: tickle 250ms ease 0ms infinite alternate forwards;
}

.illustrations-top {
  position: relative;
}

.illustrations-bottom {
  position: relative;
}

.intro,
.illustrations-top {
  margin: 0 8%;
  max-width: 666px;
}

.intro h2 {
  font-size: 40px;
  line-height: 52px;
  margin: 0 0 32px;
}

.inspectable {
  cursor: cell;
}

#paperclips {
  position: absolute;
  left: 110px;
  top: 152px;
}

#paperclips-three {
  display: initial;
  position: absolute;
  left: 776px;
  top: 370px;
}

.map {
  position: absolute;
  top: -44px;
  left: 300px;
  transform: rotate(-10deg);
}

.synth {
  position: absolute;
  top: -235px;
  left: 800px;
  transform: rotate(3deg);
}

.ipad {
  position: absolute;
  top: -626px;
  left: 308px;
}

.watch {
  position: absolute;
  top: 160px;
  left: 320px;
  transform: rotate(-5deg);
}

.xray {
  opacity: 1;
  transition: opacity 200ms ease;
}

.xray:hover {
  opacity: 0;
}

@media screen and (max-width: 1239px) {
  .illustrations-top {
    height: 382px;
  }

  .map {
    top: -10px;
    left: -80px;
  }

  .watch {
    top: 8px;
    left: 90px;
  }

  #paperclips {
    display: none;
  }
}

@media screen and (min-width: 720px) and (max-width: 1239px) {
  .illustrations-bottom {
    height: 500px;
  }

  .synth {
    top: -110px;
    left: 620px;
  }

  #paperclips-three {
    top: 506px;
    left: 550px;
  }
}

@media screen and (min-width: 1240px) {
  .intro,
  .illustrations-top {
    margin: 0 auto 0 140px;
  }

  .illustrations-top {
    height: 386px;
  }

  .illustrations-bottom {
    height: 550px;
  }
}

@media screen and (max-width: 719px) {
  .intro h2 {
    font-size: 28px;
    line-height: 40px;
  }

  .illustrations-top {
    height: 200px;
  }

  #paperclips-three {
    top: -70px;
    left: -167px;
  }

  .ipad {
    display: none;
  }

  .map {
    top: 0px;
    left: -60px;
  }

  .synth {
    top: -340px;
    left: 400px;
  }

  .watch {
    top: 0;
    left: 100px;
  }

  .illustrations-bottom {
    height: 360px;
  }

  .links {
    display: block;
    max-height: initial;
  }
}
