/* ══════════════════════════════════════════════════════════════════
   GEOMAR AI SEMINAR — Layout & structural CSS only.
   Typography and colours are handled by dist/theme/white.css.
   ══════════════════════════════════════════════════════════════════ */

/* ── Chapter divider slides (Chpt. 1 / Chpt. 2) ── */
.chapter-divider-slide {
  text-align: left !important;
}
.chapter-divider-slide .chapter-number-label {
  font-size: 0.5em;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 0.2em 0;
}
.chapter-divider-slide .chapter-main-title {
  font-size: 2.2em;
  line-height: 1.1;
  margin-top: 0;
  text-transform: none;
}
.chapter-divider-slide .chapter-subtitle-placeholder {
  font-size: 0.75em;
  opacity: 0.6;
  margin-top: 0.6em;
  font-style: italic;
}

/* ── Chapter label used on content slides ── */
.ch-label {
  display: block;
  font-size: 0.45em;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.5em;
}

/* ── Math spacing ── */
.enclosing { margin: 0 3px; }

/* ══════════════════════════════════════════════════════════════════
   D3 / SVG CHART LAYOUT CONTAINERS
   ══════════════════════════════════════════════════════════════════ */
.scatterCircle { mix-blend-mode: normal; }

#dataIntroContainer {
  display: grid;
  grid-template-columns: 50% 50%;
  justify-items: center;
}

#featuresImg {
  position: fixed;
  width: 200px; height: 150px;
  top: 250px; left: -30px;
}

#nnSvg {
  position: fixed;
  height: 600px; width: 800px;
  top: 100px; left: 100px;
}

#dropOutContainer,
#dropoutContainer,
#softmaxContainer,
#bayesContainer {
  width: 100%; height: 100%;
  font-size: 15px;
  display: grid;
  grid-template-rows: 90% 10%;
  place-items: center;
}

#softmaxContainer2,
#dropoutContainer2,
#bayesContainer2 {
  width: 100%; height: 100%;
  font-size: 15px;
  display: grid;
  grid-template-columns: 25% 25% 35% 15%;
  grid-template-rows: 40% 60%;
  place-items: center;
}

#softmaxNetworkG1, #dropoutNetworkG1, #bayesNetworkG1 {
  width: 90%; height: 90%; font-size: 10px;
  grid-column: 1 / 4; grid-row: 1 / 2;
}
#softmaxButtons, #dropoutButtons, #bayesButtons {
  width: 90%; height: 90%; font-size: 10px;
  grid-column: 4 / 5; grid-row: 1 / 2;
  display: grid;
  justify-items: center;
}
#softmaxButtons   { grid-template-rows: 50% 50%; }
#dropoutButtons,
#bayesButtons     { grid-template-rows: 33% 33% 33%; }

#softmaxNetworkG2, #dropoutNetworkG2, #bayesNetworkG2 {
  width: 90%; height: 90%; font-size: 10px;
  grid-column: 1 / 3; grid-row: 2 / 3;
}
#softmaxNetworkG3, #dropoutNetworkG3, #bayesNetworkG3 {
  width: 90%; height: 90%; font-size: 10px;
  grid-column: 3 / 5; grid-row: 2 / 3;
}

#ucTestContainer {
  width: 100%; height: 100%;
  font-size: 15px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 90% 10%;
  place-items: center;
}
#ucTestSlideG1 {
  width: 90%; height: 90%; font-size: 10px;
  grid-column: 1 / 2; grid-row: 1 / 2;
}
#ucTestSlideG2 {
  width: 90%; height: 90%; font-size: 10px;
  grid-column: 2 / 3; grid-row: 1 / 2;
}
#horizontalSlider {
  width: 70%; height: 25%;
  grid-column: 1 / 3; grid-row: 2 / 3;
}