@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&family=Teko:wght@300..700&display=swap');

/* MARK: TYPOGRAPHY
*/
:root {
  --font-family: 'Oxanium', sans-serif;
  --font-size: clamp(1rem, 1.3cqi, 1.3rem);
  --font-weight: normal;
  --font-style: normal;
  --font-optical-sizing: auto;
  --line-height: 1.5;
  --letter-spacing: 0.05rem;
  --txt-color: ;
  --txt-shadow-color: 0, 0, 0;
  --txt-shadow-opacity: 0.3;
  --moz-osx-font-smoothing: grayscale;
  --word-break: break-word;
  --webkit-font-smoothing: antialiased;

  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  font-style: var(--font-style);
  font-optical-sizing: var(--font-optical-sizing);
  /* color: rgba(var(--txt-color), var(--txt-opacity)); */
  line-height: var(--line-height);
  text-shadow: var(--txt-shadow);
  word-break: var(--word-break);
  -moz-osx-font-smoothing: var(--moz-osx-font-smoothing);
  -webkit-font-smoothing: var(--webkit-font-smoothing);
}

/*
https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/Baseline for default links */
label:not([class]) {
  /* Relatively sized thickness and offset */
  text-decoration-thickness: max(0.08em, 1px);
  text-underline-offset: 0.15em;
}

a:not([class]) {
  /* Relatively sized thickness and offset */
  text-decoration-thickness: max(0.08em, 1px);
  text-underline-offset: 0.15em;
}

:focus-visible {
  --outline-size: max(2px, 0.15em);

  outline: var(--outline-width, var(--outline-size)) var(--outline-style, solid) var(--outline-color, currentColor);
  outline-offset: var(--outline-offset, var(--outline-size));
}

:not([class]) {

  /* https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/#container-query-fluid-type */
  :is(h1, h2, h3, h4, h5) {
    font-family: Cinzel, "Times New Roman", Times, serif;
    color: rgba(var(--txt-color), 1.0);
    padding: 1rem;
    font-weight: 100;
    letter-spacing: 0.05ch;
    text-transform: uppercase;
    text-wrap: balance;
    text-align: center;
    font-weight: normal;
  }
}

p {
  margin: 1em;
}

hr {
  margin-block: 1em;
}

ol,
ul {
  margin-block: 1em;
}

ol,
ul {
  padding-inline-start: 1.5em;
  padding-block-start: 0;
  list-style: revert;
}

li {
  margin-block: 0.5em;
}

:is(th, td):first-child {
  text-align: left;
}

:is(th, td):last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}