/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: 'cu';
  src: url("data/fonts/cu.ttf");
}

@font-face {
  font-family: 'fairfax';
  src: url("data/fonts/FairfaxItalic.ttf");
}

@font-face {
  font-family: 'ti83';
  src: url('data/fonts/ti83.ttf');
}

@keyframes scanlines {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 0% 100%;
  }
}

@keyframes cursorblink {
  0% {
    opacity: 0.9;
  }

  49.9% {
    opacity: 1;
  }

  50.1% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

:root {
  --bg: #000000;
  --fg: #000000;
  --lines: #000000;
  --fontsize: 12px;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  /*background-image: url("data/images/stars2.gif");*/
  color: var(--fg);
  font-family: 'cu';
  font-size: var(--fontsize);
  overflow: hidden;
  box-shadow: 0 0 200px rgba(0, 0, 0, 0.9) inset;
  text-shadow: 0 0 4px var(--fg);
  cursor: url("data/cursors/cursor.png"), auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(var(--lines) 2px, transparent 1px);
  background-size: 1px 6px;

  animation: scanlines linear 20s infinite;
  pointer-events: none;
  z-index: 5;
}

#console {
  --fontsize_console: 16px;
  font-size: var(--fontsize_console);
  text-shadow: 0 0 4px var(--fg);
  border: var(--fg) 1px solid;
  box-sizing: border-box;
  height: fit-content;
  width: 100%;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
}

.console_simple_box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#console_history_container {
  height: 50vh;
  width: 15vw;
  min-width: 100px;
  background-color: transparent;
  border: none;
  border-right: var(--fg) 1px solid;
  display: flex;
  flex-direction: column;
}

#console_history_title {
  height: 24px;
  min-height: 24px;
  width: 100%;
  border-bottom: var(--fg) 1px solid;
  overflow: hidden;
}

#console_history {
  height: 100%;
  position: relative;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-color: var(--fg) var(--bg);
  padding: 2px;
  margin: 0;
  font-size: var(--fontsize_console);
  font-family: inherit;
}

#console_output_container {
  height: 50vh;
  width: 90vw;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
}

#console_output_title {
  height: 24px;
  min-height: 24px;
  border-bottom: var(--fg) 1px solid;
  overflow: hidden;
}

#console_output {
  height: 100%;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-color: var(--fg) var(--bg);
  padding: 2px;
  width: 100%;
  margin: 0;
  font-size: var(--fontsize_console);
  font-family: inherit;
}

#console_input_container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  height: var(--fontsize_console);
  padding: 2px;
  border-top: var(--fg) 1px solid;
  overflow: hidden;

}

#console_input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  field-sizing: content;
  min-width: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  caret-color: transparent;
  font-family: inherit;
  font-size: inherit;
  text-shadow: inherit;
}

#console_input_fake {
  field-sizing: content;
  min-width: none;
  background: transparent;
  border: none;
  outline: none;
  color: transparent;
  font-family: inherit;
  font-size: inherit;
  text-shadow: none;
  height: inherit;
  width: fit-content;
  white-space: pre;
}

#console_input::selection {
  background-color: color-mix(in srgb, var(--fg) 50%, transparent 50%);
}

#console_cursor {
  animation: cursorblink 1s infinite;
  background-color: var(--fg);
  width: 8px;
  height: var(--fontsize_console);
  transform: translate(1px, 0px);
}

.generic_window {
  top: 50%;
  left: 50%;
  width: 50vw;
  height: 50vh;
  padding: 8px;
  position: absolute;
  transform: translate(-50%, -50%);
  --titlebar_thickness: 24px;
}

.generic_window_titlebar {
  background: transparent;
  border: var(--fg) 1px solid;
  cursor: url("data/cursors/grabcursor.png"), move;
  font-weight: 500;
  user-select: none;
  width: 100%;
  height: var(--titlebar_thickness);
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  transform: translate(0px, calc(var(--titlebar_thickness) * -1));
}

.generic_window_titlebar:active {
  cursor: url("data/cursors/grabcursorpressed.png"), move;
}

.generic_window_content {
  width: 100%;
  height: 100%;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
  background-color: transparent;
  border: var(--fg) 1px solid;
  border-top: none;
  scrollbar-color: var(--fg) var(--bg);
  scrollbar-arrow-color: var(--fg);
  scrollbar-face-color: var(--fg);
  scrollbar-3dlight-color: var(--fg);
  transform: translate(0px, calc(var(--titlebar_thickness) * -1));
}


.generic_container {
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  border: var(--fg) 1px solid;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-color: var(--fg) var(--bg);
  padding: 2px;
}

.generic_button {
  box-sizing: border-box;
  background-color: transparent;
  color: var(--fg);
  border: var(--fg) 1px dashed;
  padding: 1px;
  margin: 0px;
  font-family: 'cu';
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.generic_button:hover {
  cursor: url("data/cursors/pointer.png") 4 2, pointer;

  border: var(--fg) 1px solid;
}

.generic_button:active {
  cursor: url("data/cursors/pointerpressed.png") 4 2, pointer;
}