@import url(base.css);

body {
  max-width: 650px;
  margin: auto;
  text-align: center;
}
footer {
  text-align: center;
  font-size: small;
  margin-top: 1.5rem;
}

h1 {
  font: 2.5em Cooper Black, var(--serif);
  margin-block: .3em;
}
nav {
  --brad: 1em;
  width: max-content;
  text-align: left;
  border: solid 1.5px #444;
  border-radius: var(--brad);
  margin: auto;
}
nav:hover {
  background: var(--grad) border-box;
  border-color: transparent;
}
nav > div {
  background: var(--bg);
  border-radius: var(--brad);
  > menu {
    padding: .5rem 0;
    margin: 0 auto;
    list-style: none;
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
menu li > a {
  display: block;
  padding: .5rem 2rem;
  text-decoration: none;

  & svg.feather {
    font-size: xx-large;
    margin-inline-end: 1rem;
  }
  & * { vertical-align: middle; }
}
menu li > a:hover {
  color: transparent;
  font-weight: bold;
  & svg.feather { stroke: url(#grad); }
}