/* ============================================
   BIOHAZARD // 3301
============================================ */


/* RESET */

* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {
  margin: 0;

  min-height: 100vh;

  background:
    linear-gradient(
      rgba(0, 0, 0, 0.76),
      rgba(0, 0, 0, 0.91)
    ),
    url("background.gif");

  background-color: #000;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  color: #00ff41;

  font-family:
    "Courier New",
    "Lucida Console",
    monospace;

  font-size: 12px;
}



/* ============================================
   SCANLINES
============================================ */

.crt {
  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 9999;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.18) 3px,
      rgba(0, 0, 0, 0.18) 4px
    );
}



/* ============================================
   SITE
============================================ */

.site {
  width: 1080px;

  max-width:
    calc(100% - 40px);

  margin:
    30px auto;

  padding:
    9px;

  background:
    rgba(0, 7, 2, 0.92);

  border:
    1px solid #17652c;

  box-shadow:
    0 0 30px rgba(0, 255, 65, 0.12);
}



/* ============================================
   HEADER
============================================ */

.header {
  display: flex;

  justify-content:
    space-between;

  min-height: 140px;

  padding: 20px;

  border:
    1px solid #17652c;

  background:
    rgba(0, 12, 3, 0.82);
}


.identity h1 {
  margin:
    13px 0 9px;

  font-size:
    30px;

  font-weight:
    normal;

  letter-spacing:
    2px;

  text-shadow:
    0 0 7px rgba(0, 255, 65, 0.4);
}


.identity p {
  margin:
    5px 0;
}


.latin {
  opacity:
    0.65;

  font-style:
    italic;
}


.header-info {
  text-align:
    right;

  font-size:
    9px;

  opacity:
    0.58;

  line-height:
    1.5;
}


.header-info p {
  margin:
    3px 0;
}



/* ============================================
   DASHBOARD
============================================ */

.dashboard {
  display: grid;

  grid-template-columns:
    190px
    minmax(350px, 1fr)
    220px;

  gap:
    6px;

  margin-top:
    6px;
}



/* ============================================
   PANELS
============================================ */

.panel {
  position:
    relative;

  padding:
    10px;

  overflow:
    hidden;

  background:
    rgba(0, 11, 3, 0.85);

  border:
    1px solid #17652c;
}


.panel-title {
  display: flex;

  justify-content:
    space-between;

  margin:
    -10px -10px 10px;

  padding:
    5px 7px;

  background:
    rgba(77, 190, 95, 0.13);

  border-bottom:
    1px solid #17652c;

  color:
    #8cff9e;

  font-size:
    9px;

  letter-spacing:
    1px;
}



/* ============================================
   NAVIGATION
============================================ */

.navigation {
  min-height:
    330px;
}


.nav-row {
  height:
    28px;

  margin-bottom:
    5px;

  border-bottom:
    1px solid rgba(46, 116, 59, 0.5);
}


.nav-row a {
  display:
    inline-block;

  min-width:
    105px;

  height:
    100%;

  padding:
    6px 8px;

  background:
    rgba(133, 255, 148, 0.52);

  color:
    #001804;

  text-decoration:
    none;

  font-weight:
    bold;

  font-size:
    10px;

  box-shadow:
    0 0 7px rgba(0, 255, 65, 0.2);

  transition:
    0.2s;
}


.nav-row a:hover {
  min-width:
    140px;

  background:
    rgba(168, 255, 180, 0.92);

  box-shadow:
    0 0 13px rgba(0, 255, 65, 0.6);
}


.terminal-note {
  margin-top:
    35px;

  font-size:
    9px;

  opacity:
    0.55;

  line-height:
    1.7;
}



/* ============================================
   SURVEILLANCE
============================================ */

.surveillance {
  min-height:
    330px;
}


.camera {
  position:
    relative;

  overflow:
    hidden;

  background:
    #000;

  border:
    1px solid #17652c;
}


.camera img {
  display:
    block;

  width:
    100%;

  height:
    235px;

  object-fit:
    cover;

  filter:
    brightness(0.75)
    contrast(1.18);
}


.cam-number {
  position:
    absolute;

  top:
    7px;

  left:
    7px;

  padding:
    3px;

  background:
    rgba(0, 0, 0, 0.7);

  font-size:
    8px;
}


.cam-signal {
  position:
    absolute;

  right:
    7px;

  bottom:
    7px;

  padding:
    3px;

  background:
    rgba(0, 0, 0, 0.7);

  font-size:
    8px;
}


.camera-bottom {
  display: flex;

  justify-content:
    space-between;

  margin-top:
    7px;

  font-size:
    8px;

  opacity:
    0.57;
}



/* ============================================
   RECORDING
============================================ */

.recording {
  animation:
    recording
    1.8s
    ease-in-out
    infinite;
}


@keyframes recording {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.18;
  }

}



/* ============================================
   STATUS
============================================ */

.system {
  min-height:
    330px;

  font-size:
    9px;
}


.status-row {
  display: flex;

  justify-content:
    space-between;

  padding:
    5px 0;

  border-bottom:
    1px dotted
    rgba(57, 146, 73, 0.45);
}


.bar-label {
  margin:
    12px 0 3px;

  opacity:
    0.55;

  font-size:
    8px;
}


.bar {
  width:
    100%;

  height:
    7px;

  overflow:
    hidden;

  background:
    #001505;

  border:
    1px solid #17652c;
}


.bar-fill {
  height:
    100%;

  background:
    #00ff41;

  box-shadow:
    0 0 7px rgba(0, 255, 65, 0.55);
}


.signal {
  width: 94%;
}


.memory {
  width: 67%;
}


.network {
  width: 81%;
}



/* ============================================
   LINKS
============================================ */

.nodes {
  font-size:
    10px;
}


.nodes a {
  display:
    block;

  padding:
    5px;

  color:
    #00ff41;

  text-decoration:
    none;

  border-bottom:
    1px dotted rgba(57, 146, 73, 0.4);

  transition:
    0.2s;
}


.nodes a:hover {
  padding-left:
    10px;

  background:
    rgba(0, 255, 65, 0.12);
}



/* ============================================
   SUBJECT
============================================ */

.subject-record {
  font-size:
    9px;
}


.subject-columns {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    20px;
}


.data-line {
  display:
    grid;

  grid-template-columns:
    80px 1fr;

  padding:
    5px 0;

  border-bottom:
    1px dotted rgba(57, 146, 73, 0.4);
}


.data-line span {
  opacity:
    0.55;
}


.data-line strong {
  font-weight:
    normal;
}



/* ============================================
   AUDIO
============================================ */

.audio {
  font-size:
    9px;
}


.small {
  opacity:
    0.5;
}


.track {
  margin:
    4px 0;

  font-size:
    14px;

  letter-spacing:
    1px;
}


.artist {
  margin:
    0 0 12px;

  opacity:
    0.55;
}


.player-controls {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.player-controls button {
  padding:
    6px 11px;

  background:
    #001406;

  color:
    #00ff41;

  border:
    1px solid #00ff41;

  font-family:
    inherit;

  font-size:
    9px;

  cursor:
    pointer;
}


.player-controls button:hover {
  background:
    #00ff41;

  color:
    #001406;
}


.progress {
  height:
    5px;

  margin-top:
    12px;

  overflow:
    hidden;

  background:
    #001505;

  border:
    1px solid #17652c;
}


.progress-bar {
  width:
    0%;

  height:
    100%;

  background:
    #00ff41;

  box-shadow:
    0 0 5px rgba(0, 255, 65, 0.6);
}



/* ============================================
   LOGS
============================================ */

.logs {
  grid-row:
    span 2;

  font-size:
    9px;
}


.logs p {
  margin:
    8px 0;

  padding-bottom:
    7px;

  border-bottom:
    1px dotted rgba(57, 146, 73, 0.4);
}


.date {
  display:
    block;

  margin-bottom:
    2px;

  opacity:
    0.4;

  font-size:
    8px;
}



/* ============================================
   IMAGE ARCHIVE
============================================ */

.image-archive {
  grid-column:
    2 / 4;
}


.images {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    6px;
}


.archive-image {
  position:
    relative;

  overflow:
    hidden;

  background:
    #000;

  border:
    1px solid #17652c;
}


.archive-image img {
  display:
    block;

  width:
    100%;

  height:
    145px;

  object-fit:
    cover;

  filter:
    brightness(0.7)
    contrast(1.2);

  transition:
    0.3s;
}


.archive-image:hover img {
  filter:
    brightness(0.95)
    contrast(1.2);

  transform:
    scale(1.025);
}


.archive-image span {
  position:
    absolute;

  left:
    5px;

  bottom:
    5px;

  padding:
    3px;

  background:
    rgba(0, 0, 0, 0.7);

  font-size:
    8px;
}



/* ============================================
   STAMPS
============================================ */

.stamps {
  grid-column:
    2 / 3;
}


.stamp-images {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    5px;
}


.stamp-images img {
  image-rendering:
    pixelated;

  border:
    1px solid
    rgba(0, 255, 65, 0.25);
}



/* ============================================
   DATABASE
============================================ */

.database {
  font-size:
    8px;

  line-height:
    1.45;

  opacity:
    0.72;
}



/* ============================================
   FOOTER
============================================ */

footer {
  display:
    flex;

  justify-content:
    space-between;

  margin-top:
    6px;

  padding:
    7px 9px;

  background:
    rgba(0, 10, 3, 0.8);

  border:
    1px solid #17652c;

  font-size:
    8px;

  opacity:
    0.5;
}



/* ============================================
   CURSOR
============================================ */

.cursor {
  animation:
    cursor
    1.1s
    steps(1)
    infinite;
}


@keyframes cursor {

  50% {
    opacity: 0;
  }

}



/* ============================================
   SLOW BLINK
============================================ */

.slow-blink {
  animation:
    slowBlink
    3.7s
    ease-in-out
    infinite;
}


@keyframes slowBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.12;
  }

}



/* ============================================
   SENTIENCE
============================================ */

.sentience {
  position:
    fixed;

  right:
    20px;

  bottom:
    20px;

  z-index:
    100;

  color:
    #00ff41;

  font-size:
    10px;

  line-height:
    1.35;

  pointer-events:
    none;

  text-shadow:
    0 0 5px rgba(0, 255, 65, 0.7);
}


.sentience p {
  margin:
    2px 0;

  animation:
    sentiencePulse
    5s
    ease-in-out
    infinite;
}


.sentience p:nth-child(2) {
  animation-delay:
    0.4s;
}


.sentience p:nth-child(3) {
  animation-delay:
    0.8s;
}


.sentience p:nth-child(4) {
  animation-delay:
    1.2s;
}


@keyframes sentiencePulse {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 0.08;
  }

}



/* ============================================
   CICADA
============================================ */

.cicada {
  position:
    fixed;

  left:
    12px;

  bottom:
    10px;

  margin:
    0;

  color:
    #00ff41;

  font-family:
    monospace;

  font-size:
    5px;

  line-height:
    5px;

  white-space:
    pre;

  opacity:
    0.16;

  pointer-events:
    none;

  text-shadow:
    0 0 5px rgba(0, 255, 65, 0.5);
}



/* ============================================
   MOBILE
============================================ */

@media (max-width: 850px) {

  .site {
    width:
      calc(100% - 16px);

    max-width:
      none;

    margin:
      8px auto;
  }


  .header {
    display:
      block;
  }


  .header-info {
    margin-top:
      20px;

    text-align:
      left;
  }


  .dashboard {
    grid-template-columns:
      1fr;
  }


  .image-archive,
  .stamps {
    grid-column:
      auto;
  }


  .logs {
    grid-row:
      auto;
  }


  .images {
    grid-template-columns:
      1fr;
  }


  .subject-columns {
    grid-template-columns:
      1fr;
  }


  .sentience,
  .cicada {
    display:
      none;
  }

}