/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/

/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  Remove list styles (bullets/numbers)
  in case you use it with normalize.css
*/
ol, ul {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
}

/* Removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* Revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}
:root {
  font-family: "JBMono", monospace;
  --background-color: rgb(30, 30, 46);
  --background-color2: rgb(17, 17, 27);
  --background-color3: rgb(49, 50, 68);
  --text-color: rgb(205, 214, 244);
  --subtext-color: rgb(147, 153, 178);
  --subtext-color2: rgb(166, 173, 200);
  --accent-color: rgb(116, 199, 236);
  --accent-color2: rgb(180, 190, 254);
  --blue: rgb(137, 180, 250);
  --green: rgb(166, 227, 161);
  --yellow: rgb(249, 226, 175);
  --red: rgb(243, 139, 168);
  --orange: rgb(250, 179, 135);
  --purple: rgb(203, 166, 247);

  overscroll-behavior-y: none;
  scrollbar-color: var(--text-color) transparent;
}

@font-face {
  font-family: "JBMono";
  src: url("/font/jbmnfm.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "JBMono";
  src: url("/font/jbmnfb.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "JBMono";
  src: url("/font/jbmnfi.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "JBMono";
  src: url("/font/jbmnfbi.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block: 0.67em;
  text-align: center;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block: 0.83em;
  text-align: center;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block: 1em;
}

em,
i {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}
sup {
  vertical-align: super;
  font-size: smaller;
}

u {
  text-decoration: underline;
}

del {
  text-decoration: line-through;
}

hr {
  color: var(--subtext-color);
  border-width: 1px;
  border-style: inset;
  margin-block: 0.5em;
  margin-inline: auto;
  overflow: hidden;
  width: 50%;

  /* FIXME: This is not really per spec */
  display: block;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin: 1em 0.75em;
}

select,
textarea,
button,
input {
  background-color: var(--background-color2);
  padding: 2px 8px;
  margin: 4px 0;
  border-radius: 8px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--subtext-color);
}

button {
  margin: 0.2rem;
  font-size: 1.2rem;
  padding: 0 7px;
}

input[type="password"] {
  letter-spacing: 4px;
}

select:valid,
textarea:valid,
input:valid {
  border-color: var(--text-color);
}

button,
input[type="submit"] {
  font-weight: bold;
}

form:not(:has(input:invalid)) button + input[type="submit"] {
  border-color: var(--text-color);
  color: var(--text-color);
}

form:has(input:invalid) input[type="submit"] {
  border-color: var(--subtext-color);
  color: var(--subtext-color);
  pointer-events: none;
}

button:hover,
form:not(:has(input:invalid)) input[type="submit"]:hover {
  color: var(--background-color2);
  background-color: var(--text-color);
  border-color: var(--text-color);
}

blockquote {
  margin: 0.5rem 1rem;
  padding: 0.25rem 1rem;
  border-left: 4px solid var(--subtext-color);
}

.dim {
  color: var(--subtext-color);
  font-size: 0.9rem;
  font-weight: normal;
}

.dude {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  display: inline;
  color: var(--text-color);
}

.coverd {
  display: none;
}

.no-scroll {
  overflow: hidden;
}
header {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  border-top: 0.25rem solid var(--subtext-color);
  display: sticky;
  nav {
    white-space: nowrap;
  }
  nav a {
    padding: 0 0.5rem 0;
    border-top: 0.25rem solid transparent;
  }

  nav a:hover,
  nav:not(nav:hover) a.here {
    border-color: var(--accent-color2);
    color: var(--accent-color2);
  }

  #searchNovelContainer {
    display: inline-block;
    position: relative;
    width: fit-content;
    min-width: 15rem;
    height: 1rem;
  }
  #searchNovel {
    overscroll-behavior-y: none;
    background-color: var(--background-color3);
    #searchNovelBtn {
      font-weight: normal;
      padding: 0 0.5rem;
    }
    position: absolute;
    z-index: 100;
    max-height: 20rem;
    overflow: scroll;
    top: 0;
    left: 0;
    width: 100%;
    input {
      border-top: 0.2rem solid transparent;
      margin: 0;
      font-size: 1rem;
      padding: 0.2rem;
      border: none;
      color: var(--text-color);
    }
    #searchResultsNone {
      background-color: var(--background-color2);
      margin: 0 0.2rem 0.2rem 0.2rem;
    }
    #searchNovelHeader label,
    a {
      background-color: var(--background-color2);
      margin: 0 0.2rem 0.2rem 0.2rem;
      border: 0 solid transparent;
      display: grid;
      padding: 0;
      grid-template-columns: 1.5rem auto;
      gap: 0.2rem;
      text-align: left;
      overflow: hidden;
      img {
        width: 1.5rem;
      }
      span {
        margin: auto 0;
      }
    }
    &:not(*:focus) a {
      display: hidden;
    }
    #searchNovelHeader {
      position: sticky;
      top: 0;
      background-color: var(--background-color3);
      box-shadow: 0 0.2rem var(--background-color3);
    }
    .searchResult {
      display: none;
    }
    &:has(*:focus-within) .searchResult {
      display: block;
    }
    &:not(:has(.searchResult:focus-within)) a:hover,
    &:not(:has(.searchResult:hover)) a:focus,
    &:not(:has(.searchResult:focus-within)):not(:has(.searchResult:hover))
      #selected {
      color: var(--blue);
    }
  }
}

.coverd {
  display: none !important;
}
#notificationSpan {
  max-width: 600px;
  margin: 0 auto;
  .error {
    --notification-color: var(--red);
  }
  .info {
    --notification-color: var(--blue);
  }
  .warning {
    --notification-color: var(--yellow);
  }
  .alert {
    --notification-color: var(--green);
  }
  .error,
  .info,
  .warning,
  .alert {
    display: flex;
    justify-content: space-between;
    vertical-align: center;
    text-align: center;
    color: var(--notification-color);
    border-color: var(--notification-color);
    background-color: color-mix(
      in srgb,
      var(--notification-color) 20%,
      transparent
    );
    &:has(.notificationCross:checked) {
      display: none;
    }
  }
  .notificationCross {
    transition-duration: 0.1s;
    border-radius: 2rem;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 1.34rem;
    height: 1.34rem;
    font-weight: bold;
    &::before {
      content: "✗";
    }
    &:hover {
      background-color: var(--notification-color);
      color: color-mix(
        in srgb,
        var(--notification-color) 20%,
        var(--background-color)
      );
    }
  }
}