* {
  font-family: "Source Sans Pro", sans-serif;
}

.interactive {
  margin: auto;
  width: 500px;
  position: relative;
}

i {
  font-size: 3rem;
  color: rgb(223, 240, 255);
}
.left {
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translate(0, -50%);
}
.right {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translate(0, -50%);
}
.down {
  position: absolute;
  left: 50%;
  transform: translate(-80%, 0);
  /* Why is this not centered at translate 50%*/
  bottom: 0;
}

.up {
  position: absolute;
  left: 50%;
  transform: translate(-80%, 0);
  /* Why is this not centered at translate 50%*/
  top: 2rem;
  visibility: hidden;
}

.itemText {
  margin: auto;
  width: 500px;
}

img {
  width: 100%;
}

h1 {
  font-family: "Tomorrow", sans-serif;
  text-align: center;
  margin-bottom: 2rem;
}

footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  background-color: aliceblue;
}

a {
  color: black;
  text-decoration: none;
  font-family: "Source Sans Pro", sans-serif;
  margin: 1rem;
}

@media only screen and (max-width: 500px) {
  .interactive {
    padding: 20vw 20vw 3rem 20vw;
    width: 60vw;
  }

  .itemText {
    border: solid 0.5px rgb(226, 242, 255);
    border-radius: 8px;
    padding: 1rem 10vw;
    margin: 0 10vw 0 10vw;
    width: 60vw;
  }
}