@import "@/scss/base";

:root {
  font-family: var(--font-family-copy);
  font-size: var(--font-size);
  text-size-adjust: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;

  background-color: var(--color-background);
  color: var(--color-text);

  line-height: var(--text-line-height);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  transition: color 0.5s, background-color 0.5s;

  &:before,
  &:after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  &:before {
    background: url(@/assets/subtle-prism.svg);
    mix-blend-mode: multiply;
    z-index: -1;
  }

  &:after {
    background: var(--page-background);
    z-index: -2;
  }

  &.scroll-lock {
    overflow: hidden;
  }
}

main {
  min-height: 100vh;
  padding: 1rem 0;
  transition: 0.4s;
}

section {
  margin: auto;
  padding: 0 var(--container-spacing-right-safe) 0
    var(--container-spacing-left-safe);
  max-width: var(--section-max-width);

  h1:first-child {
    margin-top: 0;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-headings);
}

h1 {
  font-size: var(--font-size-h1);
  margin: 1.625rem 0;
  text-transform: capitalize;
}

h2 {
  font-size: var(--font-size-h2);
  margin: 1.875rem 0;
}

h3 {
  font-size: var(--font-size-h3);
  margin: 1.5rem 0;
}

p {
  margin: 1rem 0;
}

a {
  color: var(--color-link-text);
}

blockquote {
  font-style: italic;
  background: linear-gradient(90deg, rgba(#000, 0.5), transparent);
  margin: 0;
  border-left: 0.125rem solid var(--theme-c-indian-yellow);
  padding: 1rem;
}

ul {
  margin: 1rem 0;

  &.col-2 {
    columns: 2 auto;
  }

  &.col-3 {
    columns: 3 auto;
  }

  &.col-4 {
    columns: 4 auto;
  }

  &.social {
    display: flex;
    flex-flow: var(--social-links-flex-flow);
    justify-content: space-evenly;

    margin: 1rem 0;
    padding: 0;
    list-style: none;

    li {
      flex: var(--social-links-flex);
      padding: 0.25rem;
      text-align: center;

      &:before {
        margin: 0 0.375rem 0 0;
      }

      &.twitter:before {
        content: "🐦";
      }

      &.mastodon:before {
        content: "🐘";
      }

      &.telegram:before {
        content: "📨";
      }

      &.furaffinity:before {
        content: "🐾";
      }
    }
  }
}

table {
  border-collapse: collapse;
  width: 100%;
  max-width: var(--table-max-width);
  margin: auto;

  thead {
    border-top: var(--table-border);
  }

  tbody {
    border-top: var(--table-border);
    border-bottom: var(--table-border);

    tr:hover {
      background: rgba(0, 0, 0, 0.3);
    }
  }

  th,
  td {
    padding: var(--table-cell-padding);
  }

  th {
    font-weight: bold;
  }
}

.nav-logo {
  display: block;
  margin: 0 0.5rem 0 0.25rem;
  height: 2rem;
  border: 0.125rem solid #fff;
  border-radius: 100%;
  box-shadow: var(--container-box-shadow);
}