@font-face {
  font-family: "Supercomputer";
  src: url(/Users/reneecunningham/Library/Fonts/supercomputer.ttf) format("ttf");
  font-weight: normal;
  font-size: normal;
}
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: url(/backgrounds/asfalt-light.png) #180c27;
  font-family: "Supercomputer";
  aspect-ratio: 1920px;
  min-height: 100vh;
  overflow-x: hidden;
}
.header {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 40%;
  left: 40%;
  translate: (-50%, -50%);
  color: #fff;
  text-align: center;
}

/* div idea from garfriend */
#art {
  z-index: 1;
  position: absolute;
  scale: 19%;
  top: -63%;
  left: -25%;
}

#art span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 400px;
  color: #fff;
}

#art span:hover,
#art span:focus {
  opacity: 1;
}

#blog {
  z-index: 1;
  position: absolute;
  scale: 16%;
  top: -20%;
  left: -30%;
}

#blog span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 400px;
  color: #fff;
}

#blog span:hover,
#art span:focus {
  opacity: 1;
}

#collections {
  z-index: 1;
  position: absolute;
  scale: 23%;
  top: -54%;
  left: 40%;
}

#collections span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 200px;
  color: #fff;
}

#collections span:hover,
#collections span:focus {
  opacity: 1;
}

#info {
  z-index: 1;
  position: absolute;
  scale: 20%;
  top: -60%;
  left: 10%;
}

#info span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 300px;
  color: #fff;
}

#info span:hover,
#info span:focus {
  opacity: 1;
}

#links {
  z-index: 1;
  position: absolute;
  scale: 15%;
  top: -10%;
  left: 37%;
}

#links span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 300px;
  color: #fff;
}

#links span:hover,
#links span:focus {
  opacity: 1;
}

#media {
  z-index: 1;
  position: absolute;
  scale: 24%;
  top: 3%;
  left: 8.5%;
}

#media span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 300px;
  color: #fff;
}

#media span:hover,
#media span:focus {
  opacity: 1;
}