body {
  font-family: Helvetica; 
  line-height: 1.25;
  font-size: 1.75em;
  padding-left:60px;
  margin-right: 30vw;
  margin-top:5vw;
  text-align: left;
  background-color: black;
  height: 100%;
}
.symbol-container {
  height: 100%;
  position: relative;
}
.symbol {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol2 {
  position: absolute;
  top: 500px;
  right: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol3 {
  position: absolute;
  top: 1000px;
  left: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol4 {
  position: absolute;
   top: 1500px;
  right: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol5 {
  position: absolute;
  top: 2000px;
  left: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol6 {
  position: absolute;
  top: 2500px;
  right: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol7 {
  position: absolute;
  top: 3000px;
  left: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol8 {
  position: absolute;
  top: 3500px;
  right: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol9 {
  position: absolute;
  top: 4000px;
  left: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol10 {
  position: absolute;
  top: 4500px;
  right: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol11 {
  position: absolute;
  top: 5000px;
  left: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol12 {
  position: absolute;
  top: 5500px;
  right: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol13 {
  position: absolute;
  top: 6000px;
  left: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol14 {
  position: absolute;
  top: 6500px;
  right: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol15 {
  position: absolute;
  top: 7000px;
  left: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol16 {
  position: absolute;
  top: 7500px;
  right: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol17 {
  position: absolute;
  top: 8000px;
  left: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol18 {
  position: absolute;
  top: 8500px;
  right: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol19 {
  position: absolute;
  top: 9000px;
  left: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
.symbol20 {
  position: absolute;
  top: 9500px;
  right: 0;
  font-size: 40px;
  z-index: 999;
  transition: transform 2s ease-in-out;
}
a {
  color: black;
}
a:hover:before {
  content: "*";
}
a:hover:after {
  content: "*";
}
.header {
  text-align: left;
  font-size: 2em;
  font-family: Apercu; Helvetica;
  padding-top: 2em;
  padding-bottom:1em;
}
h3 {
  letter-spacing: 1px;
  font-size:1.25em;
  font-family: Apercu; Helvetica;
  color: black;
  line-height:1.25em;
  margin-right: none;
}
h4 {
  letter-spacing: 1px;
  font-family: Apercu; Helvetica;
  font-size: .75em;
  color: black;
  line-height:1.25em;
}
.typo:after {
  content:"TYPOGRAPHY";
}
.typo:hover:after {
  content: "#&%*@_?x*#";
}
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
  .about {
    bottom: 20px;
    width: 100%;
  }
}