/* static/css/baseInteractive.css */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: #2A7B9B;
background: linear-gradient(180deg, rgba(42, 123, 155, 1) 0%, rgba(17, 27, 92, 1) 100%);
  font-family: sans-serif;
  overflow-x: hidden; /* Specific to slide.html */
  overflow-y: hidden; /* Specific to slide.html */
}

.interactive-container {
  margin: 0 auto; /* Specific: Center on mobile */
  aspect-ratio: 3 / 2; /* Specific */
  position: relative;

  margin: 0; /* Default, can be overridden by specific CSS if needed (e.g. margin: 0 auto) */
  border-radius: 0;
  

  overflow: hidden;
  width: 100vw; /* Overrides base width */
  height: 100vh;
  max-width: 100vw; /* Ensure it takes full viewport width */
  max-height: 100vh; /* Ensure it takes full viewport height */
  
  /* height, max-height, aspect-ratio, background-color should be in specific files */
}

@media (min-width: 1150px) {
  .interactive-container {
    max-width: 900px;
    margin: 4rem auto; /* A more general desktop margin, can be overridden */
    border-radius: 12px;
    box-shadow: 0px 0px 33px 10px rgba(0,0,0,0.6);
    height: auto; /* Common override for 100vh on mobile */
    max-height: none; /* Good general override */
    aspect-ratio: 3 / 2; /* Common desktop aspect ratio */
  }
}