:root {
  --font-size: 22px;
  --baseline: 1.7em;
  --primary: #400400;
}

body {
  font-family: "Source Code Pro", monospace;
  font-weight: 400;
  font-size: var(--font-size);
  line-height: var(--baseline);
  padding: var(--baseline);
  color: var(--primary);
  cursor: default;
  text-transform: lowercase;
}

p, ul, h1, h2, h3, h4, h5, h6 {
  margin: var(--baseline) 0;
}

h1 {
  font-weight: 600;
  font-size: inherit;
  margin: 0;
}

h1 .rdle {
  display: inline-block;
  animation: fade-out 1s 1s both,
    slide-out 1s 2s both;
}

h1 .leo::after,
h1 .mca::after,
h1 .is::after {
  content: ".";
  width: 0;
  display: inline-block;
  animation: fade-out 1s 3s reverse both;
}

h1 .is::after {
  content: "/";
}

section {
  margin-left: 2ch;
  animation: fade-out 1s 3s reverse both;
}

nav {
  font-weight: 200;
}

nav ul {
  padding: 0;
}

nav li {
  list-style: none;
}

nav a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

nav a:hover {
  border-bottom: dotted 1px #22f;
}

@media only screen and (max-width: 580px) {
  li {
    margin: var(--baseline) 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slide-out {
  from {
    width: 4ch;
  }
  
  to {
    width: 0ch;
  }
}