/*=============================*/
/* Terminal Intro (Typewriter) */
/*=============================*/
#terminalIntro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #111;
  color: #0f0;
  font-family: 'Courier New', Courier, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.8s ease;
}

#terminalIntro p {
  color: cyan;
}

.terminalContent {
  font-size: 1.2rem;
  padding: 2rem;
  white-space: pre-wrap;
  line-height: 1.4;
}

.blinking {
  display: inline-block;
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/*========================*/
/* Embedded YouTube Video */
/*========================*/
#videoDiv {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

#videoDiv iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 100vh;
  transform: translate(-50%, -50%);
  filter: brightness(75%);
  border: none;
  z-index: 0;
}

/*================*/
/* Heading Banner */
/*================*/
#headingDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*======================*/
/* Web Intro Paragraphs */
/*======================*/
#webIntro ul {
  padding-left: 2em;
}

#webIntro {
  flex: 1 1 50%;
  max-width: 80%;
  background-color: #1e1e1e;
  padding-left: 2em;
  padding-right: 2em;
  border-radius: 1em;
}

/*===================================*/
/* Stats Section (Analytics + Chart) */
/*===================================*/
#mainStatsWrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2em;
  max-width: 90%;
  margin: 0 auto;
  padding: 2em 1em 1em 1em;
  flex-wrap: wrap;
}

#statsContainer {
  display: flex;
  flex-direction: column;
  flex: 0 1 18%;
  background-color: #1e1e1e;
  border-radius: 1em;
  padding: 1.5rem 0;
  box-sizing: border-box;
}

#analyticsMetrics {
  padding: 0em 1em 1em 1em;
  text-align: center;
}

.metric {
  color: white;
  text-align: left;
  padding: 0 1em;
  line-height: 2em;
}

#avgTimeOnSite, #deviceUsage, #totalVisits, #pagesPerSession {
  color: cyan;
}

#langBreakdown {
  padding: 1em 1em 0em 1em;
  text-align: center;
}

#langChart {
  width: 250px;
  height: 250px;
}

/*======*/
/* Note */
/*======*/
#note {
  margin-top: 0em;
}

/*=====================*/
/*==== Mobile View ====*/
/* (Max width: 768px) */
/*=====================*/
@media (max-width: 768px) {
  
  #mainStatsWrapper {
    flex-direction: column;
    align-items: center;
    gap: 1em;
  }

  #webIntro {
    max-width: 90%;
  }

  #statsContainer {
    flex: 1 1 auto;
    width: 70%;
    max-width: 70%;
  }

  #videoDiv {
    height: 300px;
  }

  #headingDiv {
    top: 10%;
  }
}