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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* Changed from height: 100% */
  background-color: #000000;
  overflow: hidden;
  margin: 0; /* Ensured */
  padding: 0; /* Ensured */
}

#twitch-embed {
  position: relative; /* Important for positioning iframe and overlay links */
  aspect-ratio: 1024 / 768; /* Maintain 4:3 aspect ratio */
  /* max-width: 100vw;    (Removed for simplification) */
  /* max-height: 100vh;   (Removed for simplification) */
  width: 100vw;         /* Try to fill viewport width */
  height: 100vh;        /* Try to fill viewport height */
  overflow: hidden;    /* Contain the iframe */
  /* Add a fallback background for the embed area if needed */
  /* background-color: #111; */ /* Example fallback */
}

#twitch-embed iframe {
  width: 100%;
  height: 100%;
  display: block; /* Removes potential small space under iframe */
  border: none; /* Remove default iframe border */
}

.embed__link-one {
  position: absolute;
  top: 13%;
  left: 28%;
  width: 8.5%;
  height: 21%;
  z-index: 1200;
  cursor: pointer;
}

.embed__link-two {
  position: absolute;
  bottom: 13%;
  right: 20%;
  width: 15%;
  height: 20%;
  z-index: 1200;
  cursor: pointer;
}

.embed__link-three {
  position: absolute;
  top: 15%;
  left: 55%;
  transform: translateX(-50%);
  width: 1%;
  height: 1%;
  z-index: 1200;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  #twitch-embed {
    aspect-ratio: unset; /* Allow the container to fill mobile screen's aspect ratio */
    /* width & height are 100vw/100vh from main rule, overflow:hidden also from main rule */
  }

  #twitch-embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto; /* Override general rule's width: 100% */
    height: auto; /* Override general rule's height: 100% */
    min-width: 100%; /* Ensure iframe is at least as wide as its container */
    min-height: 100%; /* Ensure iframe is at least as tall as its container */
    aspect-ratio: 1024 / 768; /* Maintain the video's native 4:3 aspect ratio */
    /* display: block; and border: none; are inherited from the general iframe rule */
  }

  .embed__link-one {
    top: 36%;
    left: 17%;
    width: 13%;
    height: 9%;
  }

  .embed__link-two {
    bottom: 32%;
    right: 5%;
    width: 22%;
    height: 9%;
  }

  .embed__link-three {
    top: 15%;
    left: 55%;
    transform: translateX(-50%);
    width: 1%;
    height: 1%;
  }
}

@media screen and (max-width: 755px) {
  .embed__link-one {
    top: 29%;
    left: 17%;
    width: 13%;
    height: 14%;
  }

  .embed__link-two {
    bottom: 23%;
    right: 5%;
    width: 23%;
    height: 12%;
  }
  
  .embed__link-three {
    top: 15%;
    left: 55%;
    transform: translateX(-50%);
    width: 1%;
    height: 1%;
  }
}

@media screen and (max-width: 650px) {
  .embed__link-one {
    top: 32%;
    height: 12%;
  }

  .embed__link-two {
    bottom: 26%;
    height: 10%;
  }
  
  .embed__link-three {
    top: 15%;
    left: 55%;
    transform: translateX(-50%);
    width: 1%;
    height: 1%;
  }
}

@media screen and (max-width: 600px) {
  .embed__link-one {
    top: 35%;
    height: 10%;
  }

  .embed__link-two {
    bottom: 29%;
  }
  
  .embed__link-three {
    top: 15%;
    left: 55%;
    transform: translateX(-50%);
    width: 1%;
    height: 1%;
  }
}

@media screen and (max-width: 480px) {
  .embed__link-one {
    top: 37%;
  }

  .embed__link-two {
    bottom: 34%;
    right: 5%;
    height: 7%;
  }
  
  .embed__link-three {
    top: 15%;
    left: 55%;
    transform: translateX(-50%);
    width: 1%;
    height: 1%;
  }
}

@media screen and (max-width: 390px) {
  .embed__link-one {
    top: 39%;
    height: 7%;
  }

  .embed__link-two {
    bottom: 36%;
    right: 7%;
    height: 6%;
  }
  
  .embed__link-three {
    top: 15%;
    left: 55%;
    transform: translateX(-50%);
    width: 1%;
    height: 1%;
  }
}

@media (orientation: landscape) {
  .embed__link-one {
    top: 1%;
    height: 40%;
  }

  .embed__link-two {
    bottom: 0%;
    height: 40%;
  }
  
  .embed__link-three {
    top: 15%;
    left: 55%;
    transform: translateX(-50%);
    width: 1%;
    height: 1%;
  }
}