.scrollytelling-slides-module {
  width: 100%;
}

/* Overwrites we need to apply because the Theme we are using is a big too eager in specifying certain CSS tags */
.scrollytelling-slides-module h1 {
  font-size: 2.5rem;
  color: #ffffff;
}

.scrollytelling-slides-module svg {
  stroke: unset;
  fill: none;
}

.scrollytelling-slides-module p {
  font-size: 1.2rem;
}

/* */

.panel {
  position: relative;
  height: 100vh;

  font-size: 1.2rem;
  font-weight: lighter;
  color: #ffffff;

  /* border: 4px solid yellow; */
  /* background-color: pink; */
}

.panel--hidden {
  display: none;
}

.panel--1 {
  height: 400vh; /* 3x the height of the viewport to allow enough space for scrolling through all textblock elements .*/
}

.panel--3 {
  height: 400vh; /* 3x the height of the viewport to allow enough space for scrolling through all textblock elements .*/
}

.panel--4 {
  height: 300vh; /* 3x the height of the viewport to allow enough space for scrolling through all textblock elements .*/
}

/* */

.slide {
  width: 100%;
  max-width: 1400px;
  height: 100vh;
  padding: 0 32px 0 32px;
  margin: 0 auto;

  /* background-color: green; */
}

/* */

.slide__text-container {
  position: relative;
}

.slide__text-block {
  position: absolute;
  /* padding: 0 64px 0 64px; */

  /* Render the textblock elements in the center of the viewport */
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  justify-content: center;

  /* border: 20px solid red;*/
}

.slide__text-block h1, p {
  /* text-align: left; */
}

.slide__text-block-paragraph--highlighted {
  font-weight: 800;
}

/* VISUALS */

.slide__visual-container {
  padding: 24px;


  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;

  /* border: 4px solid white; */
}

/*
.xxxslide__visual {
  padding: 24px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;

  border: 4px solid red;
}
*/

.slide__visual-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* border: 4px solid yellow; */
}


/* */

.text-center {
  text-align: center;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}




/* */

.xxslide__text-block-paragraph--highlighted {
  width: 100%;
  margin-top: 12px;
  display: inline-flex;
  position: relative;
  isolation: isolate;
}


.glowing-box {
  width: 100%;
  margin-top: 12px;
  display: inline-flex;
  position: relative;
  isolation: isolate;
}


.glowing-box .content {
  padding: 10px;
  margin: 18px;

  font-weight: bolder;

  display: flex;
  flex-direction: column;
  flex-grow: 1;

  border-radius: 8px;
  backdrop-filter: blur(22px);
  background: transparent;
  justify-content: center;
  align-items: center;
}

.glowing-box .inlay {
  position: absolute;
  background: #5135c1;
  filter: blur(1px);
  border-radius: 8px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.glow {
  border-radius: 6px;
  inset: -3px;
  overflow: hidden;
  position: absolute;
  transition: opacity 0.8s ease-out;
  will-change: opacity;
}

.glow-bg {
  animation: spin 3s linear infinite;
  aspect-ratio: 1;

  /*
  background: linear-gradient(#EFE263, #5135c1); 
  xxbackground: linear-gradient(#ffff, #5135c1); /*
  */

  /*
  --color1: oklch(91.45% 0.1665 98.47);
  --color2: oklch(80% 0.3 200);
  background: conic-gradient(in oklch longer hue, var(--color1), var(--color2));
  */


  --color: oklch(91.45% 0.1665 98.47);
  background: linear-gradient(in oklch longer hue, var(--color), var(--color));


    /* background: linear-gradient(#e66465, #9198e5); */

  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  width: 150%;
}

@keyframes spin {
  to {
    rotate: 1turn;
  }
}

/*
  Media Queries
  X-Small	None	< 576px
  Small	sm	≥ 576px
  Medium	md	≥ 768px
  Large	lg	≥ 992px
  Extra large	xl	≥ 1200px
  Extra extra large	xxl	≥ 1400px
*/

@media only screen and (max-width: 575px) {
  .scrollytelling-slides-module {
    display: none;
  }
}

@media only screen and (min-width: 576px) {

  .slide {
    display: flex;
    flex-direction: row;
  }

  .slide__text-container {
    height: 100vh;
    width: 45%;
  }

  .slide__visual-container {
    height: 100vh;
    width: 55%;
  }

  .slide__text-block {
    height: 100%;
    width: 100%;
  }

  .slide__visual {
    height: 100%;
    width: 100%;

    border: 5px solid red;
  }

  .slide.slide--horizontal {
    flex-direction: column;
  }

  .slide.slide--horizontal > .slide__text-container  {
    width: 100%;
    height: 40%;

    /* border: 1px solid yellow; */
  }

  .slide.slide--horizontal > .slide__visual-container  {
    width: 100%;
    height: 60%;

    /* border: 1px solid yellow; */
  }


  /*.slide.slide--horizontal > .slide__text-container > .slide__text-block {
    border: 1px solid red;
    height: 100%;
  }*/
}