* {
  box-sizing: border-box;
}

html {
  transition: border 0.1s;
  font-size: 16px;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (min-width: 47.9375rem) {
  html {
    border-left: 1.7vw solid #F8FF00;
    background: none;
  }
}
@media screen and (min-width: 108.25rem) {
  html {
    border-left: 1.875rem solid #F8FF00;
  }
}
html:before {
  content: "";
  position: fixed;
  border-left: 1.875rem solid #F8FF00;
  top: 0;
  bottom: 0;
  left: 0;
}
@media screen and (min-width: 47.9375rem) {
  html:before {
    display: none;
  }
}

body {
  transition: transform 0.1s;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 47.9375rem) {
  body {
    transform: scale(0.44);
  }
}
@media screen and (min-width: 50rem) {
  body {
    transform: scale(0.46);
  }
}
@media screen and (min-width: 56.25rem) {
  body {
    transform: scale(0.51);
  }
}
@media screen and (min-width: 62.5rem) {
  body {
    transform: scale(0.57);
  }
}
@media screen and (min-width: 68.75rem) {
  body {
    transform: scale(0.63);
  }
}
@media screen and (min-width: 75rem) {
  body {
    transform: scale(0.69);
  }
}
@media screen and (min-width: 81.25rem) {
  body {
    transform: scale(0.745);
  }
}
@media screen and (min-width: 87.5rem) {
  body {
    transform: scale(0.8);
  }
}
@media screen and (min-width: 93.75rem) {
  body {
    transform: scale(0.85);
  }
}
@media screen and (min-width: 100rem) {
  body {
    transform: scale(0.91);
  }
}
@media screen and (min-width: 106.25rem) {
  body {
    transform: scale(0.95);
  }
}
@media screen and (min-width: 108.25rem) {
  body {
    transform: scale(1);
  }
}

figure {
  margin: 0;
  padding: 0;
}

img {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
}

.logo {
  position: absolute;
  top: 0;
  left: 9.375rem;
  width: 7.8125rem;
  height: 11.4375rem;
}
@media screen and (max-width: 47.9375rem) {
  .logo {
    width: 3.90625rem;
    height: 5.71875rem;
    left: 20vw;
  }
}
@media screen and (min-width: 25rem) and (max-width: 47.9375rem) {
  .logo {
    left: 5rem;
  }
}

.letter {
  position: absolute;
}
.letter--l {
  top: 1.875rem;
  left: 1.875rem;
  width: 2.375rem;
  height: 6.0625rem;
}
@media screen and (max-width: 47.9375rem) {
  .letter--l {
    width: 1.1875rem;
    height: 3.03125rem;
  }
}
.letter--o {
  width: 6.25rem;
  height: 6.25rem;
}
@media screen and (max-width: 47.9375rem) {
  .letter--o {
    width: 3.125rem;
    height: 3.125rem;
  }
}
.letter--o1 {
  top: 4.625rem;
  left: 34.375rem;
}
@media screen and (max-width: 47.9375rem) {
  .letter--o1 {
    left: 50vw;
    transform: translateX(-50%);
  }
}
.letter--o2 {
  top: 40.3125rem;
  left: 73.75rem;
}
@media screen and (max-width: 47.9375rem) {
  .letter--o2 {
    top: 90vh;
    left: 50vw;
    transform: translateX(-50%);
    margin-top: -3.125rem;
  }
}
.letter--n {
  width: 5.375rem;
  height: 6.5625rem;
}
@media screen and (max-width: 47.9375rem) {
  .letter--n {
    width: 2.6875rem;
    height: 3.28125rem;
  }
}
.letter--n1 {
  top: 1.875rem;
  left: 70.625rem;
}
@media screen and (max-width: 47.9375rem) {
  .letter--n1 {
    left: 80vw;
  }
}
@media screen and (min-width: 25rem) and (max-width: 47.9375rem) {
  .letter--n1 {
    left: 85vw;
  }
}
.letter--n2 {
  top: 42.8125rem;
  left: 102.5rem;
}
@media screen and (max-width: 47.9375rem) {
  .letter--n2 {
    top: 90vh;
    left: 80vw;
  }
}
@media screen and (min-width: 25rem) and (max-width: 47.9375rem) {
  .letter--n2 {
    left: 85vw;
  }
}
.letter--d {
  width: 4.5rem;
  height: 6.0625rem;
  top: 43.75rem;
  left: 46.5625rem;
}
@media screen and (max-width: 47.9375rem) {
  .letter--d {
    width: 2.25rem;
    height: 3.03125rem;
    top: 90vh;
    left: 1.875rem;
  }
}

.waves {
  position: absolute;
  left: 16.875rem;
  top: 17.9375rem;
  width: 15.8125rem;
  height: 4.5625rem;
}
@media screen and (max-width: 47.9375rem) {
  .waves {
    width: 8.696875rem;
    height: 2.509375rem;
    left: 50vw;
    transform: translateX(-50%);
    top: 8.75rem;
  }
}

.rect1 {
  border: 9px solid black;
  position: absolute;
  left: 32.5rem;
  top: 7.5rem;
  width: 20.3125rem;
  height: 51.5625rem;
}
.rect1:before {
  position: absolute;
  height: 0.5625rem;
  background: black;
  top: 13.125rem;
  left: 0;
  right: 0;
  content: "";
}
@media screen and (max-width: 47.9375rem) {
  .rect1 {
    display: none;
  }
}

.rect2 {
  border-left: 1.875rem solid #F8FF00;
  position: absolute;
  left: 52.8125rem;
  top: 11.875rem;
  width: 36.9375rem;
  height: 40.0625rem;
  box-shadow: 0 0 0 0.5625rem black;
}
@media screen and (max-width: 47.9375rem) {
  .rect2 {
    box-shadow: none;
    border-left: none;
    left: 1.875rem;
    top: 12.5rem;
    width: auto;
  }
}

.link-highlight {
  display: inline-block;
  position: relative;
}
@media screen and (min-width: 47.9375rem) {
  .link-highlight:hover::before {
    display: block;
  }
}
.link-highlight::before {
  position: absolute;
  content: "";
  width: 200%;
  height: 100%;
  top: -0.1875rem;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../img/rollover.svg");
  display: none;
}
.link-highlight--samples {
  position: absolute;
  top: 10.625em;
  left: 3.125em;
}
@media screen and (max-width: 47.9375rem) {
  .link-highlight--samples {
    top: 6vh;
    left: 10vw;
  }
}
.link-highlight--enquiries {
  position: absolute;
  top: 16.875em;
  left: 11.25em;
}
@media screen and (max-width: 47.9375rem) {
  .link-highlight--enquiries {
    top: 16vh;
    left: 15vw;
  }
}
@media screen and (max-width: 47.9375rem) and (min-width: 25rem) {
  .link-highlight--enquiries {
    left: 25vw;
  }
}
.link-highlight--music {
  position: absolute;
  top: 31.25em;
  left: 6.875em;
}
@media screen and (max-width: 47.9375rem) {
  .link-highlight--music {
    top: 26vh;
    left: 20vw;
  }
}

.samples {
  width: 8.1875rem;
  height: 1.4375rem;
}
@media screen and (max-width: 47.9375rem) {
  .samples {
    width: auto;
    height: 1rem;
  }
}

.enquiries {
  width: 20.0625rem;
  height: 1.4375rem;
}
@media screen and (max-width: 47.9375rem) {
  .enquiries {
    width: auto;
    height: 1rem;
  }
}

.music {
  width: 5.9375rem;
  height: 1.4375rem;
}
@media screen and (max-width: 47.9375rem) {
  .music {
    width: auto;
    height: 1rem;
  }
}

.modular {
  position: absolute;
  width: 21.75rem;
  height: 2.375rem;
  top: 51.9375rem;
  left: 72.5rem;
}
@media screen and (max-width: 47.9375rem) {
  .modular {
    display: none;
  }
}

.stack {
  position: absolute;
  width: 16.25rem;
  height: 14.9375rem;
  top: 31.25rem;
  left: 91.25rem;
  z-index: -1;
}
@media screen and (max-width: 47.9375rem) {
  .stack {
    left: 57vw;
    top: 65vh;
    width: 8.125rem;
    height: 7.46875rem;
  }
}
@media screen and (max-width: 47.9375rem) and (min-width: 25rem) {
  .stack {
    left: 67vw;
  }
}
@media screen and (max-width: 47.9375rem) and (min-width: 31.25rem) {
  .stack {
    left: 73vw;
  }
}