main.css

@import url('https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap');

* {
  font-family: 'Lora', serif;
  margin-bottom: 20px;
  margin-top: 0px;
}

body {
  padding: 5vh 12vw;
}

h1 {
  color: blue;
  text-decoration: underline;
  font-size: 9vh;
  animation: reveal 1s cubic-bezier(0.01, 0, 0.175, 1);
}

h2 {
  color: blue;
  text-decoration: underline;
  font-size: 8vh;
}

h3 {
  color: blue;
  font-size: 6vh;
}

h4 {
  color: black;
  font-size: 6vh;
  font-style: italic;
}

p {
  font-size: 4vh;
  animation: reveal 1.5s cubic-bezier(0.01, 0, 0.175, 1);
}

.highlight {
  display: inline-block;
  padding: 0.05vh 1vw;
  background: blue;
  color: white;
  margin: 2px;
  animation: reveal-highlight 2s cubic-bezier(0.01, 0, 0.175, 1);
}

a.link, a:link.link, a:active.link, a:hover.link {
  text-decoration: underline;
  color: black;
}

.email {
  color: red;
}

.section {
  margin: 5em auto;
}

.subsection {
  margin-bottom: 3em;
}

@keyframes reveal-highlight {
  0% {
    transform: translate(-50%, 100%);
  }
  100% {
    transform: translate(0,0);
  }
}

@keyframes reveal {
  0% {
    transform: translate(0%,100%);
  }
  100% {
    transform: translate(0,0);
  }
}