/*
Logo background color: #358597
Logo text color: #F4A896
Logo font: Google Permanent Marker

*/

.error {
    margin: 0;
    padding: 0;
    background-color: black;
    color: #00ff00;
    font-family: 'Courier New', Courier, monospace;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}


/* Outer wrapper to contain scanlines */
.crt-text {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  background: black;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}

/* The actual text with startup animation */
.crt-text-inner {
  display: inline-block;
  font-size: 2rem;
  color: #00ff88;
  text-shadow:
    0 0 2px #00ff88,
    0 0 4px #00ff88,
    0 0 8px #00ff88;
  transform-origin: center;
  animation: crt-startup 1.4s ease-out forwards;
  opacity: 0;
}

/* Scanlines overlay */
.crt-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0px,
    rgba(0, 0, 0, 0.3) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: scanlines-move 2s linear infinite;
}

/* Animations */

@keyframes crt-startup {
  0% {
    transform: scaleY(0.01) scaleX(1.8);
    opacity: 0;
    filter: brightness(200%);
  }
  30% {
    transform: scaleY(0.03) scaleX(0.8);
    opacity: 1;
    filter: brightness(150%);
  }
  60% {
    transform: scaleY(1.3) scaleX(1.05);
    filter: brightness(120%);
  }
  80% {
    transform: scaleY(0.95) scaleX(1);
  }
  100% {
    transform: none;
    filter: none;
    opacity: 1;
  }
}

@keyframes scanlines-move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 4px;
  }
}


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

/* Top banner image */
.top-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10vh;
  overflow: hidden; /* prevent scrolling on the block */
  z-index: 1000;
  transition: transform 0.3s ease-out;
  background-color: #358597; /* fallback/surrounding the image */
}

/* Hide banner by moving it out of view as you scroll*/
.top-banner.hide {
  transform: translateY(-100%);
}

.top-banner img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: top left;
}

/* Push page content below the banner */
.content {
  padding-top: 10vh;
  padding-left: 20px;
  font-family: sans-serif;
}

.home {
  height: 100%;
  margin: 0;
  background-color: #358597;
  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: hidden;*/
  min-height: 100vh;
}

.home img {
  max-width: 100vh;
  max-height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  background-color: black;
  color: #ffffff;
  font-family: 'Roboto';
  height: 100vh;
  display: flex;
  /* justify-content: center; <-- horizontal */
  /* align-items: center; <-- vertical */
  position: relative;
  /* overflow: hidden; */
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-VariableFont_wdth\,wght.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional: controls how the font loads and displays */
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-VariableFont_wdth\,wght.ttf') format('ttf');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}