/* Bottom bar */
.sd-slide::after {
  content: var(--bottom-bar-content);
  text-align: center;
  font-size: 1vw;
  color: var(--sd-heading-color);
  font-family: var(--cover-font);
  height: 1.5vw;
  width: 100%;
  position: absolute;
  background-color: var(--sd-primary-color);
  z-index: -1;
  bottom: 0;
  left: 0;
}

/* Cover slide */
.cover-slide {
  background-image: var(--cover-img);
  background-position: top left;
  background-size: contain;
  background-repeat: no-repeat;
  font-family: var(--cover-font);
  padding-left: 50%;

  h1 {
    color: var(--sd-heading-color-dark);
  }
}

.cover-slide::before {
  content: "";
  background-color: var(--sd-background-color);
  top: -80%;
  left: 55%;
  width: 100%;
  height: 200%;
  position: absolute;
  z-index: -1;
  box-shadow: 0 0 10px var(--color-bg-alternate);
  transform: rotate(188deg);
}

/* Speakers slide */
.speaker-slide {
  display: flex;
  flex-direction: row;
  padding: 0;
}

.speaker-slide > div {
  height: 100%;
}

.speaker-slide .left-text {
  position: relative;
}

.speaker-slide .left-text::before {
  content: "";
  background-color: var(--sd-primary-color);
  position: absolute;
  top: -10px;
  left: 0;
  width: 200px;
  height: 200%;
  transform: rotate(-8deg);
}

.speaker-slide .left-text p {
  font-family: var(--speaker-font);
  font-size: 8vh;
  transform: rotate(-90deg);
  position: absolute;
  margin: 0;
  left: -50px;
  bottom: 130px;
  color: var(--sd-heading-color-light);
  -webkit-text-stroke: var(--sd-heading-color-dark) 1px;
}

.speaker-slide .content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
  padding: 30px 30px 30px 250px;
}

.speaker-slide .content p {
  margin: 0;
  text-align: left;
}

.speaker-name {
  font-size: 5vw;
  font-family: var(--speaker-font-title);
  color: var(--sd-heading-color-dark);
}

.job {
  color: var(--sd-primary-color);
  font-family: var(--speaker-font);
}

.refs {
  margin-top: 65px;
  color: var(--color-bg-main);
  list-style: none;

  li {
    padding-left: 1rem;
    text-indent: -0.7rem;
    margin: auto;
  }

  li::before {
    content: "🚨 ";
  }

  li.gitlab::before {
    content: "🦊 ";
  }

  li.r2devops::before {
    content: "🤖 ";
  }

  li.volcamp::before {
    content: "🌋 ";
  }
  li.speaker::before {
    content: "🎤 ";
  }
  li.formateur::before {
    content: "🧑‍🎓 ";
  }
  li.contributeur::before {
    content: "🏗️ ";
  }
  li.techwomenup::before {
    content: "🙋‍♀️ ";
  }
}

.social-networks {
  margin-top: 65px;
  color: var(--color-bg-main);
  list-style: none;

  li {
    padding-left: 1rem;
    text-indent: -0.7rem;
    margin: auto;
  }

  li::before {
    content: "🚨 ";
  }

  li.twitter::before {
    content: "🐦 ";
  }

  li.linkedin::before {
    content: "🟦 ";
  }

  li.github::before {
    content: "🐙 ";
  }

  li.blog::before {
    content: "✍️ ";
  }

  li.bluesky::before {
    content: "🦋 ";
  }
}

/* Chapter slide */
.chapter-slide {
  h1 {
    color: var(--sd-heading-color-dark);
    font-family: var(--cover-font);
  }
}

/* Slide with title */

.with-title-top {
  display: block;
  padding: 0;

  h1 {
    color: var(--sd-heading-color-light);
    -webkit-text-stroke: var(--sd-heading-color-dark) 1px;
    font-size: 5vw;
    background-color: var(--sd-primary-color);
    text-align: left;
    padding: 0.3vw 0 0.3vw 1vw;
  }

  h2 {
    margin: 0;
    margin-block: 0;
  }
}

/* Lists */
ul {
  list-style: none;
}

li::before {
  content: var(--li-icon);
  padding-right: 20px;
  text-indent: -1.3vw;
}

li {
  margin: 1.5vw 0;
}

/* Last slide */
.last-slide {
  h1 {
    color: var(--cover-color);
    font-family: var(--cover-font);
  }
}

/** Markdown code */
code {
  background-color: var(--code-bg-color);
  color: var(--code-font-color);
  padding-left: 5px;
  padding-right: 5px;
}

/** Level 2 items in list */
ul li ul {
  li::before {
    content: var(--li-l2-icon);
    padding-right: 20px;
    text-indent: -1.3vw;
  }
  li {
    font-size: var(--sd-l2-text-size);
    line-height: var(--sd-l2-text-line-height);
    color: rgb(101, 101, 101);
  }
}

.bottom-center {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);

  img {
    border: 4px solid var(--cover-color);
    box-sizing: unset;
  }
}

.top-right {
  position: absolute;
  right: 2vw;
  top: 15vh;
  img {
    border: 4px solid var(--cover-color);
    box-sizing: unset;
  }
}

.bottom-right {
  position: absolute;
  right: 2vw;
  bottom: 2vh;
}

.bottom-left {
  position: absolute;
  left: 2vw;
  bottom: 5vh;
}

.logos-row {
  display: flex;
  gap: 2em; /* space between images */
  align-items: center;
  justify-content: center;
}