:root {
  --color-base: #efefef;
  --color-body: #393d3f;
  --color-accent: #a661b1;
  --color-neutral: #eeeeee;
  --color-link: var(--color-accent);
  --color-link-visited: var(--color-accent);
  --width-body: 640px;
  --width-body-max: 98vw;
  --font-family-base:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --space: 1rem;
  --font-weight-base: 400;
  --font-weight-bold: 550;
  --width-divider: 100%;
  --color-divider: var(--color-accent);
}

* {
  font-family: var(--font-family-base);
  box-sizing: border-box;
}

body {
  margin: auto;
  padding: var(--space) 0;
  width: var(--width-body);
  max-width: var(--width-body-max);
  background-color: var(--color-base);
  font-weight: var(--font-family-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

main {
  flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6,
em,
b,
strong {
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--color-link);
  text-decoration: none;
  position: relative;

  &:after {
    content: "";
    width: 40%;
    border-bottom: 2px solid currentColor;
    margin-bottom: -5px;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: 300ms ease;
  }

  &:hover:after {
    opacity: 1;
    width: 100%;
  }

  &:visited {
    color: var(--color-link-visited);
  }
}

nav a {
  margin: var(--space);
}

footer {
  display: flex;
  justify-content: flex-end;
}

.package {
  ul {
    display: flex;
    flex-direction: row;
    gap: var(--space);
    margin: var(--space);
    margin-block-start: 0;
    margin-inline-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;

    li {
      display: block;
      background-color: color-mix(
        in srgb,
        var(--color-accent) 10%,
        transparent
      );
      font-weight: var(--font-weight-bold);
      color: var(--color-accent);
      padding: calc(var(--space) / 4) calc(var(--space) / 2);
      border-radius: calc(var(--space) / 2);
      border: 1px solid var(--color-accent);
    }
  }

  &:not(:last-of-type):after {
    content: "";
    display: block;
    width: var(--width-divider);
    height: 1px;
    background-color: var(--color-divider);
    margin: var(--space) auto;
  }
}