@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&family=VT323&display=swap');

html{
  font-size: 16px;
}

:root {
  --barGraphWidth: 32px;
  --astralMonitorPadding: 8px;
  --colorBlack: #000000;
  --colorWhite: #FFFFFF;
  --colorLight100: #D9D9D9;
  --backgroundColor: var(--colorBlack);
  --uiColor: var(--colorLight100);
  --textColorHeader: var(--colorBlack);
  --textColorConsole: var(--colorLight100);
  --fontLocator: "Unbounded", sans-serif;
  --fontConsole: "VT323", monospace;
}

h1 {
  font-family: var(--fontLocator);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--textColorHeader);
}

h2 {
}

h3 {
}

h4 {
}

h5 {
}

h6 {
}

p {
  font-family: var(--fontConsole);
  font-size: 1rem;
  color: var(--textColorConsole);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul, li {
  list-style: none;
}

body{
  background-color: var(--backgroundColor);
  font-family: var(--fontConsole);
  color: var(--textColorConsole);
  height: 100vh;
  width: 100vw;
  min-height: 646px;
  min-width: 982px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0px;
  padding: 0px;
  overflow-y: auto;
}

pre {
  font-size: 6px;
  line-height: 1;
  text-shadow: 0 0 4px #00ff41;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.50) 1px,
    transparent 1px,
    transparent 2px
  );}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 900%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

#crtStartup {
  background-color: var(--colorWhite);
  z-index: 1001;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.4;
  transform: scale(1,0.01);
  transition: transform 0.15s ease-in, opacity 0.15s ease-out;
}

#crtStartup.active {
  transform: scale(1,1);
  opacity: 0.6;
}

#crtStartup.inactive {
  opacity: 0;
  pointer-events: none;
}

#crtBlackout {
  background-color: var(--colorBlack);
  z-index: 1000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;  
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

#crtBlackout.clear {
  opacity: 0;
}

#neuralTumbler{
  background-color: var(--backgroundColor);
  z-index: 10;
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px
}

#consoleInterface{
  height: fit-content;
  width: 978px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

#triSensors {
  display: flex;
  height: 242px;
  width: 32px;
}

#astralMonitor{
  z-index: 20;
  position: relative;
  display: flex;
  flex-direction: column;
  height: fit-content;
  width: fit-content;
  gap: 12px;
}

#astralMonitorTop{
  z-index: 30;
  position: relative;
  display: flex;
  width: 100%;
  height: 36px;
  justify-content: flex-end;
}

#locateMajick{
  position: absolute;
  top: 0px;
  left: -4px;
  text-shadow: -2px 4px 4px var(--colorWhite);
}

#sectorHeaderGlow {
    filter: drop-shadow(0px 0px 12px var(--colorWhite)) 
          drop-shadow(0px 0px 18px var(--colorWhite));
}

#sectorHeader{
  clip-path: path('M 96 0 Q 12 0 0 36 L 0 36 L 480 36 L 480 0 Z');
  background: var(--uiColor);
  position: relative;
  display: flex;
  height: 36px;
  width: 480px;
  justify-content: flex-end;
  align-items: center;
  padding-right: 1rem;
  box-shadow: 
    0px 0px 24px var(--colorWhite) inset,
    0px 0px 24px var(--colorWhite) inset;
}

#sectorHeaderBorder{
  position: absolute;
  top: 0px;
  right: 0px;
  stroke: var(--uiColor);
  stroke-width: 2px;
  fill: transparent;
}

#astralMonitorMain{
  display: flex;
  gap: 16px;
}

#astralMonitorLargeArea {
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: fit-content;
}

#astralMonitorMainContent {
  display: flex;
  width: fit-content;
  height: fit-content;
  align-items: flex-end;
  gap: 24px;
}

#astralMonitorLeft {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 405px;
  width: 140px;
  gap: 12px;
  margin-bottom: 8px;
}

#vitalSensorTop {
  position: relative;
  display: flex;
  height: 47px;
  width: 140px;
  min-height: 47px;
  justify-content: flex-start;
  align-items: flex-end;
}

#vitalSensorTopBorder {
  position: absolute;
  top: 0;
  right: 0;
  height: 43px;
  width: 136px;
  clip-path: path( 'M 0 0 L 136 0 L 136 42 L 135 42 L 135 1 L 0 1 Z');
  background: var(--uiColor);
}

#vitalSensorReadout {
  position: relative;
  display: flex;
  padding: 2px 8px 8px 8px;
  height: 39px;
  width: 132px;
  border: 1px solid var(--uiColor);
  justify-content: space-between;
}

#vitalSensorReadoutLeft {
  position: relative;
  display: flex;
  height: 100%;
  width: 16px;
  border: 1px solid var(--uiColor);
}

#vitalSensorReadoutRight {
  position: relative;
  display: flex;
  height: 100%;
  width: 96px;
  flex-direction: column;
}

#vitalSensorReadoutRightEnergy {
  position: relative;
  display: flex;
  height: 6px;
  width: 100%;
  border: 1px solid var(--uiColor);
}

#vitalSensorReadoutRightStats {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

#vitalSensorReadoutRightStats p {
  font-size: 0.5rem;

}

#vitals1 {
  position: relative;
  display: flex;
  height: 100%;
  width: auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.vitals {
  position: relative;
  display: flex;
  height: 100%;
  width: auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}


#vitalSensorReadoutBottomBorder {
  position: absolute;
  bottom: 4px;
  left: 4px;
  height: 27px;
  width: 120px;
  clip-path: path( 'M 0 0 L 1 0 L 1 26 L 120 26 L 120 27 L 0 27 Z');
  background: var(--uiColor);
}

#vitalSensorBottom {
  position: relative;
  display: flex;
  height: 348px;
  width: 140px;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  min-height: 348px;
}

#vitalSensorWave {
  position: relative;
  height: 336px;
  width: 132px;
  border: 1px solid var(--uiColor);
}

#vitalSensorWaveBorderGlow {
  position: absolute;
  bottom: 0;
  left: 0;
  filter: drop-shadow(0px 0px 12px var(--colorWhite)) 
}

#vitalSensorWaveBorder {
  position: absolute;
  height: 338px;
  width: 132px;
  bottom: 0;
  left: 0;
  clip-path: path( 'M 0 0 A 6 6 0 0 1 6 6 L 6 332 L 126 332 A 6 6 0 0 1 132 338 L 0 338 Z');
  background-color: var(--uiColor);
  opacity: 0.8;
}

#astralMonitorCenter {
}

#subjectScan {
  height: 473px;
  width: 473px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#astralMonitorBorderElementGlow {
    filter: drop-shadow(0px 0px 12px var(--colorWhite)) 
}

#astralMonitorBorderElement {
  height: 16px;
  width: 645px;
  clip-path: path( "M  0  0  L  132 0 L 132  12  L 645  12 L 645 16  L 0 16 Z" );
  background-color: var(--uiColor);
  opacity: 0.8;
}

#astralMonitorRight{
 display: flex;
 flex-direction: column;
 height: fit-content;
 width: fit-content;
 gap: 20px;
}

#glossaryChassis {
  height: 272px;
  width: 240px;
  min-height: 272px;
}

#chassisGlow {
  display: flex;
  position: relative;
  filter: drop-shadow(0px 0px 16px var(--colorWhite));
  gap: 4px;
}

#chassis {
  display: flex;
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  height: 268px;
  width: 240px;
  clip-path: path(
  "M 0 0 L 240 0 L 240 268 A 34 34 0 0 1 212 240 L 212 147 L 212 135 A 91 91 0 0 0 121 44 L 44 44 A 44 44 0 0 1 0 0 Z");
  background-color: var(--uiColor);
  overflow: hidden;
  flex-direction: column;
  gap: 4px;
}

#chassisBorder {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: path(
  "M 0 0 L 240 0 L 240 268 A 34 34 0 0 1 212 240 L 212 147 L 212 135 A 91 91 0 0 0 121 44 L 44 44 A 44 44 0 0 1 0 0 Z");
}

.chassisStripe {
  position: relative;
  height: 4px;
  width: 100%;
  background-color: var(--colorWhite);
}

#chassisGlobe {
  
}

#glossarySection {
  display: flex;
  flex-direction: column;
  height: fit-content;
  width: fit-content;
  gap: 20px;
}

#glossaryLiner {
  padding-bottom: 2px;
  display: flex;
  width: 240px;
  height: fit-content;
  justify-content: space-between;
}

#glossaryLinerArrow {
  height: 2px;
  width: 216px;
 background-color: var(--uiColor); 
}

.glossaryDots {
  width: 2px;
  height: 2px;
  background-color: var(--uiColor);
  border-radius: 50%;
}

#glossaryList {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 240px;
  height: fit-content;
  gap: 20px;
  overflow: visible;
}

.sectorLink {
  display: flex;
  align-items: center;
  padding-left: 12px;
  height: 44px;
  width: 240px;
  border: 1px solid var(--uiColor);
  font-family: var(--fontLocator);
  font-weight: 200;
  font-size: 1.5rem;
  transition: box-shadow 0.3s ease-in-out;
  transition: 0.3s ease-out;
}

.sectorLink:hover {
  box-shadow: 0px 0px 18px var(--colorWhite);
  filter: drop-shadow(0px 0px 18px var(--colorWhite)) ;
  transition: 0.1s ease-in;
}

#astralMonitorBottom {
  display: flex;
  width: 100%;
  gap: 4px;
}

#equalizers {
  display: flex;
  width: fit-content;
  gap: 4px;
}

#eQ1 {
  display: flex;
  width: 32px;
}

#eQ2 {
  display: flex;
  width: 32px;
}

#coreFunction {
  display: flex;
  width: 100%;
  height: 88px;
  border: 1px solid var(--uiColor);
  padding-left: 12px;
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 4px;
}

#consoleMain {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

#ascenders {
}


.hyperglobe {
  position: relative;
  width: 150px;
  height: 150px;
  animation: fadeInUp 1s 1.5s ease-in-out forwards;
  margin: -125px;
  top: -40px;
  left: 50%;
  animation: rotate 60s linear infinite;
  stroke: var(--colorWhite);
  opacity: 0.1;
}

.hyperglobe span {
  position: absolute;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 2px solid #FFF;
  width: 0;
  height: 0;
  animation: globe 20s -20s linear infinite;
}

.hyperglobe span + span {
  animation: globe 20s -19s linear infinite;
}

.hyperglobe span + span + span {
  animation: globe 20s -18s linear infinite;
}

.hyperglobe span + span + span + span {
  animation: globe 20s -17s linear infinite;
}

.hyperglobe span + span + span + span + span {
  animation: globe 20s -16s linear infinite;
}

.hyperglobe span + span + span + span + span + span {
  animation: globe 20s -15s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span {
  animation: globe 20s -14s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span {
  animation: globe 20s -13s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span {
  animation: globe 20s -12s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -11s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -10s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -9s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -8s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -7s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -6s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -5s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -4s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -3s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -2s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span {
  animation: globe 20s -1s linear infinite;
}

.hyperglobe span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span + span {
  display: none;
  animation: globe 20s 0s linear infinite;
}

@keyframes globe {
  0% {
  top: 50%;
  left: 31.3%;
  width: 0%;
  height: 0%;
}
  
  6.25% {
    top: 36%;
    left: 82%;
    width: 15.5%;
    height: 28%;
  }
  12.5% {
    top: 23.5%;
    left: 67.5%;
    width: 32.5%;
    height: 53%;
  }
  18.75% {
    top: 14%;
    left: 53%;
    width: 47%;
    height: 72%;
  }
  25% {
    top: 6%;
    left: 37%;
    width: 60%;
    height: 88%;
  }
  31.25% {
    top: 1.25%;
    left: 24.3%;
    width: 70.5%;
    height: 97.5%;
  }
  37.5% {
    top: 0%;
    left: 13%;
    width: 77.5%;
    height: 100%;
  }
  43.75% {
    top: 1.25%;
    left: 5%;
    width: 80%;
    height: 97.5%;
  }
  50% {
    top: 3.5%;
    left: 2.2%;
    width: 78%;
    height: 93%;
  }
  56.25% {
    top: 7.6%;
    left: 0%;
    width: 73.5%;
    height: 84.8%;
  }
  62.5% {
    top: 12.7%;
    left: 2%;
    width: 65.8%;
    height: 74.6%;
  }
  68.75% {
    top: 18.075%;
    left: 5.5%;
    width: 56.5%;
    height: 63.85%;
  }
  75% {
    top: 24.5%;
    left: 9.5%;
    width: 46.25%;
    height: 51%;
  }
  81.25% {
    top: 30.6%;
    left: 13.97%;
    width: 35.65%;
    height: 38.8%;
  }
  87.5% {
    top: 36.625%;
    left: 19.27%;
    width: 24%;
    height: 26.75%;
  }
  93.75% {
    top: 43.5%;
    left: 25.3%;
    width: 12%;
    height: 13%;
  }
  100% {
    top: 50%;
    left: 31.3%;
    width: 0%;
    height: 0%;
  }
}

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