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

@font-face {
  font-family: 'MemeFont'; /* Give your font a name */
  src: url('font.ttf') format('truetype'); /* Path to the .ttf file */
  font-weight: normal; /* Optional: specify weight */
  font-style: normal; /* Optional: specify style */
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Ensure the container fills the entire viewport */
  box-sizing: border-box;
  overflow: hidden; /* Prevent scrolling */
}

#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the screen */
  z-index: -1;
  pointer-events: none; /* Prevent interaction with the video */
}


/* Content Container */
.content-container {
  display: flex;
  flex-direction: row; /* Horizontal layout by default */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100%; /* Full width */
  height: 100dvh; /* Use dynamic viewport height for mobile */
  gap: clamp(1rem, 2vw, 3rem); /* Dynamic spacing */
  padding: 0; /* No padding */
  margin: 0; /* No margin */
  position: relative;
  box-sizing: border-box;
  text-align: center;
}

/* Buttons */
.content-container button {
  background: none; /* No background */
  color: white; /* White text */
  border: 1px solid white; /* 1px white border */
  border-radius: 50px; /* Tight rounded corners */
  font-family: 'MemeFont', Arial, sans-serif; /* Custom font */
  font-size: clamp(1rem, 2.5vw, 2.5rem); /* Responsive font size */
  padding: clamp(0.5rem, 1vw, 1.5rem) clamp(1rem, 2vw, 3rem); /* Responsive padding */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth hover transition */
  text-shadow: 2px 2px 0px black; /* Black text shadow */
  box-shadow: 2px 2px 0px black; /* White drop shadow */
  flex-shrink: 0; /* Prevent buttons from shrinking */
}

/* Hover Effect for Buttons */
.content-container button:hover {
  background: white; /* White background */
  color: black; /* Black text */
  border: 2px solid black; /* Black border */
  text-shadow: 2px 2px 0px white; /* White text shadow */
  box-shadow: 2px 2px 0px black; /* Black drop shadow */
}

/* Centered Graphic */
.center-graphic {
  font-family: 'MemeFont', Arial, sans-serif; /* Custom font */
  font-size: clamp(2.5rem, 6vw, 7rem); /* Larger font size for mobile */
  font-weight: bold;
  color: white;
  text-shadow: 
    -2px -2px 0px black, 
     2px -2px 0px black, 
    -2px  2px 0px black, 
     2px  2px 0px black; /* Black text outline */
  flex-shrink: 0; /* Prevent shrinking */
}


  .overlay .content {
  font-family: 'MemeFont', Arial, sans-serif; /* Ensure custom font */
  font-size: clamp(1.5rem, 4vw, 3rem); /* Dynamic font size */
  text-align: center;
  color: white;
}

/* Overlay Styles */
.overlay {
  position: fixed; /* Fix to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9); /* Dark background for the overlay */
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: center;
  z-index: 100; /* Above all other elements */
  animation: fadeIn 0.5s ease forwards;
  cursor: pointer; /* Indicate clickable overlay */
}

.overlay.active {
  display: flex; /* Show overlay when active */
}

.overlay .content {
  text-align: center;
  color: white;
  padding: 2rem;
  cursor: default; /* Prevent pointer feedback on content */
}

/* Animation for overlay appearance */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Mobile Layout: Vertical Stacking */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column; /* Stack items vertically */
    height: 100dvh; /* Use dynamic viewport height */
  }
}

  button {
    width: auto; /* Keep buttons tight */
    font-size: clamp(1.75rem, 4vw, 3.5rem); /* Slightly larger text */
    padding: 1rem 2rem; /* Adjust padding */
  }

  .center-graphic {
    font-size: clamp(3rem, 7vw, 8rem); /* Increase font size further */
  }