html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Hide scrollbars for the main document */
    background: #0f172a;
    scrollbar-width: none; /* For Firefox */
}

/* For Webkit browsers (Chrome, Safari) */
html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}

#slide-iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden; /* Explicitly hide scrollbars for the iframe content */
    scrollbar-width: none; /* For Firefox within iframe */
}

/* For Webkit browsers within iframe */
#slide-iframe::-webkit-scrollbar {
    display: none;
}

.fullscreen-toggle {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(248, 250, 252, 0.3);
  background: rgba(6, 9, 24, 0.65);
  color: #fbbf24; /* --accent color from slides */
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0; /* Hidden by default */
  transform: scale(0.85);
  pointer-events: none; /* Disables interaction when hidden */
  transition: opacity 0.3s ease, transform 0.3s ease,
    background 0.3s ease, border-color 0.3s ease;
  z-index: 100;
}

/* Make button partially visible when cursor is near */
.fullscreen-toggle.is-near {
  opacity: 0.75;
  transform: scale(1);
  pointer-events: auto;
}

/* Make button fully visible on direct hover */
.fullscreen-toggle:hover,
.fullscreen-toggle:focus-visible {
  opacity: 1;
  background: rgba(251, 191, 36, 0.25);
  border-color: rgba(251, 191, 36, 0.7);
}

/* In fullscreen mode, similar behavior: hidden by default, visible when near/hovered */
:fullscreen .fullscreen-toggle {
    opacity: 0;
    pointer-events: none;
}

:fullscreen .fullscreen-toggle.is-near {
    opacity: 0.75;
    pointer-events: auto;
}

:fullscreen .fullscreen-toggle:hover,
:fullscreen .fullscreen-toggle:focus-visible {
    opacity: 1;
}