/* Full viewport reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000; /* fallback if video not loaded */
  overflow: hidden;
  font-family: Georgia, serif;
}

/* Video wrapper with gradient frame */
.video-wrapper {
  width: 90vw;    /* 90% of viewport width */
  height: 80vh;   /* 80% of viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    180deg,
    rgb(17,97,237) 0%,     
    rgb(32,84,212) 25%,    
    rgb(38,78,193) 50%,    
    rgb(47,68,170) 75%,    
    rgb(58,58,148) 100%    
  );
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  position: relative;
}

/* Video element */
#bg-video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;  /* ensures full video visible */
  display: block;
  background: black;     /* fallback behind video */
}

/* Make overlay a column flex container */
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #f7c81e;
  z-index: 2;
}

/* Add spacing between title and buttons */
.overlay h1 {
  margin-bottom: 50px; /* increase spacing on mobile */
}

/* Push ENTER button up on small screens */
@media (max-width: 768px) {
  #enter-btn {
    margin-top: -60px; /* move it up */
  }
}
.enter-btn:hover {
  background: #f7c81e;
  color: black;
}

/* Optional: smooth fade-in for ENTER button */
#enter-btn {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#enter-btn.show {
  opacity: 1;
}