/*server portal*/

@font-face {
  font-family: 'Consolas';
  src: url('/system/lib/consolas.ttf') format('truetype');
}

:root { /*penis*/
  --style-minimum-width: 21ch;
  --style-maximum-width: 50ch;
  --theme-font-primary: 'Consolas';
  --theme-font-secondary: 'Courier';
  --theme-font-tertiary: 'Monospace';
  --theme-color-primary: #7F9;
  --theme-color-secondary: #000;
  --theme-color-tertiary: #000;
  --theme-color-bright: #7F9;
  --theme-color-dark: #000;
  --theme-lines: 2px;
  --font-color: #000;
  --title-align: center;
  --title-weight: bold;
  --header-align: left;
  --header-weight: bold;
  --body-background-color: #000;
  --body-background-url: none;
  --box-padding: 2rem;
  --box-background-color: #000;
  --box-background-url: none;
  --box-radius: 3vw;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

a, a:active, a:hover { border: none }

p, p * {
  padding: 0;
  color: var(--theme-color-dark);
}

form {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--theme-color-primary);
}
input {
  width: 100%;
  padding: 0;
  padding-left: 2px;
  border: 0;
  background: transparent;
}

#loader {
  display: none;
  margin-right: 4px;
  color: #000;
  animation: spin 2s linear infinite;
  line-height: 1.5;
}

#plex .fa-solid {
  margin-right: 1.5px;
  vertical-align: text-top;
}

#output {
  display: flex;
  flex-direction: column-reverse;
  min-height: 0;
  max-height: 15em;
  border-top: 2px solid var(--theme-color-primary);
  border-bottom: 2px solid var(--theme-color-primary);
  overflow: hidden;
  overflow-y: auto;
  background: var(--body-background-color);
}

#output * {
  padding-left: 1px;
  color: var(--theme-color-primary);
  line-break: anywhere;
}

#floatbox {
  display: flex;
  gap: 2ch;
  flex-direction: column;
  max-width: var(--style-maximum-width);
  min-width: var(--style-minimum-width);
}

.flex {
  gap: 0;
  justify-content: unset;
}

#output p {
  padding-left: 2px;
  padding-right: 2px;
  overflow-wrap: anywhere;
}

.prompt, .output { padding: 0 0 0 2px }

#input, #output, .prompt { font-size: 1rem }

.prompt.input {
  color: #000;
  background: var(--theme-color-primary);
  white-space: nowrap;
}

.server, .servers, .status, .speedtest, .plexservers {
  display: flex;
  gap: 1ch;
  flex-wrap: wrap;
}

.speedtest { flex-direction: column }
.speedBlock {
  display: flex;
  gap: 1ch;
  flex-direction: column;
}
.speedtest .row {
  display: flex;
  gap: 1ch;
  flex-direction: row;
}

.server p, .servers p, .status p, .speedtest p, .plexservers p {
  background-color: #FFF;
  border: .1rem solid #081808;
  flex-grow: 1;
  text-align: center;
  font-family: var(--theme-font-primary);
  box-shadow: -.1rem -.1rem 0 rgb(255, 0, 255), -1rem -1rem 3rem rgba(255,0,255,.2), .1rem .1rem 0px rgb(0, 255, 255), 1rem 1rem 3rem rgba(0,255,255,.2), 0 0 3rem rgba(255,255,255,.2);
  min-width: 11ch;
}
.speedtest p {
  width: 100% !important;
  overflow: hidden;
}
.server p:hover, .servers p:hover, .status p:hover, .speedtest p:hover, .plexservers p:hover {
  background-color: #FF0;
  box-shadow: -.1rem -.1rem 0 rgb(255, 0, 255), -1rem -1rem 3rem rgba(255,0,255,.2), .1rem .1rem 0px rgb(0, 255, 255), 1rem 1rem 3rem rgba(0,255,255,.2), 0 0 3rem rgba(255,255,0,.2);
  cursor: pointer;
}

.offline, .offline:hover {
  background-color: #F44;
  box-shadow: -.1rem -.1rem 0 rgb(255, 55, 55), -1rem -1rem 3rem rgba(255,55,55,.2), .1rem .1rem 0px rgb(255, 55, 55), 1rem 1rem 3rem rgba(255,55,55,.2), 0 0 3rem rgba(255,55,55,.2) !important;
  animation: blink 1.5s infinite;
}
.warning { background: #EE5 !important }

#power, #crt::before, #crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;
}

#power {
  background: rgba(0,0,0,.99);
  z-index: 1;
  animation: fade-in 2.5s linear forwards;
}

#crt::before {
  background: 
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 0, 0, 1) 0px, /* Start with red */
      rgba(255, 0, 0, 1) 2px, /* Red ends at 2px */
      rgba(0, 0, 0, 0) 2px,   /* Gap starts */
      rgba(0, 255, 0, 1) 4px, /* Green starts at 4px */
      rgba(0, 255, 0, 1) 6px, /* Green ends */
      rgba(0, 0, 0, 0) 6px,   /* Gap starts */
      rgba(0, 0, 255, 1) 8px, /* Blue starts */
      rgba(0, 0, 255, 1) 10px, /* Blue ends */
      rgba(0, 0, 0, 0) 10px   /* Gap ends */
    );
  background-size: 100% 2px, 10px 100%; /* Match RGB bands and pitch spacing */
  opacity: 0.01;
}

#crt::after {
  background: rgba(18, 16, 16, 0.1);
  animation: flicker 10s infinite;
  opacity: 0;
}

#scanline {
  position: fixed;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.01);
  pointer-events: none;
  z-index: 4;
  height: 1rem;
  animation: scroll .033s linear infinite;
  pointer-events: none;
  opacity: 0.2;
}

@keyframes blink {
  0%, 50% { background-color: #F44 }
  75%, 100% { background-color: #200 }
}

@keyframes scroll {
  0% { top: 0 }
  75%, 100% { top: 100% }
}

@keyframes flicker {
  0% { opacity: 0.27861 }
  5% { opacity: 0.34769 }
  10% { opacity: 0.23604 }
  15% { opacity: 0.50626 }
  20% { opacity: 0.18128 }
  25% { opacity: 0.53891 }
  30% { opacity: 0.65583 }
  35% { opacity: 0.67807 }
  40% { opacity: 0.26559 }
  45% { opacity: 0.84693 }
  50% { opacity: 0.76019 }
  55% { opacity: 0.08594 }
  60% { opacity: 0.20313 }
  65% { opacity: 0.71988 }
  70% { opacity: 0.53455 }
  75% { opacity: 0.37288 }
  80% { opacity: 0.71428 }
  85% { opacity: 0.70419 }
  90% { opacity: 0.7003 }
  95% { opacity: 0.36108 }
  100% { opacity: 0.24387 }
}

@keyframes spin {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

@keyframes fade-in {
  0% { opacity: 100% }
  100% { opacity: 0% }
}