@font-face {
  font-family: "MSFont";
  font-style: italic;
  font-weight: 700;
  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: "Quinque";
  font-style: regular;
  font-weight: 700;
  src: url("../fonts/Quinquefive-ALoRM.eot");
  src: url("../fonts/Quinquefive-ALoRM.eot?#iefix") format("embedded-opentype"), url("../fonts/Quinquefive-ALoRM.woff2") format("woff2"), url("../fonts/Quinquefive-ALoRM.woff") format("woff"), url("../fonts/Quinquefive-ALoRM.otf") format("opentype"), url("../fonts/Quinquefive-ALoRM.ttf") format("truetype");
}

@font-face {
  font-family: "KarmaticArcade";
  font-style: regular;
  font-weight: 700;
  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: 700;
  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: 700;
  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: 700;
  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;
  vertical-align: top;
  /* 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;
}

@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);
  }
}

.cover {
  position: absolute;
  top: 0;
}

[data-theme=bliss] *,
[data-theme=hypnos] * {
  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],
  [data-theme=console] {
  } */

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


[data-theme=default] {
  --bg: black;
  --body-color: black;
  --text-color: white;
  --accent-color: rgb(214, 214, 214);
  --font: "VT323", serif;
  --header-font: Ransom, serif;
  --link: rgb(241, 241, 241);
  --visited-link: rgb(196, 196, 196);
  --hover-link: rgb(255, 255, 255);
  --active-link: rgb(207, 168, 192);
  --menu-button-bg: url("../images/paper_bg_pink_3.png");
  --bg-size: 432px;
  --cursor: var(--default-cursor);
  --cursor-hover: var(--default-hover-cursor);
}

/*[data-theme=light] {
  color-scheme: light;
  --bg: url("../images/sky.jpg") rgb(255, 255, 255);
  --body-color: rgb(255, 255, 255);
  --text-color: rgb(0, 0, 0);
  --accent-color: rgb(221, 74, 197);
  --font: sans-serif;
  --note-font: "MyNerve";
  --header-font: serif;
  --header-color: rgb(0, 0, 0);
  --link: 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);
}*/
/* 
[data-theme=light] * {} */

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

/*[data-theme=console] {
  --bg: rgb(23, 97, 13);
  --body-color: black;
  --text-color: rgb(243, 255, 178);
  --accent-color: rgb(78, 141, 49);
  --font: "Courier New";
  --header-font: "Courier New";
  --cursor: var(--default-cursor);
  --cursor-hover: var(--default-hover-cursor);
}*/

[data-theme=console] body {
  text-shadow: 2px 2px 23px rgba(255, 255, 255, 0.822);
  animation: flicker 0.2s linear infinite;
}

[data-theme=vhs] {
  --bg: black;
  --body-color: black;
  --text-color: white;
  --accent-color: rgb(214, 214, 214);
  --font: "VT323", serif;
  --header-font: Ransom, serif;
  --link: rgb(241, 241, 241);
  --visited-link: rgb(196, 196, 196);
  --hover-link: rgb(255, 255, 255);
  --active-link: rgb(207, 168, 192);
  --menu-button-bg: url("../images/paper_bg_pink_3.png");
  --bg-size: 432px;
  --cursor: var(--default-cursor);
  --cursor-hover: var(--default-hover-cursor);
}

[data-theme=vhs] body {
  text-shadow: 2px 2px 23px rgba(255, 255, 255, 0.822);
  animation: flicker 0.2s linear infinite;
}

[data-theme=vhs] .cover:after {
  content: "";
  display: flex;
  position: absolute;
  top: 0;
  bottom: -10px;
  background: var(--gif-texture), var(--noise-texture);
  width: 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] {
  } */

  [data-theme=vhs] #cont:after {
    display: none;
  }
}

/*[data-theme="hypnos"] {
  --surface: #99C8F4;
  --font: "Hypnos", Arial;
  --text-color: #633E84;

  --bg: url("../images/checker_hyp.png");
  --bg-size: 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"), auto;
  --cursor-hover: url("../images/mouse_alert_hypno.png"), auto;
}

[data-theme="bliss"] {

  --bg: url(../images/bliss.jpg) no-repeat fixed 50% / cover;
  --bg-size: cover;
  --cursor-hover: pointer;
}

[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);

  /* Bliss Styling */
  --font: MSFont, sans-serif;
  --bg: url("../images/bliss.jpg") no-repeat;
  --bg-size: 100% 100%;
  --header-color: white;
  --cursor: default;
  --cursor-hover: pointer;
}

[data-theme=bliss] button,

[data-theme=bliss] input[type="submit"],

[data-theme=bliss] 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;

}

[data-theme="bliss"] button,
[data-theme="bliss"] label,
[data-theme="bliss"] input,
[data-theme="bliss"] textarea,
[data-theme="bliss"] select,
[data-theme="bliss"] option,
[data-theme="bliss"] table,
[data-theme="bliss"] ul.tree-view,
[data-theme="bliss"] .window,
[data-theme="bliss"] .title-bar {
  font-family: var(--font);
  color: var(--text-color);
  -webkit-font-smoothing: none;
}

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

[data-theme=bliss] select,
[data-theme=bliss] 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;
}

[data-theme=bliss] 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;
}


[data-theme=bliss] .title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 23px;
  min-height: 20px;
}

[data-theme]:not([data-theme=bliss], [data-theme=hypnos]) .title-bar-controls button {
  display: none;
}

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

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

.title-bar-controls button[aria-label="Minimize"] {

  background-image: url("../images/icon/minimize.svg");

  background-repeat: no-repeat;

  background-position: center;

  background-size: 30%;

}


.title-bar-controls button[aria-label="Maximize"] {

  background-image: url("../images/icon/maximize.svg");

  background-repeat: no-repeat;

  background-size: 30%;

}


.title-bar-controls button[aria-label="Restore"] {

  background-image: url("../images/icon/restore.svg");

  background-repeat: no-repeat;


}


.title-bar-controls button[aria-label="Help"] {

  background-image: url("../images/icon/help.svg");

  background-repeat: no-repeat;


}


.title-bar-controls button[aria-label="Close"] {

  margin-left: 2px;

  background-image: url("../images/icon/close.svg");

  background-repeat: no-repeat;

  background-position: center;

}

[data-theme=bliss] button:not(:disabled):active,

[data-theme=bliss] input[type="submit"]:not(:disabled):active,

[data-theme=bliss] input[type="reset"]:not(:disabled):active {

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

  text-shadow: 1px 1px var(--text-color);

}


@media (not(hover)) {

  [data-theme=bliss] button:not(:disabled):hover,

  [data-theme=bliss] input[type="submit"]:not(:disabled):hover,

  [data-theme=bliss] input[type="reset"]:not(:disabled):hover {

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

  }

}


[data-theme=bliss] button:focus,

[data-theme=bliss] input[type="submit"]:focus,

[data-theme=bliss] input[type="reset"]:focus {

  outline: 1px dotted #000000;

  outline-offset: -4px;

}

[data-theme=bliss] button::-moz-focus-inner,

[data-theme=bliss] input[type="submit"]::-moz-focus-inner,

[data-theme=bliss] input[type="reset"]::-moz-focus-inner {

  border: 0;

}


[data-theme=bliss] :disabled,

[data-theme=bliss] :disabled+label,

[data-theme=bliss] input[readonly],

[data-theme=bliss] input[readonly]+label {

  color: var(--button-shadow);

}


[data-theme=bliss] button:disabled,

[data-theme=bliss] input[type="submit"]:disabled,

[data-theme=bliss] input[type="reset"]:disabled,

[data-theme=bliss] :disabled+label {

  text-shadow: 1px 1px 0 var(--button-highlight);

}

[data-theme="hypnos"] .window,
[data-theme="bliss"] .window {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background-image: none !important;
  padding: 3px !important;
}

[data-theme="bliss"] .window {
  background-color: var(--surface);
  box-shadow: var(--border-window-outer), var(--border-window-inner);
}

/* [data-theme="hypnos"] .window {} */

/* DIV STYLING */




html {
  background: var(--bg);
  color: var(--text-color);
  background-size: var(--bg-size);
}

body {
  font-family: var(--font);
}

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

html,
body {
  padding: 0;
  margin: 0;
  /* reset the default stylesheet */
  cursor: var(--cursor);
}

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

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

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

/* 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: 3.5rem;
  margin: 0.5rem;
  color: var(--header-color);
}

img {
  max-width: 100%;
}

.footer {
  display: flex;
  justify-content: center;
  margin: auto;
  gap: 1rem;
}