:root {
  --color-light: papayawhip;
  --color-dark: black;
  --color-highlight: orange;
}

@font-face {
  font-family: "Comico-Regular";
  src:
    url("/assets/fonts/Comico-Regular.woff2") format("woff2"),
    url("/assets/fonts/Comico-Regular.woff") format("woff"),
    url("/assets/fonts/Comico-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

body {
  margin: 0;
  font-family: Comico-Regular;
  background-color: var(--color-dark);
  color: var(--color-light);
  font-size: 20px;
}
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.8em;
}

main {
  min-height: 80vh;
  padding: 2vh 10vw;
  background-color: var(--color-light);
  color: var(--color-dark);

  a:hover {
    color: inherit;
  }
}

article {
  line-height: 1.5;
  font-size: 1.2em;
  padding-bottom: 4em;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid;
  transition: 0.3s cubic-bezier(0, 0, 0, 1);

  &:hover {
    transition: 0.3s cubic-bezier(0, 0, 0, 1.48);
    color: white;
    border-bottom-width: 0.4em;
    border-color: var(--color-highlight);
  }
}

header {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  a {
    border-bottom-width: 0;
  }
}

footer {
  display: grid;
  justify-content: end;
  padding: 1em;
}

nav {
  ul {
    padding: 1em;
    display: flex;
    justify-content: end;
    gap: 1em;
  }
  li {
    display: inline-block;
  }
  li:first-child {
    flex: auto;

    a {
      border: none;
    }
  }
}

blockquote {
  color: var(--color-dark);
  margin: 0;
  font-size: 1.3em;
  border-left: 1em solid var(--color-dark);
  padding-left: 1em;
}