:root {
  font-size: 16px;
}

:root {
  --color-primary: hsl(0, 0%, 90%);
  --color-secondary: hsl(0, 0%, 50%);
  --color-lead: hsl(0, 0%, 60%);
  --color-shadow: #dddddd;
  --color-curtain: #00000099;
  --color-todo: gold;
  --color-link: #ddd;
  --color-visited: pink;
  --color-active: #ff9933;
  --color-accent: #ffcc33;
  --color-icon: var(--color-secondary);
  --color-background-opaque: hsla(130, 10%, 20%, 5%);
  --color-file-extension: var(--color-shadow);
  --color-marker-inside: #ff3300;
  --color-marker-border: white;
  --color-note-contents: #ffffff;
  --color-text-dark: #444;
  --color-link-dark: mediumblue;
  --color-link-dark-visited: purple;
  --color-allowed: #00cc99;
  --color-forbidden: #ff3300;
}

:root {
  --background-page: linear-gradient(
      120deg,
      rgba(255, 220, 20, 9%) 0%,
      rgba(255, 220, 20, 8%) 20%,
      rgba(255, 220, 20, 7%) 20%,
      rgba(255, 220, 20, 6%) 40%,
      rgba(255, 220, 20, 5%) 40%,
      rgba(255, 220, 20, 4%) 60%,
      rgba(255, 220, 20, 4%) 60%,
      rgba(255, 220, 20, 2%) 80%,
      rgba(255, 220, 20, 1%) 80%,
      rgba(255, 220, 20, 0%) 100%
    ),
    #333;
  --background-form: linear-gradient(
      163deg,
      rgb(72, 141, 52) 0%,
      rgb(31, 92, 129) 100%
    );
  --background-card-meta: linear-gradient(
      138deg,
      rgba(251, 223, 181, 1) 0%,
      rgba(236, 245, 193, 1) 50%,
      rgba(242, 217, 239, 1) 100%
    );
  --background-lead-accent: linear-gradient(
      135deg,
      #ffeeaa 0%,
      var(--color-accent) 60%,
      #ffcc00 100%
  );
}

:root {
  --size-large: 2.3rem;
  --size-double: calc(var(--size-medium) * 2);
  --size-medium: calc(var(--size-large) / 2.5);
  --size-small: calc(var(--size-medium) / 2);
  --size-tiny: calc(var(--size-small) / 2);
}

:root {
  --margin-width: minmax(0, calc((100vw - 1em * 70) / 2));
}

:root {
  --zindex-basic: 10050;
  --zindex-curtain: 10055;
  --zindex-modal: 10060;
}

:root {
  --font-cite: italic smaller system-ui, sans-serif;
  --font-default: normal 100% system-ui, sans-serif;
  --font-file-extension: normal small-caps 100% system-ui, sans-serif;
  --font-header-nav: normal 100% system-ui, sans-serif;
  --font-heading: italic larger "Georgia", "Times New Roman", serif;
  --font-lead: normal x-large system-ui, sans-serif;
  --font-lead-accent: italic bold 100% "Georgia", "Times New Roman", serif;
  --font-icon: normal 100% NotoEmoji;
  --font-label: italic bold 100% system-ui, sans-serif;
  --font-link-note: normal 100% system-ui, sans-serif;
  --font-map: normal 75% system-ui, sans-serif;
}

:root {
  --common-border-radius: var(--size-small);
  --common-gap: var(--size-medium);
  --common-gap-with-smaller-vertical: var(--size-small) var(--size-medium);
  --common-pseudolink-text-decoration: underline dotted;
  --common-pseudolink-text-decoration-line: underline;
  --common-pseudolink-text-decoration-style: dotted;
  --common-pseudolink-text-decoration-thickness: 1px;
  --common-pseudolink-text-underline-offset: .25ex;
  --common-text-shadow-glow: 0 0 .25ex var(--color-accent);
  --common-border-radius-for-zigzag: 0 var(--size-small);
    --common-clip-path-zigzag: polygon(
    0% var(--size-tiny),
    calc(var(--size-tiny) * 1) 0%,
    calc(var(--size-tiny) * 2) var(--size-tiny),
    calc(var(--size-tiny) * 3) 0%,
    calc(var(--size-tiny) * 4) var(--size-tiny),
    calc(var(--size-tiny) * 5) 0%,
    calc(var(--size-tiny) * 6) var(--size-tiny),
    calc(var(--size-tiny) * 7) 0%,
    calc(var(--size-tiny) * 8) var(--size-tiny),
    calc(var(--size-tiny) * 9) 0%,
    calc(var(--size-tiny) * 10) var(--size-tiny),
    calc(var(--size-tiny) * 11) 0%,
    calc(var(--size-tiny) * 12) var(--size-tiny),
    calc(var(--size-tiny) * 13) 0%,
    calc(var(--size-tiny) * 14) var(--size-tiny),
    calc(var(--size-tiny) * 15) 0%,
    calc(var(--size-tiny) * 16) var(--size-tiny),
    calc(var(--size-tiny) * 17) 0%,
    calc(var(--size-tiny) * 18) var(--size-tiny),
    calc(var(--size-tiny) * 19) 0%,
    100% 0%,
    100% calc(100% - var(--size-tiny)),
    calc(100% - (var(--size-tiny) * 1)) 100%,
    calc(100% - (var(--size-tiny) * 2)) calc(100% - var(--size-tiny)),
    calc(100% - (var(--size-tiny) * 3)) 100%,
    calc(100% - (var(--size-tiny) * 4)) calc(100% - var(--size-tiny)),
    calc(100% - (var(--size-tiny) * 5)) 100%,
    calc(100% - (var(--size-tiny) * 6)) calc(100% - var(--size-tiny)),
    calc(100% - (var(--size-tiny) * 7)) 100%,
    calc(100% - (var(--size-tiny) * 8)) calc(100% - var(--size-tiny)),
    calc(100% - (var(--size-tiny) * 9)) 100%,
    calc(100% - (var(--size-tiny) * 10)) calc(100% - var(--size-tiny)),
    calc(100% - (var(--size-tiny) * 11)) 100%,
    calc(100% - (var(--size-tiny) * 12)) calc(100% - var(--size-tiny)),
    calc(100% - (var(--size-tiny) * 13)) 100%,
    calc(100% - (var(--size-tiny) * 14)) calc(100% - var(--size-tiny)),
    calc(100% - (var(--size-tiny) * 15)) 100%,
    calc(100% - (var(--size-tiny) * 16)) calc(100% - var(--size-tiny)),
    calc(100% - (var(--size-tiny) * 17)) 100%,
    calc(100% - (var(--size-tiny) * 18)) calc(100% - var(--size-tiny)),
    calc(100% - (var(--size-tiny) * 19)) 100%,
    0% 100%
  );
}

@font-face {
  font-family: "NotoEmoji";
  src: url("../../../common/fonts/NotoEmoji-Regular.ttf");
}