/* styles.css */

/* Import the Seven Segment font */
@font-face {
  font-family: 'Seven Segment';
  src: url('Seven Segment.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Base page setup */
body {
  margin: 0;
  padding: 0;
  background-color: black;
  display: flex;
  flex-direction: column;       /* stack elements vertically */
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
  color: white;
}

/* Utility to hide elements */
.hidden {
  display: none;
}

/* SVG “button” styling */
.button-image {
  width: 80vw;      /* 60% of viewport width */
  max-width: 1200px; /* never larger than 800px */
  cursor: pointer;
  margin-bottom: 20px;
  image-shadow
}

/* Countdown container */
#countdown {
  margin-bottom: 20px;
}

/* Seven-segment timer styling */
#timeStr {
  font-family: 'Seven Segment', monospace;
  font-size: 20em;
  color: rgb(221, 38, 143);
  text-shadow:
    0 0 10px rgb(221, 38, 143, .4),
    0 0 5px rgb(221, 38, 143, .4),
    0 0 5px rgb(221, 38, 143, .4),
    0 0 20px rgb(221, 38, 143, .4);
}

/* Video responsiveness */
#videoContainer {
  /* remains hidden until needed */
}
#videoContainer video {
  width: auto;
  /*max-width: 640px;*/
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .button-image {
    width: 180px;
  }
  #timeStr {
    font-size: 6em;
  }
}


/* Mobile portrait boost for SVG buttons */
@media screen and (max-width: 600px) and (orientation: portrait) {
  .button-image {
    width: 90vw;     /* 80% of viewport width on mobile portrait */
    max-width: none; /* remove desktop cap */
  }
}