/* Ensure the body and html take up the full viewport height and remove default margins */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Hide scrollbars on the main page */
}

:root {
    --primary-color: #C62828;   /* red */
    --secondary-color: #FFCE1B; /* yellow */
}

/* The container should cover the entire viewport */
.holder {
  position: relative; /* Establishes a positioning context for children */
  width: 100%;
  height: 100vh; /* 100% of the viewport height */
}

/* The iframe should fill the entire container */
.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 1; /* Place the iframe below the overlay */
}

/* The overlay should be positioned over the iframe */
.overlay {
  position: absolute;
  top: 10; /* Positioned at the top edge of the container */
  right: 25; /* Positioned at the left edge of the container */
  /* You can set specific dimensions or let content define size */
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 0px;
  font-size:2em;
  z-index: 10; /* Place the overlay above the iframe (higher z-index) */
}
  
a {
  color: var(--secondary-color);
  text-decoration: none;
}

@media only screen and (max-width: 900px) {
.overlay {
  position: absolute;
  top: 2; /* Positioned at the top edge of the container */
  right: 2; /* Positioned at the left edge of the container */
  /* You can set specific dimensions or let content define size */
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 0px;
  color: white;
  font-size:2em;
  z-index: 10; /* Place the overlay above the iframe (higher z-index) */
}
}