@import url("https://fonts.googleapis.com/css2?family=Wallpoet&family=Orbitron:wght@400;500;600;700&family=Roboto+Mono&display=swap");
@import url(https://fonts.googleapis.com/css?family=VT323);
:root {
  --color-primary: #f08;
  --color-secondary: #0f0;
  --color-background: #25272c;
  --color-foreground: #fff;
  --color-card-background: #463f3f;
  --color-accent: gold;
  --font-logo: "Wallpoet", sans-serif;
  --font-heading: "Orbitron", sans-serif;
  --font-body: "Roboto Mono", monospace;
  --font-accent: "Orbitron", sans-serif;
  --font-terminal: "VT323", monospace;
  --background-start-rgb: 86, 74, 76;
  --background-mid-rgb: 62, 53, 54;
  --background-end-rgb: 0, 0, 0;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --terminal-green: #0d0;
  --terminal-bg: #25272c;
  --terminal-red: #cb135a;
  --terminal-scanline-opacity: 0.15;
  --mobile-padding: 1rem;
  --mobile-header-height: 70px;
}
html {
  width: 100%;
}
body,
html {
  overflow-x: hidden;
}
body {
  color: var(--terminal-green);
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
  width: 100vw;
  max-width: 100vw;
}
body:before {
  pointer-events: none;
  background-size: 100% 4px;
  z-index: 999;
  animation: flicker 5s infinite;
}
body:after,
body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body:after {
  z-index: -1;
}
body:after,
main {
  background: var(--terminal-bg);
}
main,
section {
  position: relative;
}
section {
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  z-index: 2;
  padding: var(--mobile-padding);
}
section:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 0, 0.3) 20%,
    rgba(0, 255, 0, 0.8) 50%,
    rgba(0, 255, 0, 0.3) 80%,
    transparent
  );
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.5), 0 0 30px rgba(0, 255, 0, 0.3);
  z-index: 3;
}
.terminal-container {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}
.terminal-content {
  position: relative;
  z-index: 1;
}
.terminal-sections {
  position: relative;
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.75) 0,
    rgba(0, 0, 0, 0.8) 15%,
    rgba(0, 0, 0, 0.85) 20%,
    rgba(0, 0, 0, 0.9) 25%,
    rgba(0, 0, 0, 0.95) 30%,
    var(--terminal-bg) 40%
  );
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 3;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}
.terminal-sections:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: repeating-linear-gradient(
    transparent 4px,
    transparent 0,
    transparent 2px,
    rgba(0, 255, 0, 0.1) 3px,
    transparent 4px
  );
  pointer-events: none;
  opacity: 0.7;
}
@keyframes scroll {
  0% {
    height: 0;
  }
  to {
    height: 100%;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}
a {
  color: var(--color-primary);
  text-decoration: none;
}
@keyframes flicker {
  0% {
    opacity: 0.95;
  }
  5% {
    opacity: 0.9;
  }
  10% {
    opacity: 0.85;
  }
  15% {
    opacity: 0.9;
  }
  20% {
    opacity: 0.95;
  }
  25% {
    opacity: 0.9;
  }
  30% {
    opacity: 0.85;
  }
  35% {
    opacity: 0.9;
  }
  40% {
    opacity: 0.95;
  }
  45% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.85;
  }
  55% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.95;
  }
  65% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.85;
  }
  75% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.95;
  }
  85% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.85;
  }
  95% {
    opacity: 0.9;
  }
  to {
    opacity: 0.95;
  }
}
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .terminal-sections:after {
    opacity: 0.4;
  }
  body:before {
    animation: none;
  }
}