header {
  background-color: var(--color-background);
  color: var(--color-foreground);
  text-align: center;
  padding: 2em;

  h1 {
    border: 0;
  }

  img.avatar {
    border: 2px solid var(--color-foreground);
    border-radius: 50%;
  }

  @media (max-width: 900px) {
    img.avatar {
      display: none;
    }
  }

  nav {
    ul {
      padding: 0;
      font-family: monospace;

      li {
        list-style-type: none;
        display: inline;
      }

      li a:link, li a:visited {
        background-color: var(--color-foreground);
        color: var(--color-background);
        text-decoration: none;
        display: inline-block;
        padding: .8em;
        border-radius: 2em;
      }
      li a:hover {
        border-radius: 32% 46% 60% 65%;
        transition: border-radius 0.5s linear;
      }
    }

    ul.find-me {
      li a:link {
        border-radius: 50%;
      }
      li a:hover {
        border-radius: 55% 80% 60% 70%;
        transition: border-radius 0.5s linear;
      }
    }
  }
}