:root {
  --bg-1: oklch(29.61% 0.047 194.92);
  --bg-2: oklch(36.3% 0.056 194.96);
  --bg-3: oklch(45.08% 0.067 195.03);
  --bg-transparent: #000d;

  --bg-1-gradient: linear-gradient(
    to bottom,
    oklch(29.61% 0.047 194.92),
    oklch(17.4% 0.028 194.9)
  );
  --bg-2-gradient: linear-gradient(
    to bottom,
    oklch(36.3% 0.056 194.96),
    oklch(28.26% 0.043 195.01)
  );

  --txt-dark: oklch(5% 0.01 196.92);
  --txt-light: oklch(95.97% 0.01 196.92);
  --txt-error: oklch(0.7441 0.1431 32.82);
  --txt-success: oklch(0.8221 0.2097 144.53);

  --shadow-s: inset 0 1px 2px #ffffff30, /* top highlight */ 0 1px 2px #00000030,
    /* dark shadow */ 0 2px 4px #00000015; /* soft shadow */
  --shadow-m: inset 0 1px 2px #ffffff30, /* top highlight */ 0 2px 4px #00000030,
    /* dark shadow */ 0 4px 8px #00000015; /* soft shadow */
  --shadow-l: inset 0 1px 2px #ffffff30, /* top highlight */ 0 4px 6px #00000030,
    /* dark shadow */ 0 6px 10px #00000015; /* soft shadow */
  --shadow-inv-s: inset 0 1px 2px #00000015, 0 2px 4px #00000030,
    0 1px 2px #ffffff30;
  --shadow-inv-m: inset 0 2px 4px #00000015, 0 4px 6px #00000030,
    0 1px 2px #ffffff30;
  --shadow-inv-l: inset 0 4px 6px #00000015, 0 6px 10px #00000030,
    0 1px 2px #ffffff30;

  --gap-1: 1.5em;
  --gap-2: 1em;
  --gap-3: 0.5em;

  --padding-1: 2em;
  --padding-2: 1em;
  --padding-3: 0.5em;
  --padding-4: 0.25em;

  --margin-1: 1.5em;
  --margin-2: 1em;
  --margin-3: 0.5em;

  --font-family: mansalva;

  --border-radius-1: 1em;
  --border-radius-2: 0.5em;
  --border-radius-3: 0.25em;

  --main-grid-min: 200px;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;

  border: none;

  font-family: var(--font-family);
  text-decoration: none;
  color: var(--txt-light);
}

.debug {
  border: 1px red solid;
}
.debug-children * {
  border: 1px red solid;
}

body {
  padding: var(--padding-1);
  background-image: var(--bg-1-gradient);
  min-height: 100dvh;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.hidden {
  display: none;
}

.contain-y {
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.contain-x {
  max-height: 100%;
  width: 100%;
  object-fit: contain;
}
.contain {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.btn > *,
.btn-self {
  background-color: var(--bg-3);
  border-radius: var(--border-radius-2);
  box-shadow: var(--shadow-s);
  cursor: pointer;
}
.btn:hover > *,
.btn-self:hover {
  box-shadow: var(--shadow-l);
}
.btn:active > *,
.btn-self:active {
  background-color: var(--bg-1);
  box-shadow: var(--shadow-inv-l);
}

.only-mobile {
  display: none;
}
.grid-mobile {
  display: none;
}
.grid {
  display: grid;
}
.cols-1 {
  grid-template-columns: 1fr;
}
.cols-2 {
  grid-template-columns: 1fr 1fr;
}
.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.cols-1-70 {
  grid-template-columns: 70px;
}
.cols-1-10vw {
  grid-template-columns: minmax(40px, 10vw);
}
.cols-2-70 {
  grid-template-columns: 70px 70px;
}
.grid-title-desc {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.grid-comicpage {
  display: grid;
  grid-template-rows: 40px 80% 52px;
  max-height: 100dvh;
}
.cols-main {
  grid-template-columns: repeat(3, minmax(var(--main-grid-min), 25%));
}

.gap-1 {
  gap: var(--gap-1);
}
.gap-2 {
  gap: var(--gap-2);
}
.gap-3 {
  gap: var(--gap-3);
}
.ygap-1 {
  row-gap: var(--gap-1);
}
.ygap-2 {
  row-gap: var(--gap-2);
}
.ygap-3 {
  row-gap: var(--gap-3);
}
.xgap-1 {
  column-gap: var(--gap-1);
}
.xgap-2 {
  column-gap: var(--gap-2);
}
.xgap-3 {
  column-gap: var(--gap-3);
}

.padding-1 {
  padding: var(--padding-1);
}
.padding-2 {
  padding: var(--padding-2);
}
.padding-3 {
  padding: var(--padding-3);
}
.padding-4 {
  padding: var(--padding-4);
}
.py-1 {
  padding-bottom: var(--padding-1);
  padding-top: var(--padding-1);
}
.py-3 {
  padding-bottom: var(--padding-3);
  padding-top: var(--padding-3);
}
.py-em {
  padding-bottom: 4em;
  padding-top: 4em;
}
.px-2 {
  padding-left: var(--padding-2);
  padding-right: var(--padding-2);
}

.my-1 {
  margin-bottom: var(--margin-1);
  margin-top: var(--margin-1);
}
.mb-1 {
  margin-bottom: var(--margin-1);
}
.mb-2 {
  margin-bottom: var(--margin-2);
}
.mb-3 {
  margin-bottom: var(--margin-3);
}

.full-screen {
  width: 100vw;
  height: 100dvh;
}

.width-100 {
  width: 100%;
}
.width-10vw {
  width: 10vw;
  min-width: 40px;
}
.full-width {
  grid-column: 1 / -1;
}
.x-1 {
  grid-column-start: 1;
}
.x-2 {
}
.x-3 {
}
.xspan-1 {
  grid-column-end: span 1;
}
.xspan-2 {
  grid-column-end: span 2;
}

.even-x {
  justify-content: space-evenly;
}
.center-x {
  justify-content: center;
}
.center-content {
  place-content: center;
  justify-content: center;
  align-items: center;
}
.center-y-self {
  align-self: center;
}
.center-self {
  place-self: center;
}
.center-text {
  text-align: center;
}
.right-text {
  text-align: right;
}

.radius-1 {
  border-radius: var(--border-radius-1);
}
.radius-2 {
  border-radius: var(--border-radius-2);
}
.radius-3 {
  border-radius: var(--border-radius-3);
}

.square {
  aspect-ratio: 1;
  height: auto;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
}

.fixed-tl-nopad {
  position: fixed;
  top: 0;
  left: 0;
}
.fixed-tr {
  position: fixed;
  top: var(--padding-3);
  right: var(--padding-3);
}
.fixed-br {
  position: fixed;
  bottom: var(--padding-3);
  right: var(--padding-3);
}

.z-1 {
  z-index: 1;
}
.z-2 {
  z-index: 2;
}

.bg-l {
  background-color: var(--bg-1);
}
.bg-m {
  background-image: var(--bg-2-gradient);
}
.bg-h {
  background-color: var(--bg-3);
}
.bg-transparent {
  background-color: var(--bg-transparent);
}

.txt-light-children *,
.txt-light {
  color: var(--txt-light);
  fill: var(--txt-light);
}
.txt-dark-children *,
.txt-dark {
  color: var(--txt-dark);
  fill: var(--txt-dark);
}
.txt-error {
  color: var(--txt-error);
  fill: var(--txt-error);
}
.txt-success {
  color: var(--txt-success);
  fill: var(--txt-success);
}

.shadow-s {
  box-shadow: var(--shadow-s);
}
.shadow-m {
  box-shadow: var(--shadow-m);
}
.shadow-l {
  box-shadow: var(--shadow-l);
}
.shadow-inv-s {
  box-shadow: var(--shadow-inv-s);
}
.shadow-inv-m {
  box-shadow: var(--shadow-inv-m);
}
.shadow-inv-l {
  box-shadow: var(--shadow-inv-l);
}

.pointer {
  cursor: pointer;
}

@media screen and (min-width: 681px) {
}

@media screen and (max-width: 680px) {
  body {
    padding: var(--padding-3);
  }

  .cols-main {
    grid-template-columns: repeat(2, 1fr);
  }

  .full-width-tablet {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 500px) {
  body {
    padding: var(--padding-3);
  }
  .grid-title-desc {
    display: grid;
    grid-template-columns: 1fr;
  }
  .cols-main {
    grid-template-columns: 1fr 0;
  }
  .full-width-mobile {
    grid-column: 1 / -1;
  }
  .padding-3-mobile {
    padding: var(--padding-3);
  }
  .gap-3-mobile {
    gap: var(--gap-3);
  }
  .grid-mobile {
    display: grid;
  }
  .only-mobile {
    display: block;
  }
  .no-mobile {
    display: none;
  }
}