@import "/script/reset.css";

@font-face {
  font-family: BitTypeWriter;
  src: url(/graphics/fonts/BitTypeWriter.ttf);
}
@font-face {
  font-family: BrokenHand;
  src: url(/graphics/fonts/BrokenHand.ttf);
}
@font-face {
  font-family: DroidSansMonoPixel;
  src: url(/graphics/fonts/DroidSansMonoPixel.ttf);
}
@font-face {
  font-family: Handwrittenpixel;
  src: url(/graphics/fonts/handwrittenpixel.ttf);
}
@font-face {
  font-family: HeavyBottom;
  src: url(/graphics/fonts/HEAVYBOTTOM.ttf);
}

:root {
  color-scheme: light-dark;

  --bg: light-dark(#8ab3b1, #5f5e89);
  --bg-xtile: light-dark(
    url(/graphics/repeats/susuki-trsp-blu.webp),
    url(/graphics/repeats/susuki-border.webp)
  );

  --srfc-txt: light-dark(#464e3c, #755a71);
  --txt-title: light-dark(#3b5558, #ebebc7);
  --a-txt: light-dark(#d8e5ff, #d0cdef);
  --a-txt-fcs: light-dark(#84bec0, #efea9a);
  --a-txt-actv: light-dark(#6081b4. #758664);
  --a-txt-vstd: light-dark(#b8c0d4, #e5d3fd);
  --txt-shdw: light-dark(#3b4012, #331d25);

  --srfc: #b8c0d4;
  --button-up: url(/graphics/slices/mauve-button-up.webp);
  --button-dwn: url(/graphics/slices/mauve-button-down.webp);
  --bdr-img-full: url(/graphics/slices/window-50px-slices.png);
  --button-up-gr: url(/graphics/slices/grey-button-up.webp);
  --button-dwn-gr: url(/graphics/slices/grey-button-down.webp);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #8ab3b1;
  --bg-xtile: url(/graphics/repeats/susuki-trsp-blu.webp);
  --txt-title: #3b5558;
  --a-txt: #d8e5ff;
  --a-txt-fcs: #84bec0;
  --a-txt-actv: #6081b4;
  --a-txt-vstd: #b8c0d4;
  --srfc-txt: #464e3c;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #5f5e89;
  --bg-xtile: url(/graphics/repeats/susuki-border.webp);
  --txt-title: #ebebc7;
  --a-txt: #d0cdef;
  --a-txt-fcs: #efea9a;
  --a-txt-actv: #758664;
  --a-txt-vstd: #e5d3fd;
  --txt-shdw: #331d25;
  --srfc-txt: #755a71;
}

/* forced-colors mode, allow override for accessibility settings*/
@media (forced-colors: active) {
  .card,
  .panel,
  .alert,
  .btn,
  .badge,
  .input,
  .theme-toggle {
    box-shadow: none;
    border-color: CanvasText;
  }
}

h1 {
  font-family: "HeavyBottom", typewriter, monospace;
  font-weight: 300;
  color: var(--txt-title);
  font-size: 1.6em;
}

h2,
h3,
h3 {
  font-family: "handwrittenpixel", typewriter, monospace;
  font-weight: lighter;
  color: var(--srfc-txt);
}

html {
  height: 100%;
  background-image: var(--bg-xtile);
  background-size: 141px;
  background-repeat: repeat-x;
  background-color: var(--bg);
  background-attachment: fixed;
  background-position: bottom;
}

body {
  margin-inline: 5em;
  padding-bottom: 40%;
}

header {
  position: sticky;
  display: flex;
  width: 100%;
  justify-content: space-between;
  button {
    border-image: var(--button-up-gr) 33% fill/12px repeat;
    margin: 12px;
    background-color: var(--bg);
  }

  button:focus,
  button:hover {
    border-image: var(--button-up-gr) 33% fill / 18px repeat;
  }
  button:active {
    border-image: var(--button-dwn-gr) 33% fill / 18px repeat;
  }
}

main {
  display: flex;
  justify-content: space-between;
}

article {
  padding-top: 5em;
  margin-inline: auto;
}

.rain-box img {


  border-image: var(--bdr-img-full) 33% fill / 50px repeat;
  border-image-outset: 48px 12px 18px 24px;

}
nav {
  justify-content: space-between;
  border-image: var(--bdr-img-full) 33% fill / 50px repeat;
  margin-inline: auto;
  margin-top: 2em;
  padding: 2em 1em 0.1em 1.3em;
  min-width: max-content;
  max-width: 26%;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-block: 2em;

  li {
    margin: 0.8em;
    padding: 0.8em;
    text-align: center;
    font-family: "brokenhand", typewriter, monospace;
    box-sizing: border-box;
    a {
      font-family: "brokenhand", typewriter, monospace;
      font-size: 1.3em;
      text-decoration: none;
      color: var(--a-txt);
      text-decoration: none;
    }

    a:focus,
    a:hover {
      color: var(--a-txt-fcs);
      text-decoration: underline;
      text-shadow: -1px 1px 1px var(--txt-shdw);
    }
    a:active {
      text-shadow: 1px -1px 1px var(--txt-shdw);
      color: var(--a-txt-actv);
    }
    a:visited {
      color: var(--a-txt-vstd);
    }
  }
  li {
    border-image: var(--button-up) 33% fill / 12px repeat;
    color: var(--txt1);
  }

  li:hover,
  li:focus {
    border-image: var(--button-up) 33% fill / 18px repeat;
  }

  li:active {
    border: 12px;
    border-image: var(--button-dwn) 33% fill / 18px repeat;
  }
}
.gallery-nav {
  display: flex;
  flex-direction: row;
  max-width: max-content;
  justify-content: center;
}
.gallery-nav li {
  display: inline;
  padding-inline: 3em;
  flex-shrink: 2;
}
.gallery-nav li:nth-child(2n + 1) {
  padding-inline: 1em;
  flex-grow: 1;
}


.gallery {
  h3 {
    position: absolute;
    color: var(--a-txt);
    font-family: "bittypewriter", monospace;
    font-weight: lighter;
    font-style: normal;
    text-shadow: -1px 2px 2px #331d25;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 1;
    top: 28px;
    left: 18px;
  }


img {
  max-height: 70px;
  min-height: 10px;
  background-color: var(--srfc);
}
  .window {
    flex-wrap: wrap;
    overflow: hidden;
  }
}

.window {
  justify-content: center;
  border-image: var(--bdr-img-full) 33% fill / 50px repeat;
  margin-inline: auto;
  padding: 4em 2em 3em 2em;
  display: flex;
  flex-direction: row;
}