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

html, body {
  height: 100%;
 overflow-y: auto; -webkit-overflow-scrolling: touch;
}

body {
  font-family: "PT Mono", monospace;
  background-color: black;
  color: white;
  position: relative;
  min-height: 100vh;
  
  /* fix the background */
  background-attachment: fixed;
  background-size: cover; /* optional, makes background cover whole screen */
  background-position: center; /* optional, centers background */
}

/* ---------------- Background Video ---------------- */
#video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none; /* Prevent video from blocking clicks */
}

/* ---------------- Centered Text / Links ---------------- */
.centered-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  max-width: 600px;
  width: 100%;
  padding: 1rem;
  margin: 0 auto;
  text-align: left;
  position: relative;
  z-index: 10; /* Above all visuals */
}

.small,
.main-title {
  font-family: "PT Mono", monospace;
  font-weight: bold;
  font-size: 2rem; /* normal size */
  color: white; /* rgb(109, 236, 63); */
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
      /* Add shadow: offset-x | offset-y | blur-radius | color */
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.small {

  font-size: 1.2rem; /* smaller size */
  line-height: 0.5;

}


/* ---------------- Bouncing Images ---------------- */
.bouncer {
  position: absolute;
  width: 120px;
  z-index: 1;
  pointer-events: none !important; /* Ensure no clicks are blocked */
  transform-origin: center center;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
  transition: filter 0.1s;
}

/* ---------------- Pointer lines ---------------- */
.pointer-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.horizontal-line,
.vertical-line {
  position: absolute;
  background-color: rgba(255,255,255,0.3);
}

.horizontal-line { height: 3px; width: 100%; }
.vertical-line { width: 3px; height: 100%; }

.coordinates {
  position: fixed;
  font-family: "Times New Roman", Cambria, serif;
  font-size: 16px;
  top: 10px;
  left: 10px;
  color: greenyellow;
}

/* ---------------- Tickers ---------------- */
#ticker, #ticker2 {
  position: fixed;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none; /* Prevent tickers from blocking clicks */
}

#ticker { bottom: 100px; font-family: "PT Mono", monospace; font-size: 1.5rem; color: white; transform: rotate(-0.5deg); }
#ticker2 { bottom: 120px; font-family: "Gill Sans", sans-serif; font-size: 20px; color: white; transform: rotate(1.3deg); }
#ticker p, #ticker2 p { display: inline-block; margin: 0; }