@font-face { 
        font-family: Apercu;
        src: url("fonts/ApercuMonoProBold.ttf");
    }
    
    @keyframes bg {
  0%   {background-color: magenta;}
  50%  {background-color: cyan;}
  100% {background-color: yellow;}
}

      body {
      font-family: Times; serif
      color: black;
      font-size: 1.75em;
      padding-left:60px;
      margin-right: 30vw;
      margin-top:5vw;
      text-align: left;
      background-color: #FFC4FF;
      animation-name: bg;
      animation-duration: 24s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

  a {
      color: black;
    }
    a:hover:before {
      content: "*";
    }
    a:hover:after {
      content: "*";
    }
.header {
  text-align: left;
  color: black;
  font-size: 2em;
  font-family: Apercu;
  padding-top: 2em;
  padding-bottom:1em;
}
.column {
  float: left;
  width: 30%;
  padding:.5em;
}
.row {
  padding-bottom:6em;
}
h3 {
  letter-spacing: 1px;
  font-size:1.25em;
  font-family: Apercu;
  color: black;
  line-height:1.25em;
  margin-right: none;
}
h4 {
  letter-spacing: 1px;
  font-family: Apercu;
  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%;
  }