/* GLOBAL RESET  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  background: #EDE9E6;
  overflow: hidden;
}

/* SCREENS */
.screen {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.hidden {
  display: none;
}
#start-screen {
  background-color: #5c5a59; 
}

/* STAGE */
#stage {
  position: relative;
  width: 100vw;       
  height: auto;        
  max-width: 1920px;   
  max-height: 100vh;   
  aspect-ratio: 16/9;  
  margin: 0 auto;     
  overflow: hidden;
  z-index: 1;
}

/* BACKGROUND & OVERLAYS */
#stage .bg,
#stage .fullscreen-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}
#stage .bg {
  z-index: -3;
}
#stage .fullscreen-img {
  z-index: -2;
}

/* UNIVERSAL BUTTON HOVER SCALE  */
#stage button {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform .2s;
}
#stage button:hover {
  transform: scale(1.04);
}

/* START BUTTON  */
#start-btn {
  position: absolute;
  left: 45%;  
  top: 87.0%;    
  width: 9.9%;   
  z-index: 2;
}
#start-btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* TOPIC BUTTONS */
.topic-btn {
  position: absolute;
  z-index: 2;
  width: 8.333%;  
}
.topic-btn img {
  width: 100%;
  height: auto;
  display: block;
}
.topic-btn[data-topic="feature"] {
  left: 31.484%;  
  top: 91.806%;   
}
.topic-btn[data-topic="stakeholder"] {
  left: 41.010%;
  top: 91.806%;
}
.topic-btn[data-topic="standardization"] {
  left: 50.568%;
  top: 91.806%;
}
.topic-btn[data-topic="research"] {
  left: 60.017%;
  top: 91.806%;
}
.topic-btn.selected::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(226, 219, 214, 0.6);
  border-radius: 8px;
  pointer-events: none;
}


/*HOME BUTTON */
.home-button {
  position: absolute;
  z-index: 2;
  left: 10.771%;   
  top: 92.315%;   
  width: 4.646%;  
}
.home-button img {
  width: 100%;
  height: auto;
  display: block;
}

/* HOVER DESCRIPTIONS */
.topic-hover {
  position: absolute;
  width: 250px;
  z-index: 3;
  pointer-events: none;
}

/* TOGGLE SWITCH POSITIONING */
.perspective-toggle-btn {
  position: absolute;
  z-index: 2;
  width: 4.427%; 
}

.perspective-toggle-btn[data-perspective="p1"] {
  left: 17.598%;
  top: 43.885%;
}
.perspective-toggle-btn[data-perspective="p2"] {
  right: 16.558%;
  top: 43.885%;
}
.perspective-toggle-btn[data-perspective="p3"] {
  left: 17.598%;
  bottom: 31.000%;
} 
.perspective-toggle-btn[data-perspective="p4"] {
  right: 16.558%;
  bottom: 31.000%;
}

/* TOGGLE SWITCH STYLING */
.perspective-toggle-btn .switch {
  width: 100%;
  display: block;
}

.switch {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 50px;
  aspect-ratio: 2.5/1;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #EDE9E6;
  transition: 0.4s;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid #9C7E7E
}

.slider:before {
  position: absolute;
  content: "";
  height: 80%;
  width: 30%;
  left: 7%;
  bottom: 10%;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #A7D7A7;
}

input:checked + .slider:before {
  transform: translateX(182%);
}