main {
  padding: 10vh 20% 0px 20%;
  display: grid;
  padding-bottom: 0;
  position: relative;
}

aside {
  z-index: 1;
}

section {
  margin-bottom: 20vh;
}

header {
  background-color: none;
  opacity: 0.8;
}

#contact {
  line-height: 2em;
  margin: 5vh 0;
}

/* About Me Section */

#aboutMe {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

#aboutMe h2 {
  margin: 0;
  grid-column: span 12;
}

#languageList {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 200px));
}

#aboutMeBlurb {
  grid-column: span 8;
}

#aboutMe img {
  grid-column: 10/13;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  object-fit: contain;
}

#email {
  text-decoration: underline;
  font-size: 1em;
  color: inherit;
  margin: 0;

  border: 1px solid #1dbb0f;
  padding: 0.5em;
}

#email:hover {
  background-color: #1dbb0f;
  color: #000c18;
}

section #overview::after {
  content: "";
  width: 6px;
  height: 16px;
  background: #1dbb0f;
  display: inline-block;
  animation: cursor-blink 1s infinite;
}

@keyframes cursor-blink {
  0% {
    background: #000c18;
  }

  50% {
    background: #1dbb0f;
  }

  100% {
    background: #000c18;
  }
}

@media screen and (max-width: 768px) {
  body {
    width: 100%;
  }

  main {
    padding: 10vh 10% 0px 10%;
  }

  section {
    width: 99%;
    overflow-wrap: break-word;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 5vh;
  }

  #intro {
    margin: 0 auto;
  }

  #aboutMeBlurb {
    grid-column: span 12;
    position: relative;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
  }

  #aboutMeBlurb p {
    flex-grow: 1;
  }

  #languageList {
    justify-content: center;
    flex-grow: 1;
  }

  #aboutMe img {
    grid-column: span 12;
    position: relative;
    margin: auto;
  }

  #email {
    overflow: visible;
  }
}