@font-face {
  font-family: "MSFont";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/w95fa.eot");
  src: url("../fonts/w95fa.eot?#iefix") format("embedded-opentype"), url("../fonts/w95fa.woff2") format("woff2"), url("../fonts/w95fa.woff") format("woff"), url("../fonts/w95fa.otf") format("opentype"), url("../fonts/w95fa.ttf") format("truetype");
}

@font-face {
  font-family: "Baba";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Baba\ Is\ Font.otf");
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/ms_sans_serif.woff");
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  font-style: bold;
  font-weight: bold;
  src: url("../fonts/ms_sans_serif_bold.woff");
}

@font-face {
  font-family: "Hypnos";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/hypnospace-outlaw.otf");
}

@font-face {
  font-family: "Hypnos-Abyssal";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/hypnos-abyssal.otf");
}

@font-face {
  font-family: "KarmaticArcade";
  font-style: regular;
  font-weight: normal;
  src: url("../fonts/ka1.eot");
  src: url("../fonts/ka1.eot?#iefix") format("embedded-opentype"), url("../fonts/ka1.woff2") format("woff2"), url("../fonts/ka1.woff") format("woff"), url("../fonts/ka1.otf") format("opentype"), url("../fonts/ka1.ttf") format("truetype");
}

@font-face {
  font-family: "Visitor";
  font-style: regular;
  font-weight: normal;
  src: url("../fonts/visitor1.eot");
  src: url("../fonts/visitor1.eot?#iefix") format("embedded-opentype"), url("../fonts/visitor1.woff2") format("woff2"), url("../fonts/visitor1.woff") format("woff"), url("../fonts/visitor1.otf") format("opentype"), url("../fonts/visitor1.ttf") format("truetype");
}

@font-face {
  font-family: "Blow";
  font-style: regular;
  font-weight: normal;
  src: url("../fonts/blow.eot");
  src: url("../fonts/blow.eot?#iefix") format("embedded-opentype"), url("../fonts/blow.woff2") format("woff2"), url("../fonts/blow.woff") format("woff"), url("../fonts/blow.otf") format("opentype"), url("../fonts/blow.ttf") format("truetype");
}

@font-face {
  font-family: "Ransom";
  font-style: regular;
  font-weight: normal;
  src: url("../fonts/Ransom.eot");
  src: url("../fonts/Ransom.eot?#iefix") format("embedded-opentype"), url("../fonts/Ransom.woff2") format("woff2"), url("../fonts/Ransom.woff") format("woff"), url("../fonts/Ransom.otf") format("opentype"), url("../fonts/Ransom.ttf") format("truetype");
}

* {
  box-sizing: border-box;
  /* For the <a> tags */
}

:root {
  --noise-texture: url(https://i.gyazo.com/a26366e538851a5c569ff648e99b7fd4.png);
  --gif-texture: url(https://64.media.tumblr.com/da60c13b478dda09ab90c27e880983b8/tumblr_nd4pwdPKdc1tun3l0o1_1280.gifv);
  --default-cursor: url("../images/mouse_frame_1.png"), auto;
  --default-hover-cursor: url("../images/alertmouse_frame_1.png") 1 2, auto;
  /* w = window, wct = window control */
  --w7-w-space: 6px;
  --w7-w-bd: #000000b3;
  --w7-w-bdr: 6px;
  --w7-w-bg: #4580c4;
  --w7-w-glass: linear-gradient(135deg, #fff5 70px, transparent 100px), linear-gradient(225deg, #fff5 70px, transparent 100px),
    linear-gradient(54deg,
      /* ------------------------------- 1st stripe ------------------------------- */
      #0002 0 4%,
      #6661 6% 6%,
      #0002 8% 10%,
      /* ------------------------------- 2nd stripe ------------------------------- */
      #0002 15% 16%,
      #aaa1 17% 18%,
      #0002 23% 24%,
      /* ------------------------------- 3rd stripe ------------------------------- */
      #bbb2 25% 26%,
      #0002 31% 33%,
      /* ------------------------------- 4th stripe ------------------------------- */
      #0002 34% 34.5%,
      #bbb2 36% 40%,
      /* ------------------------------- 5th stripe ------------------------------- */
      #0002 41% 41.5%,
      #bbb2 44% 45%,
      /* ------------------------------- 6th stripe ------------------------------- */
      #bbb2 46% 47%,
      #0002 48% 49%,
      #0002 50% 50.5%,
      /* ------------------------------- 7th stripe ------------------------------- */
      #0002 56% 56.5%,
      #bbb2 57% 63%,
      #0002 67% 69%,
      /* ------------------------------- 8th stripe ------------------------------- */
      #bbb2 69.5% 70%,
      #0002 73.5% 74%,
      /* ------------------------------- 9th stripe ------------------------------- */
      #bbb2 74.5% 79%,
      #0002 80% 84%,
      /* ------------------------------- 10th stripe ------------------------------- */
      #aaa2 85% 86%,
      #0002 87%,
      #bbb1 90%) left center/100vw 100vh no-repeat fixed;
  --w7-w-grad: linear-gradient(to right, #ffffff66, #0000001a, #ffffff33), var(--w7-w-bg);
  --w7-wct-bd: #0000004d;
  --w7-wct-bdr: 5px;
  --w7-wct-sd: inset 0 0 0 1px #fffa;
  --w7-wct-bg: linear-gradient(#ffffff80, #ffffff4d 45%, #0000001a 50%, #0000001a 75%, #ffffff80);
  --w7-wct-bg-h: radial-gradient(circle at bottom, #2aceda, transparent 65%), linear-gradient(#b6d9ee 50%, #1a6ca1 50%);
  --w7-wct-bg-a: radial-gradient(circle at bottom, #0bfdfa, transparent 65%), linear-gradient(#86a7bc 50%, #092747 50%);
  --w7-wct_close-bg: radial-gradient(circle at -60% 50%, #0007 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #0007 5% 10%, #0000 50%),
    linear-gradient(#e0a197e5, #cf796a 25% 50%, #d54f36 50%);

  --w7-font: var(--font-size) "Segoe UI", "SegoeUI", "Noto Sans", sans-serif;
  --w7-surface: #f0f0f0;
  --w7-el-bg: #f2f2f2;
  --w7-el-bg-d: #f4f4f4;
  --w7-el-bg-s-1: #ebebeb;
  --w7-el-bg-s-2: #cfcfcf;
  --w7-el-sd: inset 0 0 0 1px #fffc;
  --w7-el-sd-a: inset 1px 1px 0 #0003, inset -1px 1px 0 #0001;
  --w7-el-bd: #8e8f8f;
  --w7-el-bd-h: #3c7fb1;
  --w7-el-bd-a: #6d91ab;
  --w7-el-bd-d: #adb2b5;
  --w7-el-bdr: 3px;
  --w7-el-c: #000;
  --w7-el-c-d: #838383;
  --w7-el-grad: linear-gradient(var(--w7-el-bg) 45%, var(--w7-el-bg-s-1) 45%, var(--w7-el-bg-s-2));
  --w7-el-grad-h: linear-gradient(#eaf6fd 45%, #bee6fd 0, #a7d9f5);
  --w7-el-grad-a: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db);
  --w7-li-bd-hl: #aaddfa;
  --w7-li-bg-hl: linear-gradient(#fff9, #e6ecf5cc 90%, #fffc);
  --w7-bl-bd: #0006;
  --w7-blt-size: 18px;
  --w7-blt-offset: 1em;


  color-scheme: dark;
  --bg-color: black;
  --bg-img: url("../images/bg_space.jpg");
  --bg-size: 100% auto;
  --bg-attach: fixed;
  --bg-repeat: no-repeat;
  --body-color: black;
  --text-color: rgb(223, 215, 215);
  --link-color: rgb(219, 120, 170);
  --default-font: "MS PGothic", sans-serif;
  --header-font: "MS PGothic", sans-serif;
  --text-color: rgb(223, 215, 215);
  --link-color: rgb(219, 120, 170);
  --visited-link: rgb(167, 80, 123);
  --hover-link: rgb(255, 253, 148);
  --active-link: rgb(255, 148, 214);
  --cursor: var(--default-cursor);
  --cursor-hover: var(--default-hover-cursor);

  --font-size: 1em;
  --header-size: 3em;

  --bg-overlay: url(../images/noise_overlay.jpg);

  --alt-1: rgba(0, 0, 0, 0.2);
  --alt-2: rgba(34, 32, 32, 0.2);
}

.aero-only,
.bliss-only {
  display: none;
}

[data-theme=bliss] {
  .bliss-only {
    display: block;
  }
}

[data-theme=aero] {
  .aero-only {
    display: block;
  }
}

.title-bar {
  display: none;
}

.hover {
  transition: .2s;
}

.hover:hover {
  transform: scale(1.1);

}

@keyframes flicker {

  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.822);
  }

  20%,
  24%,
  55% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.822);
  }
}

img {

  image-rendering: auto;
}

[data-theme=bliss] *,
[data-theme=hypnos] *,
[data-theme=baba] * {
  image-rendering: pixelated;
}

[data-theme=vhs] .cover::before,
[data-theme=console] .cover::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 9999;
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
  animation: crtscroll 0.2s linear infinite;
}

@keyframes crtscroll {
  0% {
    top: -4px;
  }

  100% {
    top: 0px;
  }
}

@media (prefers-reduced-motion) {

  [data-theme=vhs] .cover::before,
  [data-theme=console] .cover::before {
    animation: none;
  }
}


#loadingScreen {
  opacity: 1;
  background-color: #000000;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 10000;
  animation: loading-anim 1s linear .5s forwards;
  animation-play-state: running;
  pointer-events: none;
}

@keyframes loading-anim {
  0% {
    opacity: 1;

  }

  100% {
    opacity: 0;
  }
}



[data-theme=default] {
  color-scheme: dark;
  --bg-color: black;
  --bg-img: url("../images/bg_space.jpg");
  --bg-size: cover;
  --bg-attach: fixed;
  --bg-repeat: no-repeat;
  --bg-position: top;
  --body-color: black;
  --main-bg: url(../images/black_paper.jpg);
  --text-color: rgb(223, 215, 215);
  --link-color: rgb(219, 120, 170);
  --default-font: "MS PGothic", sans-serif;
  --header-font: "MS PGothic", sans-serif;
  --text-color: rgb(223, 215, 215);
  --link-color: rgb(219, 120, 170);
  --visited-link: rgb(167, 80, 123);
  --hover-link: rgb(255, 253, 148);
  --active-link: rgb(255, 148, 214);
  --cursor: var(--default-cursor);
  --cursor-hover: var(--default-hover-cursor);

  --font-size: 1em;
  --header-size: 3em;

  --bg-overlay: url(../images/noise_overlay.jpg);

  --alt-1: rgba(0, 0, 0, 0.2);
  --alt-2: rgba(34, 32, 32, 0.2);
  --theme-color-1: #905865;
  --theme-color-2: #988A50;
  --theme-color-3: #687B7A;
  --theme-color-4: #121111;
  --theme-color-5: #CBC6BA;
}

[data-theme=light] {
  color-scheme: light;
  --bg-color: #9cc1cf;
  --bg-img: url("../images/bg_sky.jpg");
  --bg-size: cover;
  --bg-attach: fixed;
  --bg-repeat: no-repeat;
  --body-color: rgb(255, 255, 255);
  --text-color: rgb(0, 0, 0);
  --accent-color: rgb(221, 74, 197);
  --main-bg: url(../images/seamless_paper_texture_2.jpg);
  --default-font: "MS PGothic", sans-serif;
  --note-font: "MyNerve";
  --header-font: "MS PGothic", sans-serif;
  --header-color: rgb(0, 0, 0);
  --link-color: rgb(115, 227, 247);
  --visited-link: rgb(136, 91, 194);
  --hover-link: rgb(157, 210, 235);
  --active-link: rgb(148, 239, 255);
  --cursor: var(--default-cursor);
  --cursor-hover: var(--default-hover-cursor);

  --font-size: 1em;
  --header-size: 3em;

  --bg-overlay: url(../images/noise_overlay.jpg);

  --alt-1: rgba(224, 224, 224, 0.2);
  --alt-2: rgba(255, 255, 255, 0.2);
  --theme-color-1: #905865;
  --theme-color-2: #988A50;
  --theme-color-3: #687B7A;
  --theme-color-4: #121111;
  --theme-color-5: #CBC6BA;
}

[data-theme=groovy] {
  --bg-color: rgb(168, 135, 42);
  --body-color: black;
  --text-color: white;
  --accent-color: #dd4ac5;
  --default-font: "Blow";
  --header-font: "KarmaticArcade";
  --cursor: url("../images/mouse_frame_1.png"), auto;
  --bg-size: 432px;

  --font-size: 1em;
  --header-size: 3em;
}

[data-theme=console] {
  --bg-color: rgba(23, 97, 13, 0.404);
  --body-color: black;
  --text-color: rgb(243, 255, 178);
  --main-bg: transparent;
  --accent-color: rgb(78, 141, 49);
  --default-font: "Courier New";
  --header-font: "Courier New";
  --cursor: var(--default-cursor);
  --cursor-hover: var(--default-hover-cursor);
  --link-color: rgb(247, 245, 115);
  --visited-link: rgb(179, 194, 91);
  --hover-link: rgb(234, 235, 157);
  --active-link: rgb(255, 244, 148);

  --bg-img: url(https://img.freepik.com/free-photo/luxury-plain-green-gradient-abstract-studio-background-empty-room-with-space-your-text-picture_1258-100646.jpg?semt=ais_hybrid&w=740&q=80);
  --bg-repeat: no-repeat;
  --bg-attach: fixed;
  --bg-size: 100% 100%;
  --font-size: 1em;
  --header-size: 3em;

  body {
    text-shadow: 2px 2px 23px rgba(255, 255, 255, 0.822);
    animation: flicker 0.2s linear infinite;
  }
}

[data-theme=vhs] {
  --bg-color: black;
  --bg-img: linear-gradient(0deg, #00007A 29%, #000000FF 99%);
  --bg-size: 100% auto;
  --bg-attach: fixed;
  --bg-repeat: no-repeat;

  --body-color: black;
  --text-color: #ffffff;
  --accent-color: #E4A30B;
  --default-font: Arial, sans-serif;
  --header-font: "Times New Roman", serif;
  --link-color: var(--accent-color);
  --visited-link: var(--accent-color);
  --hover-link: #fdd90f;
  --active-link: var(--accent-color);
  --menu-button-bg: url("../images/paper_bg_pink_3.png");
  --main-bg: transparent;

  --cursor: var(--default-cursor);
  --cursor-hover: var(--default-hover-cursor);

  --font-size: 1em;
  --header-size: 3em;

  --bg-overlay: url(../images/noise_overlay.jpg);

  h1,
  h2,
  h3,
  footer {
    background: #ffd257;
    background: linear-gradient(0deg, rgba(255, 210, 87, 1) 32%, rgba(254, 255, 250, 1) 50%, rgba(237, 221, 83, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: oblique;
    font-family: var(--header-font);
  }

  h2 {
    font-size: 3rem;
  }

  .post-it h3 {
    text-shadow: 0px 0px 23px var(--accent-color);
  }

  p {
    text-shadow: 0px 0px 23px var(--text-color),
      3px 3px 0 #000,
      -3px 3px 0 #000,
      -3px -3px 0 #000,
      3px -3px 0 #000;
    animation-duration: 0.01s;
    animation-name: textflicker;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  a {
    font-style: oblique !important;
    font-weight: bold;
  }

  .cover:after {
    content: "";
    display: flex;
    position: absolute;
    top: 0;
    bottom: -10px;
    background: var(--gif-texture), var(--noise-texture);
    min-width: 100%;
    min-height: 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: cover;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 20%;
    z-index: 15;
  }
}

@media (prefers-reduced-motion) {
  [data-theme=vhs] #cont:after {
    display: none;
  }
}

[data-theme="hypnos"] {
  --surface: #99C8F4;
  --default-font: "Hypnos", Arial;
  --main-bg: #1d1b1b;
  --text-color: #302454;
  --link-color: rgb(219, 120, 170);
  --visited-link: rgb(167, 80, 123);
  --hover-link: rgb(255, 253, 148);
  --active-link: rgb(255, 148, 214);

  --bg-color: #A7CD78;
  --bg-img: url("../images/checker_hyp.png");
  --bg-size: 100px;
  --bg-repeat: repeat fixed 50% / 100px;

  --window-frame: #b3d8fa;
  --button-face: #b3d8fa;
  --button-shadow: #99C8F4;
  --button-highlight: #FBFCFF;
  --border-window-inner: inset -3px -3px var(--button-shadow),
    inset 3px 3px var(--button-highlight);
  --border-window-outer: inset -3px -3px var(--window-frame),
    inset 3px 3px var(--button-face);
  --header-font: "Hypnos-Abyssal", Arial;
  --cursor: url("../images/mouse_default_hypno.png") 10 0, auto;
  --cursor-hover: url("../images/mouse_alert_hypno.png") 16 0, auto;

  --font-size: .9em;
  --header-size: 3em;

  .window {
    border-radius: 0;
    border-left: 5px var(--surface) solid;
    border-right: 5px var(--surface) solid;

    border-bottom: 5px var(--surface) solid;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.3);
    color: aliceblue;
    background-image: url("../images/hypno_bg.jpg");
  }

}


/* ACTUAL CSS THEMING */
[data-theme="hypnos"] {
  .title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 5px var(--surface) solid;
    color: var(--text-color);
    text-align: left;
    background: linear-gradient(var(--surface) 0%, var(--surface) 50%, #8990F5 50%);
  }

  .title-bar-controls {
    display: flex;
    align-items: center;
  }

  .title-bar button {
    background-image: url("../images/hyp-home.png");
    background-size: 100% 100%;
    height: 1.5rem;
    width: 1.7rem;
    padding: 0;
  }

  .title-bar-controls button[aria-label="Minimize"],
  .title-bar-controls button[aria-label].minimize {
    background-image: url("../images/hyp_forward.png");
    background-repeat: no-repeat;
  }

  .title-bar-controls button[aria-label="Maximize"],
  .title-bar-controls button[aria-label].maximize {
    background-image: svg-load("./icon/maximize.svg");
    background-repeat: no-repeat;
  }

  .title-bar-controls button[aria-label="Maximize"]:disabled,
  .title-bar-controls button[aria-label].maximize:disabled {
    background-image: svg-load("./icon/maximize-disabled.svg");
    background-repeat: no-repeat;
  }

  .title-bar-controls button[aria-label="Restore"],
  .title-bar-controls button[aria-label].restore {
    background-image: svg-load("./icon/restore.svg");
    background-repeat: no-repeat;
  }

  .title-bar-controls button[aria-label="Help"],
  .title-bar-controls button[aria-label].help {
    background-image: svg-load("./icon/help.svg");
    background-repeat: no-repeat;
  }

  .title-bar-controls button[aria-label="Close"],
  .title-bar-controls button[aria-label].close {
    background-image: url("../images/hyp_close.png");
    background-repeat: no-repeat;
  }

  a:hover {
    color: magenta;
  }

  .updates-field {
    background-color: transparent;
  }
}

[data-theme="bliss"] {

  --cursor-hover: pointer;
  --link-color: #0000ff;
  --default-font: "Pixelated MS Sans Serif", sans-serif;

  --bg-img: url("../images/bliss.jpg");
  --bg-color: var(--surface);
  --bg-size: cover;
  --bg-repeat: no-repeat;
  --bg-attach: fixed;

  --header-color: white;
  --cursor: default;
  --cursor-hover: pointer;

  --font-size: .95em;
  --header-size: 3em;

  --bg-overlay: url(../images/noise_overlay.jpg);
}

/* ACTUAL CSS THEMING */
[data-theme="bliss"] {
  /* Color */

  --text-color: #222222;
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;

  /* Spacing */

  --element-spacing: 8px;
  --grouped-button-spacing: 4px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;
  --range-track-height: 4px;
  --range-spacing: 10px;


  /* Some detailed computations for radio buttons and checkboxes */

  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));
  --radio-dot-width: 4px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(--radio-dot-width) / 2);

  --checkbox-total-width-precalc: var(--checkbox-width) + var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
  --checkmark-width: 7px;
  --checkmark-top: 3px;
  --checkmark-left: 3px;

  /* Borders */

  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);

  /* Window borders flip button-face and button-highlight */

  --border-window-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-face);
  --border-window-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-highlight);


  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */

  --border-field: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);


  /* Tabs */

  --border-tab: inset -1px 0 var(--window-frame),
    inset 1px 1px var(--button-face),
    inset -2px 0 var(--button-shadow),
    inset 2px 2px var(--button-highlight);


  button,
  input[type="submit"],
  input[type="reset"] {
    box-sizing: border-box;
    border: none;
    color: transparent;
    text-shadow: 0 0 var(--text-color);
    background: var(--surface);
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    border-radius: 0;

    min-width: 75px;
    min-height: 23px;
    padding: 0 12px;
  }

  button.default,
  input[type="submit"].default,
  input[type="reset"].default {
    box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
  }

  .vertical-bar {
    width: 4px;
    height: 20px;
    background: #c0c0c0;
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  }

  button:not(:disabled):active,
  input[type="submit"]:not(:disabled):active,
  input[type="reset"]:not(:disabled):active {
    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
    text-shadow: 1px 1px var(--text-color);
  }

  button.default:not(:disabled):active,
  input[type="submit"].default:not(:disabled):active,
  input[type="reset"].default:not(:disabled):active {
    box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
  }

  @media (not(hover)) {

    button:not(:disabled):hover,
    input[type="submit"]:not(:disabled):hover,
    input[type="reset"]:not(:disabled):hover {
      box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
    }
  }

  button:focus,
  input[type="submit"]:focus,
  input[type="reset"]:focus {
    outline: 1px dotted #000000;
    outline-offset: -4px;
  }

  button::-moz-focus-inner,
  input[type="submit"]::-moz-focus-inner,
  input[type="reset"]::-moz-focus-inner {
    border: 0;
  }

  :disabled,
  :disabled+label,
  input[readonly],
  input[readonly]+label {
    color: var(--button-shadow);
  }

  button:disabled,
  input[type="submit"]:disabled,
  input[type="reset"]:disabled,
  :disabled+label {
    text-shadow: 1px 1px 0 var(--button-highlight);
  }

  button,

  input[type="submit"],

  input[type="reset"] button {

    box-sizing: border-box;

    border: none;

    color: transparent;

    text-shadow: 0 0 var(--text-color);

    background: var(--surface);

    box-shadow: var(--border-raised-outer), var(--border-raised-inner);

    border-radius: 0;

    min-width: 75px;

    min-height: 23px;

    padding: 0 12px;

  }

  button,
  label,
  input,
  textarea,
  select,
  option,
  table,
  ul.tree-view,
  .window,
  .title-bar {
    font-family: var(--default-font);
    color: var(--text-color);
    -webkit-font-smoothing: none;
  }

  button:focus,
  input[type="submit"]:focus,
  input[type="reset"]:focus {
    outline: 1px dotted #000000;
    outline-offset: -4px;
  }

  select,
  textarea {
    padding: 3px 4px;
    border: none;
    box-shadow: var(--border-field);
    background-color: var(--button-highlight);
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
  }

  select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    padding-right: 32px;
    background-image: url("../images/icon/button-down.svg");
    background-position: top 2px right 2px;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 0;
  }

  .window {
    box-shadow: var(--border-window-outer), var(--border-window-inner);
    background: var(--surface);
    padding: 3px;
  }

  .title-bar {
    background: linear-gradient(90deg,
        var(--dialog-blue),
        var(--dialog-blue-light));
    padding: .2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title-bar.inactive {
    background: linear-gradient(90deg,
        var(--dialog-gray),
        var(--dialog-gray-light));
  }

  .title-bar-text {
    font-weight: bold;
    color: white;
    letter-spacing: 0;
    margin-right: 24px;
    font-size: 14px;
  }

  .title-bar-controls {
    display: flex;
  }

  .title-bar-controls button {
    padding: 0;
    display: block;
    min-width: 16px;
    min-height: 14px;
  }

  .title-bar-controls button:active {
    padding: 0;
  }

  .title-bar-controls button:focus {
    outline: none;
  }

  .title-bar-controls button[aria-label="Minimize"],
  .title-bar-controls button[aria-label].minimize {
    background-image: url("../images/icon/minimize.svg");
    background-repeat: no-repeat;
    background-position: bottom 3px left 4px;
  }

  .title-bar-controls button[aria-label="Maximize"],
  .title-bar-controls button[aria-label].maximize {
    background-image: url("../images/icon/maximize.svg");
    background-repeat: no-repeat;
    background-position: top 2px left 3px;
  }

  .title-bar-controls button[aria-label="Maximize"]:disabled,
  .title-bar-controls button[aria-label].maximize:disabled {
    background-image: url("../images/icon/maximize-disabled.svg");
    background-repeat: no-repeat;
    background-position: top 2px left 3px;
  }

  .title-bar-controls button[aria-label="Restore"],
  .title-bar-controls button[aria-label].restore {
    background-image: url("../images/icon/restore.svg");
    background-repeat: no-repeat;
    background-position: top 2px left 3px;
  }

  .title-bar-controls button[aria-label="Help"],
  .title-bar-controls button[aria-label].help {
    background-image: url("../images/icon/help.svg");
    background-repeat: no-repeat;
    background-position: top 2px left 5px;
  }

  .title-bar-controls button[aria-label="Close"],
  .title-bar-controls button[aria-label].close {
    margin-left: 2px;
    background-image: url("../images/icon/close.svg");
    background-repeat: no-repeat;
    background-position: top 3px left 4px;
  }

  .title-bar-controls {
    display: flex;
  }

  .title-bar-controls button {
    padding: 0;
    display: block;
    min-width: 16px;
    min-height: 14px;
    background-position: center;
  }
}

[data-theme="aero"] {
  --bg-img: url("https://i.redd.it/over-50-frutiger-aero-wallpapers-2008ify-your-pc-v0-g6pvusd2nz9b1.jpg?width=3878&format=pjpg&auto=webp&s=6025d8769d4a6717ec19c517b9976949399b59ed");
  --bg-size: 100% 100%;
  --bg-attach: fixed;
  --bg-repeat: no-repeat;

  --text-color: black;
  --bg-color: #139EBB;
  --font-size: .9em;
  --header-size: 3em;
  --cursor: default;
  --cursor-hover: pointer;

}

/* AERO THEMING */

[data-theme="aero"] {

  .window {
    border: 1px solid var(--w7-w-bd);
    box-shadow: 2px 2px 10px 1px var(--w7-w-bd), inset 0 0 0 1px #fffa;
    font: var(--w7-font);
    position: relative;
    z-index: 0
  }

  .window,
  .window:before {
    border-radius: var(--w7-w-bdr)
  }

  .window:before {
    background: linear-gradient(transparent 20%, #ffffffb3 40%, transparent 41%), var(--w7-w-grad);
    background-color: var(--w7-w-bg);
    box-shadow: inset 0 0 0 1px #fffd;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
  }

  .window-body {
    background: var(--w7-surface);
    border: 1px solid var(--w7-w-bd);
    box-shadow: 0 0 0 1px #fff9;
    margin: var(--w7-w-space);
    margin-top: 0;
  }

  .window-body.has-space {
    padding: var(--w7-w-space)
  }

  .window-body pre {
    margin: calc(var(--w7-w-space)*-1)
  }

  .window footer,
  .window-footer {
    background: var(--w7-surface);
    border: 1px solid var(--w7-w-bd);
    border-top: 0;
    box-shadow: 0 .5px 1px .5px #fff;
    margin: var(--w7-w-space);
    margin-top: calc(var(--w7-w-space)*-1 - 1px);
    padding: 10px;
    position: relative
  }

  .window footer:before,
  .window-footer:before {
    box-shadow: inset 0 1px #0000004d, inset 0 -1px #fff;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
  }

  .window.is-bright .window-body {
    background: #fff
  }

  .window.is-bright .window-footer,
  .window.is-bright footer {
    background: #eee;
    box-shadow: inset 0 1px 3px #ddd, 0 1px 0 #fff9, 1px 1px 0 #fff9, -1px 1px 0 #fff9
  }

  .window.is-bright .window-footer:before,
  .window.is-bright footer:before {
    content: none
  }

  .window.glass:before {
    opacity: .6
  }

  .window.glass:after {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: var(--w7-w-bdr);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -10
  }

  .window.glass>.title-bar {
    background: var(--w7-w-glass);
    background-attachment: fixed
  }

  .window>.title-bar {
    border: 0;
    box-shadow: inset 0 1px 0 #fffd, inset 1px 0 0 #fffd, inset -1px 0 0 #fffd
  }

  .window fieldset {
    margin-bottom: 9px
  }

  .window[role=dialog] {
    left: 50%;
    opacity: 0;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    transition-duration: .2s;
    transition-property: visibility, opacity;
    visibility: hidden;
    z-index: 999
  }

  .window[role=dialog]:target {
    opacity: 1;
    visibility: visible
  }

  .title-bar {
    align-items: center;
    background: var(--w7-w-grad);
    background-color: var(--w7-w-bg);
    border: 1px solid var(--w7-w-bd);
    border-radius: var(--w7-w-bdr) var(--w7-w-bdr) 0 0;
    box-shadow: inset 0 0 0 1px #fff9;
    display: flex;
    font: var(--w7-font);
    justify-content: space-between;
    padding: var(--w7-w-space);
    padding-top: 0;
  }

  .title-bar-text {
    color: #000;
    letter-spacing: 0;
    line-height: 15px;
    padding-top: var(--w7-w-space);
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff
  }

  .title-bar-controls {
    background: #fff3;
    border: 1px solid var(--w7-wct-bd);
    border-radius: 0 0 var(--w7-wct-bdr) var(--w7-wct-bdr);
    border-top: 0;
    box-shadow: 0 1px 0 #fffa, 1px 0 0 #fffa, -1px 0 0 #fffa;
    display: flex
  }

  .title-bar-controls button {
    background: none;
    border: 0;
    border-radius: 0;
    border-right: 1px solid var(--w7-wct-bd);
    box-shadow: none;
    box-sizing: border-box;
    min-height: 19px;
    min-width: 29px;
    padding: 0;
    position: relative
  }

  .title-bar-controls button:after {
    content: none
  }

  .title-bar-controls button:active,
  .title-bar-controls button:hover {
    background: none
  }

  .title-bar-controls button:disabled:before {
    opacity: .4
  }

  .title-bar-controls button:before {
    border-radius: 0;
    bottom: 0;
    box-shadow: inset 0 0 0 1px #fff5;
    content: "";
    left: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 0
  }

  .title-bar-controls button:not(:hover):before {
    opacity: 1;
    transition: none
  }



  .title-bar-controls button.is-minimize:before,
  .title-bar-controls button[aria-label=Minimize]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAYAAABxeg0vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgBlY+xDQAgDMNaiQ9B8AHcxAlI/NYtKwj6QOohUzxYc+1HAqQ3e03qXNpwwcyE5QsAaEGjDRf8ZAza6Bz6VQAAAABJRU5ErkJggg==") no-repeat center 10px
  }

  .title-bar-controls button.is-maximize:before,
  .title-bar-controls button[aria-label=Maximize]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgBlZHBCYAwDEVT6YaKbqArOILgBLqBosP1VkhAaQ6S1lKad+ihPy8kxLT9+IACG57r2KqKu2GCBpTYtEMOOQELzrnv4z53I4vDjjJnwXsPJWTOAiJGHVNB5pGwLjPk+AlEBLUY7eFebCosBHOR7vYAAAAASUVORK5CYII=") no-repeat 50%
  }

  .title-bar-controls button.is-help:before,
  .title-bar-controls button[aria-label=Help]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMBAMAAACtsOGuAAAAG1BMVEUAAABTVmb////39/fa2trm5ubj4+Pq6urg4OByvnYHAAAAAXRSTlMAQObYZgAAADtJREFUCNdjYBQUFGAQVFISZBBSUlJkEDYUNmQQFBAvZGBgDA1kYBBLE2RgkGgUYGAQBDIYRBwhBJgLAKBIBQ2X+PZ0AAAAAElFTkSuQmCC") no-repeat 50%
  }

  .title-bar-controls button.is-restore:before,
  .title-bar-controls button[aria-label=Restore]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACVSURBVHgBlVDLCoMwENwU/7ClvRYK7b2lCIJHEQQ/QEHwqujfBXJIQMnihg34iHPJ7GNm2AhYcL2/JwhAxIuhq3aXb48PiFBna2YFERVHzoQLnAQmSCmxeL5+3rBtSsdpBwVKKTcY+1rY197G+8RRoLVejed94igwxrgB/zXeJ+4Jijz2Erjg+8/WE7ZAt6EgSUsIxQwaJEWv7G6SSgAAAABJRU5ErkJggg==") no-repeat 50%
  }

  .title-bar-controls button.is-close,
  .title-bar-controls button[aria-label=Close] {
    min-width: 48px
  }

  .title-bar-controls button.is-close:before,
  .title-bar-controls button[aria-label=Close]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgBlZFNCoQwDIVbmRvOMHOAAd0K/uDGlYKiCG4VPICi9yu0oCSQoFUXFtKEl6+voZXvr7sKay1TL690FOexY+Hz87i2decOuDKQsNGVe8AGYTRJIh0Y+orBvxszCPllOymlxN06jNE26Qnwg4zdHQLrMhFaawwAqAadDPE1ijwUxhiMKCmxCZk06OMYTz5lAx3xWDeXkLNAAAAAAElFTkSuQmCC") no-repeat 50%
  }

  .title-bar-controls button:first-child,
  .title-bar-controls button:first-child:before {
    border-bottom-left-radius: var(--w7-wct-bdr)
  }

  .title-bar-controls button:last-child,
  .title-bar-controls button:last-child:before {
    border: 0;
    border-bottom-right-radius: var(--w7-wct-bdr)
  }

  .title-bar-controls button:focus {
    -webkit-animation: none;
    animation: none;
    outline: none
  }

  .title-bar.active .title-bar-controls,
  .window.active .title-bar .title-bar-controls {
    border-color: var(--w7-w-bd)
  }

  .title-bar.active .title-bar-controls button,
  .window.active .title-bar .title-bar-controls button {
    border-color: var(--w7-w-bd);
    box-shadow: var(--w7-wct-sd)
  }

  .title-bar.active .title-bar-controls button:after,
  .window.active .title-bar .title-bar-controls button:after {
    content: none
  }

  .title-bar.active .title-bar-controls button.is-minimize,
  .title-bar.active .title-bar-controls button[aria-label=Minimize],
  .window.active .title-bar .title-bar-controls button.is-minimize,
  .window.active .title-bar .title-bar-controls button[aria-label=Minimize] {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAYAAABxeg0vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgBlY+xDQAgDMNaiQ9B8AHcxAlI/NYtKwj6QOohUzxYc+1HAqQ3e03qXNpwwcyE5QsAaEGjDRf8ZAza6Bz6VQAAAABJRU5ErkJggg==") no-repeat center 10px, var(--w7-wct-bg)
  }

  .title-bar.active .title-bar-controls button.is-minimize:before,
  .title-bar.active .title-bar-controls button[aria-label=Minimize]:before,
  .window.active .title-bar .title-bar-controls button.is-minimize:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Minimize]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAYAAABxeg0vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgBlY+xDQAgDMNaiQ9B8AHcxAlI/NYtKwj6QOohUzxYc+1HAqQ3e03qXNpwwcyE5QsAaEGjDRf8ZAza6Bz6VQAAAABJRU5ErkJggg==") no-repeat center 10px, var(--w7-wct-bg-h);
    border-bottom-left-radius: var(--w7-wct-bdr);
    box-shadow: 0 0 7px 3px #5dc4f0, var(--w7-wct-sd);
    content: "";
    opacity: 0;
    transition: opacity .3s linear
  }

  .title-bar.active .title-bar-controls button.is-minimize:focus-visible:before,
  .title-bar.active .title-bar-controls button.is-minimize:hover:before,
  .title-bar.active .title-bar-controls button[aria-label=Minimize]:focus-visible:before,
  .title-bar.active .title-bar-controls button[aria-label=Minimize]:hover:before,
  .window.active .title-bar .title-bar-controls button.is-minimize:focus-visible:before,
  .window.active .title-bar .title-bar-controls button.is-minimize:hover:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Minimize]:focus-visible:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Minimize]:hover:before {
    opacity: 1;
    transition: opacity .1s linear
  }

  .title-bar.active .title-bar-controls button.is-minimize:active:before,
  .title-bar.active .title-bar-controls button[aria-label=Minimize]:active:before,
  .window.active .title-bar .title-bar-controls button.is-minimize:active:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Minimize]:active:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAYAAABxeg0vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgBlY+xDQAgDMNaiQ9B8AHcxAlI/NYtKwj6QOohUzxYc+1HAqQ3e03qXNpwwcyE5QsAaEGjDRf8ZAza6Bz6VQAAAABJRU5ErkJggg==") no-repeat center 10px, var(--w7-wct-bg-a)
  }

  .title-bar.active .title-bar-controls button.is-maximize,
  .title-bar.active .title-bar-controls button[aria-label=Maximize],
  .window.active .title-bar .title-bar-controls button.is-maximize,
  .window.active .title-bar .title-bar-controls button[aria-label=Maximize] {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgBlZHBCYAwDEVT6YaKbqArOILgBLqBosP1VkhAaQ6S1lKad+ihPy8kxLT9+IACG57r2KqKu2GCBpTYtEMOOQELzrnv4z53I4vDjjJnwXsPJWTOAiJGHVNB5pGwLjPk+AlEBLUY7eFebCosBHOR7vYAAAAASUVORK5CYII=") no-repeat 50%, var(--w7-wct-bg)
  }

  .title-bar.active .title-bar-controls button.is-maximize:before,
  .title-bar.active .title-bar-controls button[aria-label=Maximize]:before,
  .window.active .title-bar .title-bar-controls button.is-maximize:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Maximize]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgBlZHBCYAwDEVT6YaKbqArOILgBLqBosP1VkhAaQ6S1lKad+ihPy8kxLT9+IACG57r2KqKu2GCBpTYtEMOOQELzrnv4z53I4vDjjJnwXsPJWTOAiJGHVNB5pGwLjPk+AlEBLUY7eFebCosBHOR7vYAAAAASUVORK5CYII=") no-repeat 50%, var(--w7-wct-bg-h);
    box-shadow: 0 0 7px 3px #5dc4f0, var(--w7-wct-sd);
    content: "";
    opacity: 0;
    transition: opacity .3s linear
  }

  .title-bar.active .title-bar-controls button.is-maximize:focus-visible:before,
  .title-bar.active .title-bar-controls button.is-maximize:hover:before,
  .title-bar.active .title-bar-controls button[aria-label=Maximize]:focus-visible:before,
  .title-bar.active .title-bar-controls button[aria-label=Maximize]:hover:before,
  .window.active .title-bar .title-bar-controls button.is-maximize:focus-visible:before,
  .window.active .title-bar .title-bar-controls button.is-maximize:hover:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Maximize]:focus-visible:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Maximize]:hover:before {
    opacity: 1;
    transition: opacity .1s linear
  }

  .title-bar.active .title-bar-controls button.is-maximize:active:before,
  .title-bar.active .title-bar-controls button[aria-label=Maximize]:active:before,
  .window.active .title-bar .title-bar-controls button.is-maximize:active:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Maximize]:active:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgBlZHBCYAwDEVT6YaKbqArOILgBLqBosP1VkhAaQ6S1lKad+ihPy8kxLT9+IACG57r2KqKu2GCBpTYtEMOOQELzrnv4z53I4vDjjJnwXsPJWTOAiJGHVNB5pGwLjPk+AlEBLUY7eFebCosBHOR7vYAAAAASUVORK5CYII=") no-repeat 50%, var(--w7-wct-bg-a)
  }

  .title-bar.active .title-bar-controls button.is-help,
  .title-bar.active .title-bar-controls button[aria-label=Help],
  .window.active .title-bar .title-bar-controls button.is-help,
  .window.active .title-bar .title-bar-controls button[aria-label=Help] {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMBAMAAACtsOGuAAAAG1BMVEUAAABTVmb////39/fa2trm5ubj4+Pq6urg4OByvnYHAAAAAXRSTlMAQObYZgAAADtJREFUCNdjYBQUFGAQVFISZBBSUlJkEDYUNmQQFBAvZGBgDA1kYBBLE2RgkGgUYGAQBDIYRBwhBJgLAKBIBQ2X+PZ0AAAAAElFTkSuQmCC") no-repeat 50%, var(--w7-wct-bg)
  }

  .title-bar.active .title-bar-controls button.is-help:before,
  .title-bar.active .title-bar-controls button[aria-label=Help]:before,
  .window.active .title-bar .title-bar-controls button.is-help:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Help]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMBAMAAACtsOGuAAAAG1BMVEUAAABTVmb////39/fa2trm5ubj4+Pq6urg4OByvnYHAAAAAXRSTlMAQObYZgAAADtJREFUCNdjYBQUFGAQVFISZBBSUlJkEDYUNmQQFBAvZGBgDA1kYBBLE2RgkGgUYGAQBDIYRBwhBJgLAKBIBQ2X+PZ0AAAAAElFTkSuQmCC") no-repeat 50%, var(--w7-wct-bg-h);
    box-shadow: 0 0 7px 3px #5dc4f0, var(--w7-wct-sd);
    content: "";
    opacity: 0;
    transition: opacity .3s linear
  }

  .title-bar.active .title-bar-controls button.is-help:focus-visible:before,
  .title-bar.active .title-bar-controls button.is-help:hover:before,
  .title-bar.active .title-bar-controls button[aria-label=Help]:focus-visible:before,
  .title-bar.active .title-bar-controls button[aria-label=Help]:hover:before,
  .window.active .title-bar .title-bar-controls button.is-help:focus-visible:before,
  .window.active .title-bar .title-bar-controls button.is-help:hover:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Help]:focus-visible:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Help]:hover:before {
    opacity: 1;
    transition: opacity .1s linear
  }

  .title-bar.active .title-bar-controls button.is-help:active:before,
  .title-bar.active .title-bar-controls button[aria-label=Help]:active:before,
  .window.active .title-bar .title-bar-controls button.is-help:active:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Help]:active:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMBAMAAACtsOGuAAAAG1BMVEUAAABTVmb////39/fa2trm5ubj4+Pq6urg4OByvnYHAAAAAXRSTlMAQObYZgAAADtJREFUCNdjYBQUFGAQVFISZBBSUlJkEDYUNmQQFBAvZGBgDA1kYBBLE2RgkGgUYGAQBDIYRBwhBJgLAKBIBQ2X+PZ0AAAAAElFTkSuQmCC") no-repeat 50%, var(--w7-wct-bg-a)
  }

  .title-bar.active .title-bar-controls button.is-restore,
  .title-bar.active .title-bar-controls button[aria-label=Restore],
  .window.active .title-bar .title-bar-controls button.is-restore,
  .window.active .title-bar .title-bar-controls button[aria-label=Restore] {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACVSURBVHgBlVDLCoMwENwU/7ClvRYK7b2lCIJHEQQ/QEHwqujfBXJIQMnihg34iHPJ7GNm2AhYcL2/JwhAxIuhq3aXb48PiFBna2YFERVHzoQLnAQmSCmxeL5+3rBtSsdpBwVKKTcY+1rY197G+8RRoLVejed94igwxrgB/zXeJ+4Jijz2Erjg+8/WE7ZAt6EgSUsIxQwaJEWv7G6SSgAAAABJRU5ErkJggg==") no-repeat 50%, var(--w7-wct-bg)
  }

  .title-bar.active .title-bar-controls button.is-restore:before,
  .title-bar.active .title-bar-controls button[aria-label=Restore]:before,
  .window.active .title-bar .title-bar-controls button.is-restore:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Restore]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACVSURBVHgBlVDLCoMwENwU/7ClvRYK7b2lCIJHEQQ/QEHwqujfBXJIQMnihg34iHPJ7GNm2AhYcL2/JwhAxIuhq3aXb48PiFBna2YFERVHzoQLnAQmSCmxeL5+3rBtSsdpBwVKKTcY+1rY197G+8RRoLVejed94igwxrgB/zXeJ+4Jijz2Erjg+8/WE7ZAt6EgSUsIxQwaJEWv7G6SSgAAAABJRU5ErkJggg==") no-repeat 50%, var(--w7-wct-bg-h);
    box-shadow: 0 0 7px 3px #5dc4f0, var(--w7-wct-sd);
    content: "";
    opacity: 0;
    transition: opacity .3s linear
  }

  .title-bar.active .title-bar-controls button.is-restore:focus-visible:before,
  .title-bar.active .title-bar-controls button.is-restore:hover:before,
  .title-bar.active .title-bar-controls button[aria-label=Restore]:focus-visible:before,
  .title-bar.active .title-bar-controls button[aria-label=Restore]:hover:before,
  .window.active .title-bar .title-bar-controls button.is-restore:focus-visible:before,
  .window.active .title-bar .title-bar-controls button.is-restore:hover:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Restore]:focus-visible:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Restore]:hover:before {
    opacity: 1;
    transition: opacity .1s linear
  }

  .title-bar.active .title-bar-controls button.is-restore:active:before,
  .title-bar.active .title-bar-controls button[aria-label=Restore]:active:before,
  .window.active .title-bar .title-bar-controls button.is-restore:active:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Restore]:active:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACVSURBVHgBlVDLCoMwENwU/7ClvRYK7b2lCIJHEQQ/QEHwqujfBXJIQMnihg34iHPJ7GNm2AhYcL2/JwhAxIuhq3aXb48PiFBna2YFERVHzoQLnAQmSCmxeL5+3rBtSsdpBwVKKTcY+1rY197G+8RRoLVejed94igwxrgB/zXeJ+4Jijz2Erjg+8/WE7ZAt6EgSUsIxQwaJEWv7G6SSgAAAABJRU5ErkJggg==") no-repeat 50%, var(--w7-wct-bg-a)
  }

  .title-bar.active .title-bar-controls button.is-close,
  .title-bar.active .title-bar-controls button[aria-label=Close],
  .window.active .title-bar .title-bar-controls button.is-close,
  .window.active .title-bar .title-bar-controls button[aria-label=Close] {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgBlZFNCoQwDIVbmRvOMHOAAd0K/uDGlYKiCG4VPICi9yu0oCSQoFUXFtKEl6+voZXvr7sKay1TL690FOexY+Hz87i2decOuDKQsNGVe8AGYTRJIh0Y+orBvxszCPllOymlxN06jNE26Qnwg4zdHQLrMhFaawwAqAadDPE1ijwUxhiMKCmxCZk06OMYTz5lAx3xWDeXkLNAAAAAAElFTkSuQmCC") no-repeat 50%, var(--w7-wct-bg), var(--w7-wct_close-bg);
    box-shadow: var(--w7-wct-sd)
  }

  .title-bar.active .title-bar-controls button.is-close:before,
  .title-bar.active .title-bar-controls button[aria-label=Close]:before,
  .window.active .title-bar .title-bar-controls button.is-close:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Close]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgBlZFNCoQwDIVbmRvOMHOAAd0K/uDGlYKiCG4VPICi9yu0oCSQoFUXFtKEl6+voZXvr7sKay1TL690FOexY+Hz87i2decOuDKQsNGVe8AGYTRJIh0Y+orBvxszCPllOymlxN06jNE26Qnwg4zdHQLrMhFaawwAqAadDPE1ijwUxhiMKCmxCZk06OMYTz5lAx3xWDeXkLNAAAAAAElFTkSuQmCC") no-repeat 50%, var(--w7-wct-bg), radial-gradient(circle at 50% 170%, #f4e676 10% 20%, #0000 60%), radial-gradient(circle at -60% 50%, #000a 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #000a 5% 10%, #0000 50%), linear-gradient(#fb9d8b, #ee6d56 25% 50%, #d42809 50%);
    border-bottom-right-radius: var(--w7-wct-bdr);
    box-shadow: 0 0 7px 3px #e68e75, var(--w7-wct-sd);
    content: "";
    opacity: 0;
    transition: opacity .3s linear
  }

  .title-bar.active .title-bar-controls button.is-close:focus-visible:before,
  .title-bar.active .title-bar-controls button.is-close:hover:before,
  .title-bar.active .title-bar-controls button[aria-label=Close]:focus-visible:before,
  .title-bar.active .title-bar-controls button[aria-label=Close]:hover:before,
  .window.active .title-bar .title-bar-controls button.is-close:focus-visible:before,
  .window.active .title-bar .title-bar-controls button.is-close:hover:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Close]:focus-visible:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Close]:hover:before {
    opacity: 1;
    transition: opacity .1s linear
  }

  .title-bar.active .title-bar-controls button.is-close:active:before,
  .title-bar.active .title-bar-controls button[aria-label=Close]:active:before,
  .window.active .title-bar .title-bar-controls button.is-close:active:before,
  .window.active .title-bar .title-bar-controls button[aria-label=Close]:active:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgBlZFNCoQwDIVbmRvOMHOAAd0K/uDGlYKiCG4VPICi9yu0oCSQoFUXFtKEl6+voZXvr7sKay1TL690FOexY+Hz87i2decOuDKQsNGVe8AGYTRJIh0Y+orBvxszCPllOymlxN06jNE26Qnwg4zdHQLrMhFaawwAqAadDPE1ijwUxhiMKCmxCZk06OMYTz5lAx3xWDeXkLNAAAAAAElFTkSuQmCC") no-repeat 50%, var(--w7-wct-bg), radial-gradient(circle at 50% 170%, #dcc03f 10% 20%, #0000 60%), radial-gradient(circle at -60% 50%, #000 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #000 5% 10%, #0000 50%), linear-gradient(#d1a894, #b67562 25% 50%, #7d0d01 50%)
  }

  .title-bar.active .title-bar-controls button:disabled.is-minimize,
  .title-bar.active .title-bar-controls button:disabled[aria-label=Minimize],
  .window.active .title-bar .title-bar-controls button:disabled.is-minimize,
  .window.active .title-bar .title-bar-controls button:disabled[aria-label=Minimize] {
    background: var(--w7-wct-bg)
  }

  .title-bar.active .title-bar-controls button:disabled.is-minimize:before,
  .title-bar.active .title-bar-controls button:disabled[aria-label=Minimize]:before,
  .window.active .title-bar .title-bar-controls button:disabled.is-minimize:before,
  .window.active .title-bar .title-bar-controls button:disabled[aria-label=Minimize]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAYAAABxeg0vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgBlY+xDQAgDMNaiQ9B8AHcxAlI/NYtKwj6QOohUzxYc+1HAqQ3e03qXNpwwcyE5QsAaEGjDRf8ZAza6Bz6VQAAAABJRU5ErkJggg==") no-repeat center 10px;
    box-shadow: none;
    content: "";
    opacity: .4
  }

  .title-bar.active .title-bar-controls button:disabled.is-maximize,
  .title-bar.active .title-bar-controls button:disabled[aria-label=Maximize],
  .window.active .title-bar .title-bar-controls button:disabled.is-maximize,
  .window.active .title-bar .title-bar-controls button:disabled[aria-label=Maximize] {
    background: var(--w7-wct-bg)
  }

  .title-bar.active .title-bar-controls button:disabled.is-maximize:before,
  .title-bar.active .title-bar-controls button:disabled[aria-label=Maximize]:before,
  .window.active .title-bar .title-bar-controls button:disabled.is-maximize:before,
  .window.active .title-bar .title-bar-controls button:disabled[aria-label=Maximize]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgBlZHBCYAwDEVT6YaKbqArOILgBLqBosP1VkhAaQ6S1lKad+ihPy8kxLT9+IACG57r2KqKu2GCBpTYtEMOOQELzrnv4z53I4vDjjJnwXsPJWTOAiJGHVNB5pGwLjPk+AlEBLUY7eFebCosBHOR7vYAAAAASUVORK5CYII=") no-repeat 50%;
    box-shadow: none;
    content: "";
    opacity: .4
  }

  .title-bar.active .title-bar-controls button:disabled.is-close,
  .title-bar.active .title-bar-controls button:disabled[aria-label=Close],
  .window.active .title-bar .title-bar-controls button:disabled.is-close,
  .window.active .title-bar .title-bar-controls button:disabled[aria-label=Close] {
    background: var(--w7-wct-bg), var(--w7-wct_close-bg);
    filter: contrast(.7) brightness(1.1)
  }

  .title-bar.active .title-bar-controls button:disabled.is-close:before,
  .title-bar.active .title-bar-controls button:disabled[aria-label=Close]:before,
  .window.active .title-bar .title-bar-controls button:disabled.is-close:before,
  .window.active .title-bar .title-bar-controls button:disabled[aria-label=Close]:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgBlZFNCoQwDIVbmRvOMHOAAd0K/uDGlYKiCG4VPICi9yu0oCSQoFUXFtKEl6+voZXvr7sKay1TL690FOexY+Hz87i2decOuDKQsNGVe8AGYTRJIh0Y+orBvxszCPllOymlxN06jNE26Qnwg4zdHQLrMhFaawwAqAadDPE1ijwUxhiMKCmxCZk06OMYTz5lAx3xWDeXkLNAAAAAAElFTkSuQmCC") no-repeat 50%;
    box-shadow: none;
    content: "";
    opacity: .4
  }

}

[data-theme="aero"] {
  .window-body {
    background-color: rgb(226, 222, 222);
  }
}

[data-theme="hypnos"] .window-body.has-space,
[data-theme="bliss"] .window-body.has-space {
  padding: var(--w7-w-space);
}

[data-theme=baba] {
  --bg-color: #000000;
  --bg-img: url("../images/bg_baba.png");
  --bg-size: 100% auto;
  --bg-attach: fixed;
  --bg-repeat: no-repeat;
  --bg-position: bottom;
  --main-bg: #000000;
  --body-color: rgb(0, 0, 0);
  --text-color: rgb(255, 255, 255);
  --accent-color: #D9396A;
  --default-font: "Baba", sans-serif;
  --header-font: "Baba", sans-serif;
  --header-color: rgb(0, 0, 0);
  --link-color: rgb(115, 227, 247);
  --visited-link: rgb(136, 91, 194);
  --hover-link: rgb(233, 219, 139);
  --active-link: rgb(148, 239, 255);
  --cursor: url("../images/cursor-baba.png"), auto;
  --cursor-hover: url("../images/cursor-baba-hover.png"), pointer;

  --font-size: .8em;
  --header-size: 2em;

  --bg-overlay: url(../images/noise_overlay.jpg);

  --alt-1: rgba(224, 224, 224, 0.2);
  --alt-2: rgba(255, 255, 255, 0.2);

  p a:link,
  p a:visited {
    background-color: var(--accent-color);
    padding: .5rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
    color: black !important;
    mix-blend-mode: screen;
    border-radius: .5rem;
    text-decoration: none;
    display: inline-block;
  }

  p a:hover {
    color: var(--hover-link) !important;
  }


}

/* //////////////////DIV STYLING /////////////////////////*/




html {
  background-color: var(--bg-color);
  background-image: var(--bg-img);
  color: var(--text-color);
  background-size: var(--bg-size);
  background-repeat: var(--bg-repeat);
  background-attachment: var(--bg-attach);
  background-position: var(--bg-position);
  image-rendering: pixelated;
}

* {
  cursor: var(--cursor);
}

body {
  font-family: var(--default-font);
  font-size: var(--font-size);
}
.container {
  position: relative;
}

.cover {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  min-height: 100vh;
}

html,
body {
  padding: 0;
  margin: 0;
}

p {
  font-weight: normal;
}

/* unvisited link */
a:link {
  color: var(--link-color);
}

/* visited link */
a:visited {
  color: var(--visited-link);
}

/* mouse over link */
a:hover {
  color: var(--hover-link);
  cursor: var(--cursor-hover);
  text-decoration: none;
}

/* selected link */
a:active {
  color: var(--selected-link);
}

a img:hover,
button:hover,
select:hover,
label:hover,
input:hover {
  cursor: var(--cursor-hover);
}

h1 {
  font-family: var(--header-font);
  font-size: var(--header-size);
  margin: 0.5rem;
}

h1 :not(a) {
  color: var(--header-color);
}

img {
  max-width: 100%;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 4rem 0;
  position: relative;
  z-index: 999;
  text-align: center;
  gap: 1rem;
  font: var(--default-font);
}

/* .background-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right:0;
  top: 0;
  z-index: 50;
  background-color: var(--bg-color);
  background-size: var(--bg-size);
  background-repeat: var(--bg-repeat);
  background-image: var(--bg-img);
  background-attachment: var(--bg-attach);
}

.background-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: var(--bg-overlay);
  background-size: 10%;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: color-burn;
  opacity: .75;
} */

#cont {
  position: relative;
}


#site-warning {
  display: flex;
  align-items: center;
  padding: .5rem;
  gap: 1rem;
  text-align: left;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: .6rem;
  background: var(--bg-color);
  width: 15rem;
  color: var(--text-color);
  margin: auto;
  border-radius: 2px;
}

.mature {
  font-weight: bold;
  text-transform: uppercase;
}