phosphor-icons/src/components/Header/Header.css

header {
  width: 100%;
  background-color: #ffd171;
  overflow: hidden;
}

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

.illustrations-top {
  position: relative;
}

.illustrations-bottom {
  position: relative;
}

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

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

.inspectable {
  cursor: cell;
}

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

.xray:hover {
  opacity: 0;
}

#paperclips-three {
  display: none;
}

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

  #marker-purple {
    position: absolute;
    left: 28px;
    top: -158px;
  }

  #billiard-ball {
    position: absolute;
    left: 132px;
    top: -98px;
  }

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

  #warning {
    position: absolute;
    left: 394px;
    top: -304px;
  }

  #tablet {
    position: absolute;
    left: 672px;
    top: -900px;
  }
}

@media screen and (min-width: 720px) and (max-width: 1239px) {
  .intro {
    margin: 0 auto;
  }

  .illustrations-bottom {
    height: 612px;
  }

  #cutting-mat {
    position: absolute;
    left: 96px;
  }

  #receipt {
    position: absolute;
    left: -36px;
    top: 190px;
  }

  #calculator {
    position: absolute;
    left: 632px;
    top: 170px;
  }
}

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

  .illustrations-top {
    height: 386px;
  }

  .illustrations-bottom {
    height: 606px;
  }

  #marker-purple {
    position: absolute;
    left: 144px;
    top: -158px;
  }

  #billiard-ball {
    position: absolute;
    left: 900px;
    top: 400px;
  }

  #paperclips {
    display: none;
  }

  #paperclips-three {
    display: initial;
    position: absolute;
    left: 724px;
    top: 694px;
  }

  #warning {
    position: absolute;
    left: 1170px;
    top: 400px;
  }

  #tablet {
    position: absolute;
    left: 578px;
    top: -900px;
  }

  #cutting-mat {
    position: absolute;
    left: 120px;
  }

  #receipt {
    position: absolute;
    left: -16px;
    top: 190px;
  }

  #calculator {
    position: absolute;
    left: 924px;
    top: 114px;
  }
}

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

  .illustrations-top {
    height: 352px;
  }

  .illustrations-bottom {
    display: none;
  }

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