/* ===========================
   Base / Reset
   =========================== */
*, *::before, *::after {
  box-sizing: border-box;
}

   * {
  scrollbar-color: #06D972 #07190F;  /* thumb color, track color */
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #07190F; }
::-webkit-scrollbar-thumb { background: #06D972; }


/* ===========================
   Body and header
   =========================== */
body {
  background-color: #000000;
  color: #247516;
  font-family: Consolas, Menlo, Monaco, monospace;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}

header h1 {
   font-size: 5.0vmin;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   margin: 0;
   bottom: -0.2%;
   color: #707070;
   text-shadow: 0px 2px 2px rgba(166, 166, 166, 0.8), 0px -2px 2px rgba(69, 69, 69, 0.7);
}

/* ===========================
   Monitor
   =========================== */
.monitor-wrapper {
   position: relative;
}

   .monitor-bezel-outer {
   background-color: #7F7F7F;
   background-image: 
      linear-gradient(rgba(127, 127, 127, 0.9), rgba(127, 127, 127, 0.9)),
      url('../static/bezel-texture.png');
   background-position: center;
   background-size: cover;
   border-radius: 1vmin;
   padding: 5.5vmin;
   width: 80vmin;
   aspect-ratio: 4/3.4;
   box-shadow: 0 0 100px rgba(6, 217, 114, .2);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;  
}


.monitor-bezel-inner {
   background-color: #525252;
   background-image: 
      linear-gradient(rgba(82, 82, 82, 0.9), rgba(82, 82, 82, 0.9)),
      url('../static/bezel-texture.png');
   background-position: center;
   background-size: cover;
   border-radius: .8vmin;
   padding: 2.5%;
   width: 100%;
   height: 100%;
   box-shadow: inset 2px 2px 2px rgba(112, 112, 112, 0.8), inset -2px -2px 2px rgba(176, 176, 176, 0.8);
}

.monitor-screen {
   background-color: #07190F;
   border-radius: .7vmin;
   padding: 1%;
   width: 100%;
   height: 100%;
   overflow-y: hidden;  /* changed from auto */
   overflow-x: hidden;
   position: relative;
   display: flex;          /* add this */
   flex-direction: column; /* add this */
}

.tab-scroll-area {
   overflow-x: hidden;
   overflow-y: auto;
   flex: 1;
   min-height: 0;
   margin-top: .25vmin;
}

.monitor-screen::after {
   content: " ";
   position: absolute;
   top: 0; left: 0; width: 100%; height: 100%;
   background: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0.15) .2vmin,
      transparent .2vmin,
      transparent .3vmin
   );
   pointer-events: none;
   z-index: 2;
}

/* ===========================
   Nav Buttons
   =========================== */

   
.terminal-nav {
   display: flex;
   flex-direction: row;
   background-color: #06D972;
   box-shadow: 0 0 15px rgba(6, 217, 114, 2);
   margin-left: -1%;
   margin-right: -1%;
   margin-top: .5%;
   padding: .4vmin;
}

.terminal-nav-btn {
   display: flex;
   flex-direction: row;
   transition: text-shadow 0.15s ease;
   text-decoration: none;
   color: #2C2E30;
   background-color: transparent;
   font-size: 1.3vmin;
   font-weight: bold;
}

.terminal-nav a:nth-child(1) { margin-left: 0.8vmin; }
.terminal-nav a:nth-child(2) { margin-left: 2vmin; }
.terminal-nav a:nth-child(3) { margin-left: 1.7vmin; }


.terminal-nav-btn--active {}

.terminal-nav-btn:hover {
   text-shadow: 0 0 20px rgba(44, 143, 27, 0.9);
}

.terminal-nav-version {
   color: #2C2E30;
   font-size: 1vmin;
   font-weight: bold;
   align-self: center;
   margin-left: auto;
}

/* ===========================
   Terminal Tab Buttons
   =========================== */

.terminal-tabs {
   display: flex;
   flex-direction: row;
   color: #06D972;
   text-shadow: 0 0 20px rgba(6, 217, 114, 0.9);
   justify-content: left;
}

.tab-btn {
   transition: text-shadow 0.15s ease;
   color: inherit;
   cursor: pointer;
   background-color: #07190F;
   text-shadow: 0 0 20px rgba(6, 217, 114, 0.9);
   margin: 0;
   padding: .4vmin;
   font-size: 1.4vmin;
   font-weight: bold;
   margin-top: .9vmin;
   border: .2vmin solid rgba(6, 217, 114, .1);
}

.tab-btn--active {
   border: .2vmin solid rgba(6, 217, 114, .7);
}

.tab-btn:hover {
   text-shadow: 0 0 20px rgba(44, 143, 27, 0.9);
}

.tab-btn--concord.tab-btn--active {
   text-shadow: 2px 2px 20px rgba(108, 44, 245, 0.9), 2px 2px 20px rgba(108, 44, 245, 0.9); 
}

.tab-btn--concord:hover {
   text-shadow: 2px 2px 20px rgba(108, 44, 245, 0.9), 2px 2px 20px rgba(108, 44, 245, 0.9); 
}

/* ===========================
   Terminal Tab Content
   =========================== */

      #concord-mascot {
      position: absolute;
      width: 75vmin;
      display: block;
      top: -14.3vmin;
      right: 7vmin;
      filter: drop-shadow(0 -6px 10px rgba(6, 217, 114, 0.9));
   }
   
   .tab-content {
      display: none;
      font-size: 1.5vmin;
      margin-left: 1.1%;
   }

/* ===========================
   Instructions Tab Content
   =========================== */

   .instr-ascii-art {
      font-size: .8vmin;
      margin-top: 2.2vmin;
      text-align: center;
      margin-left: -1.1%;
   }

   #instructions-content pre {
      transform: scaleY(.9);
      line-height: 10%;
      font-weight: bold;
      text-shadow: 0 0 20px rgba(6, 217, 114, 0.9);
      color: #06D972;
      position: relative;
   }

   @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

   .cursor {
      content: "";
      display: inline-block;
      width: .6vmin;
      height: 1.3vmin;
      background-color: #06D972;
      animation: blink 1s step-end infinite;
      position: absolute;
      top: 48.2vmin;
      right: 8vmin;
}

/* ===========================
   Concord Tab Content
   =========================== */

   #concord-content pre {
      text-shadow: 0 0 20px rgba(6, 217, 114, 0.9);
      color: #06D972;
      position: relative;
}

   .FBI-Report {
      line-height: 125%;
   }

   .anomalies {
      text-shadow: 2px 2px 20px rgba(108, 44, 245, 0.9);
   }


/* ===========================
   Concord Tab Content - Loader
   =========================== */

   #concord-loader {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
   }

   #loader-popup {
      display: flex;
      flex-direction: column;
      width: 32vmin;
      border: .2vmin solid #06D972;
      box-shadow: 0 0 20px rgba(6, 217, 114, 0.2);
      align-items: center;
      margin-left: -1vmin;
      margin-top: -8vmin;
   }
   
   #loader-titlebar {
      font-size: 1.1vmin;
      width: 100%;
      background-color: #06D972;
      padding: .4vmin;
      color: #2C2E30;
      font-weight: bold;
   }

   #loader-status {
      font-size: 1.2vmin;
      text-shadow: 0 0 20px rgba(6, 217, 114, 0.9);
      color: #06D972;
      padding: .5vmin;
   }

   #loader-bar {
      border: .1vmin solid #134027;
      width: fit-content;
      font-size: 0;
      margin-bottom: 2.5vmin;
   }

   .loader-block {
      display: inline-block;
      width: 1vmin;
      height: 1vmin;
      background-color: #081A0F;
   }

   .loader-block--filled {
      background-color: #06D972;
   }

/* ===========================
   Transmission Tab Content
   =========================== */

#transmission-content {
   text-shadow: 0 0 20px rgba(6, 217, 114, 0.9);
   color: #06D972;
   width: 100%;
   position: relative;
   min-width: 0;
   overflow-wrap: break-word;
   height: fit-content;
   font-weight: bold;
   font-size: 17vmin;
   margin-top: -15vmin;
   margin-bottom: -13vmin;
}

.transmission-radio {
   position: absolute;
   margin-left: 38vmin;
   height: 18vmin;
   filter: drop-shadow(0 -6px 10px rgba(6, 217, 114, 0.2));
   margin-bottom: 0vmin;
   margin-top: -37.4vmin;
}