@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;
  position: relative;
  font-weight: normal;
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background-body);
  transition: color 0.5s, background-color 0.5s;
  line-height: var(--text-line-height);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

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

main {
  background: var(--color-background);
  margin: var(--navigation-cutout-main);
  padding: 0.0625rem 0 0 0;
  transition: 0.4s;
  z-index: 0;

  &:after {
    display: block;

    content: "";
    position: sticky;
    inset: auto 0 var(--navigation-cutout-page-background) 0;

    height: var(--page-background-image-height);
    max-height: var(--page-background-image-max-height);

    background: var(--page-background-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;

    z-index: -1;
  }
}

section {
  max-width: var(--textblock-max-width);
  margin: 0 auto;
  padding: var(--textblock-padding);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-headings);
  font-weight: 900;
  font-stretch: ultra-expanded;
  font-optical-sizing: auto;
}

h1 {
  font-size: 3rem;
}

p {
  text-align: justify;
  margin: var(--paragraph-margin) 0;
  -webkit-hyphens: auto;
  hyphens: auto;
}

a {
  text-decoration: none;
  color: var(--color-link-text);
  transition: 0.4s;

  box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -0.125) 0 0
    var(--color-link-text-underline);

  &:hover {
    color: var(--color-link-text-hover);
    box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0
      var(--color-link-text-underline);
  }
}

table {
  border-spacing: 0;
  width: 100%;
  max-width: 34rem;
  margin: 2rem auto;
  padding: var(--table-outer-spacing);

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

  th {
    font-weight: bold;
    background-color: var(--table-heading-background);
    color: var(--table-heading-text-color);

    &:first-child {
      border-radius: var(--table-border-radius) 0 0 0;
    }

    &:last-child {
      border-radius: 0 var(--table-border-radius) 0 0;
    }

    &.name {
      text-align: right;
    }
  }

  td {
    background-color: var(--table-cell-background);
    color: var(--table-cell-text-color);

    svg {
      fill: var(--table-cell-text-color);
    }
  }

  tr:hover td {
    background-color: var(--table-row-background-hover);
    color: var(--table-cell-text-color-hover);

    a {
      color: var(--theme-c-text-dark);
      box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -0.125) 0 0
        var(--table-cell-text-color-hover);

      &:hover {
        color: var(--theme-c-text-light);
        box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0
          var(--table-cell-text-color-hover);
      }
    }

    svg {
      fill: var(--table-cell-text-color-hover);
    }
  }

  tr:last-child td {
    &:first-child {
      border-radius: 0 0 0 var(--table-border-radius);
    }

    &:last-child {
      border-radius: 0 0 var(--table-border-radius) 0;
    }
  }
}