:root {
    --bg-color: #0a0a0a;
    --panel-color: #1a1a1a;
    --accent-color: #ff3e3e;
}
/* start */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.media-container {
    position: relative;
    /* This makes it responsive: */
    width: 100%;
    max-width: 1080px; /* Limits size on desktop */
    height: 100vh;      /* Fills mobile screen height */
    
    background: #000;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 'cover' ensures the video fills the portrait screen without black bars, 
       even if the phone aspect ratio varies slightly */
    /* object-fit: cover;  */
    object-fit: inherit; 
    transition: opacity 0.7s ease;
}

/* Ensure buttons scale with the container */
[id^="btn"] {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    /* Use percentages for button positions in your style.css 
       so they stay in the right spot on different screen sizes */
}

.hidden { 
    display: none !important;
    opacity: 0; 
    pointer-events: none; 
}
/* end */

/* body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    display: flex; flex-direction: column; align-items: center; 
    background: var(--bg-color); color: #fff; margin: 0;
}

.media-container {
    position: relative;
    width: 1080px;
    height: 1920px;
    background: #000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;    
}

video { 
    position: absolute; width: 100%; height: 100%; 
    object-fit: cover; transition: opacity 0.7s ease; 
}

.hidden { opacity: 0; pointer-events: none; display: none;} */

.show {
  display: block;
}

#btnPlay {
  z-index: 11 !important;
  position: absolute;
  width: 44%;
  height: 9.5%;
  bottom: 24.3%;
  left: 28%;
}

#btnStart {
  position: absolute;
  width: 33%;
  height: 7.5%;
  bottom: 17%;
  left: 35%;
}

#btnBrain {
  position: absolute;
  width: 14.4%;
  height: 7.5%;
  top: 39%;
  left: 21.5%;
}

#btnImmunity {
  position: absolute;
  width: 15.4%;
  height: 7.5%;
    top: 39%;
    left: 43%;
}

#btnGut {
  position: absolute;
  width: 16%;
  height: 7.5%;
  top: 39%;
  left: 63%;
}

#btnFinal {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
}