:root {
  --page-color: var(--home-color);
}

.navlink {
  text-decoration: none;
  color: #FFF;
}

.navlink:hover {
  text-decoration: underline;
}

/* all the link highlight colors for nav */
.home:hover {
  color: var(--home-color);
}

.blog:hover {
  color: var(--blog-color);
}

.projects:hover {
  color: var(--projects-color);
}

.mods:hover {
  color: var(--mods-color);
}

.stories:hover {
  color: var(--stories-color);
}

#nav {
  padding: 0.5em 1em;
}

/* responsive for desktop */
@media screen and (width > 50em) {
  #outer {
    display: grid;
    gap: 0.25em;
  }

  #middle {
    grid-column: 1;
    grid-row: 1;
  }

  #right {
    width: 10em;
    grid-column: 2;
    grid-row: 1;
  }
}