*,
*::before,
*::after {
  margin: 0; padding: 0;

  appearance: none;
  box-sizing: inherit;
}

* {
  &:focus-visible {
    outline: thick ridge var(--uchu-red-5);
    outline-offset: 5px;
  }
}

@property --100vw {
  inherits: false;
  syntax: "<length>";
  initial-value: 0px;
}

@property --1rem {
  inherits: false;
  initial-value: 0px;
  syntax: "<length>";
}

/* Does the browser support division by values with units? */

@supports (width: calc((1px / 1px) * 1px)) {
  :root {
    --current-rem-size: calc(1rem / 1px);
    --currentWidth: clamp(var(--minWidth), calc(var(--100vw) / 1px), var(--maxWidth));
  }
}

/* If not, use Jane Ori’s hack: https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j*/

@supports not (width: calc((1px / 1px) * 1px)) {
  :root {
    --1rem: 1rem;
    --100vw: 100vw;
    --current-rem-size: calc(tan(atan2(var(--1rem), 1px)));
    /* Firefox bug workaround: https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j#comment-2khap */
    --current-rem-size: calc(10000 * tan(atan2(var(--1rem), 10000px)));
    --currentWidth: clamp(var(--minWidth),calc(10000 * tan(atan2(1000px, 10000px))), var(--maxWidth));
  }
}

:root {
   --1rem: 1rem;
  /* How aggressively should we compress the scale? 1 = full compression, 0 = no compression */
  --compression-strength: 1;

  /* What we assume as the default for comparison*/
  --default-assumed-size: 16;

  /* Now we’re dividing the default assumed size (16px) by the actual unitless rem size to get our factor */
  --scale-factor: calc(var(--default-assumed-size) / var(--current-rem-size));

  /* The ratio multiplier that dampens our type scale at larger user font sizes */
  --ratio-dampener: calc(1 - ((1 - var(--scale-factor)) * var(--compression-strength)));

  /* Ratios */
  --minorSecond: 1.06666; /* Semitone: 16:15 */
  --majorSecond: 1.125; /* 9:8 */
  --minorThird: 1.2; /* 6:5 */
  --majorThird: 1.25; /* 5:4 */
  --perfectFourth: 1.33333; /* 4:3 */
  --augmentedFourth: 1.414; /* √2/1 */
  --perfectFifth: 1.5; /* 3:2 */
  --minorSixth: 1.6; /* 8:5 */
  --goldenRatio: 1.618; /* (1+√5):2 */
  --majorSixth: 1.66666; /* 5:3 */
  --minorSeventh: 1.8; /* 9:5 */
  --majorSeventh: 1.875; /* 15:8 */
  --octave: 2; /* 2:1 */

  /* A few easing functions */
  /* EaseOutSine - https://easings.net/#easeOutSine  */
  --easeOutSine: sin((var(--x) * pi) / 2);
  /* EaseOutQuad - https://easings.net/#easeOutQuad */
  --easeOutQuad: calc(1 - (1 - var(--x)) * (1 - var(--x)));
  /* EaseInOutSine - https://easings.net/#easeInOutSine */
  --easeInOutSine: calc(-(cos(pi * var(--x)) - 1) / 2);
  /* Linear ¯\_(ツ)_/¯ */
  --linear: var(--x);

  /* Base values for font-size, ratio, viewport widths */
  --baseFontSizeMin: 1rem;
  --ratioMin: var(--minorSecond);
  --minWidth: 320;

  --baseFontSizeMax: 1.3125rem;
  --ratioMax: var(--augmentedFourth);
  --maxWidth: 1800;

  /* Which curve do we want to use? */
  --curve: var(--linear);

  /* The current viewport width */
  --100vw : 100vw;

  /* This normalizes the value between 0 and 1 */
  --x: clamp(0, calc((var(--currentWidth) - var(--minWidth)) / (var(--maxWidth) - var(--minWidth))), 1);

  /* Apply dampening to the ratio spread */
  --compressedRatioMin: calc( 1 + (var(--ratioMin) - 1) * var(--ratio-dampener) );
  --compressedRatioMax: calc( 1 + (var(--ratioMax) - 1) * var(--ratio-dampener) );

  /* Min and max sizes of the scales are calculated based
  on the provided ratio with pow():
  https://developer.mozilla.org/en-US/docs/Web/CSS/pow */

  /* Scale min */
  --size-min-5: calc(var(--baseFontSizeMin) * pow(var(--compressedRatioMin), 6));
  --size-min-4: calc(var(--baseFontSizeMin) * pow(var(--compressedRatioMin), 4));
  --size-min-3: calc(var(--baseFontSizeMin) * pow(var(--compressedRatioMin), 3));
  --size-min-2: calc(var(--baseFontSizeMin) * pow(var(--compressedRatioMin), 2));
  --size-min-1: calc(var(--baseFontSizeMin) * pow(var(--compressedRatioMin), 1));
  --size-min-0: calc(var(--baseFontSizeMin) * pow(var(--compressedRatioMin), 0));
  --size-min--1: calc(var(--baseFontSizeMin) * pow(var(--compressedRatioMin), -1));

  /* Scale max */
  --size-max-5: calc(var(--baseFontSizeMax) * pow(var(--compressedRatioMax), 6));
  --size-max-4: calc(var(--baseFontSizeMax) * pow(var(--compressedRatioMax), 4));
  --size-max-3: calc(var(--baseFontSizeMax) * pow(var(--compressedRatioMax), 3));
  --size-max-2: calc(var(--baseFontSizeMax) * pow(var(--compressedRatioMax), 2));
  --size-max-1: calc(var(--baseFontSizeMax) * pow(var(--compressedRatioMax), 1));
  --size-max-0: calc(var(--baseFontSizeMax) * pow(var(--compressedRatioMax), 0));
  --size-max--1: calc(var(--baseFontSizeMax) * pow(var(--compressedRatioMax), -1));

  /* Fluid font sizes with clamp() */
  --fluid-5: clamp(var(--size-min-5), var(--size-min-5) + ( var(--curve) * (var(--size-max-5) - var(--size-min-5)) ), var(--size-max-5));
  --fluid-4: clamp(var(--size-min-4), var(--size-min-4) + ( var(--curve) * (var(--size-max-4) - var(--size-min-4)) ), var(--size-max-4));
  --fluid-3: clamp(var(--size-min-3), var(--size-min-3) + ( var(--curve) * (var(--size-max-3) - var(--size-min-3)) ), var(--size-max-3));
  --fluid-2: clamp(var(--size-min-2), var(--size-min-2) + ( var(--curve) * (var(--size-max-2) - var(--size-min-2)) ), var(--size-max-2));
  --fluid-1: clamp(var(--size-min-1), var(--size-min-1) + ( var(--curve) * (var(--size-max-1) - var(--size-min-1)) ), var(--size-max-1));
  --fluid-0: clamp(var(--size-min-0), var(--size-min-0) + ( var(--curve) * (var(--size-max-0) - var(--size-min-0)) ), var(--size-max-0));

  /* https://codepen.io/matthiasott/pen/RNrLVbP */
}

@font-face {
  font-display: swap;
  font-family: "Ende Mono";
  font-style: normal;
  font-weight: 400;
  src: url("./type/400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Ende Mono";
  font-style: italic;
  font-weight: 400;
  src: url("./type/400i.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Ende Mono";
  font-style: normal;
  font-weight: 600;
  src: url("./type/600.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Ende Mono";
  font-style: italic;
  font-weight: 600;
  src: url("./type/600i.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Ende Mono";
  font-style: normal;
  font-weight: 800;
  src: url("./type/800.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Ende Mono";
  font-style: italic;
  font-weight: 800;
  src: url("./type/800i.woff2") format("woff2");
}

:root {
  --inline-padding: max(calc(4.7vw - 0px / 2), calc(50vw - 1500px / 2 - 0px / 2));
  font-family: "Ende Mono", Inter, system-ui, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1;
  font-variant-numeric: slashed-zero;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html,
body {
  width: 100%; height: 100%;
}

body {
  background-color: var(--uchu-yang);
  color: var(--uchu-yin-9);
  font-size: 12px;
}

::selection {
  background-color: var(--uchu-red-1);
  color: var(--uchu-red-9);
}

abbr {
  cursor: help;
}

code {
  margin: 0 0.5ch; padding: 0 0.5ch;

  background-color: oklch(var(--uchu-red-1-raw) / 20%);
  font-size: 90%;
  position: relative;

  &::before,
  &::after {
    color: var(--uchu-red-2);
    content: "`";
    font-size: inherit;
    line-height: 1;
    position: absolute;
    top: 0;
  }

  &::before {
    left: -0.5ch;
  }

  &::after {
    right: -0.5ch;
  }
}

strong {
  font-weight: 600;
}

.undershirt {
  align-items: inherit;
  display: inherit;
  flex-direction: inherit;
  justify-content: inherit;
  margin-left: auto;
  margin-right: auto;
  max-width: 1500px;
  width: 100%;
}