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

/* Cover slide */
.cover-slide {
  display: block;
  background-image: var(--cover-img);
  background-position: center;
  background-size: contain;
  font-family: var(--cover-font);

  h1 {
    color: var(--cover-color);
    font-size: 100px;
    backdrop-filter: blur(20px);
    padding: 20px;
  }
}

/* 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: white;
}

.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);
}

.job {
  color: var(--color-job);
  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.metal::before {
	  content: " 🤘";
  }
  li.linux::before {
	  content : " 🐧";
  }
  li.codelover::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.desktop::before {
    content: "💻 ";
  }

  li.ia::before {
    content: "🧠 ";
  }

  li.bike::before {
    content: "🚵 ";
  }

  li.runner::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.github::before {
    content: "🐙 ";
  }

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

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

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

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

  h1 {
    color: var(--sd-heading-color);
    font-size: 5vw;
    background-color: var(--sd-primary-color);
    text-align: left;
    padding: .3vw 0 1vw 1vw;
  }

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

  p  {
    margin-left: 1vw;
    margin-right: 1vw;
  }
}

/* Slide with 2 columns*/
.two-cols {
  display: flex;
  width: 100%;
  height: 87%;
}

.a-column {
  flex: 50%;
}

.vertical-align {
  margin: auto;

  img {
    height: 75vh;
    width: 75vh;
  }
}

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

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

li {
  margin: 2vw 0;
}

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

/* Slide with a title and an image */
.image-and-title {
  h1 {
    font-family: var(--cover-font);
    color: var(--sd-primary-color);
  }
}

/** 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);
  }
}

/* Timeline */
.timeline {
  body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f9;
  }

  span {
    color: rgb(21, 92, 40);
    font-size: 50px;
    font-weight: bold;
  }

  ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    height: 70%;
    font-size: 30px;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) calc(50% - 5px),
        rgba(192, 192, 192, 1) calc(50%),
        rgba(0, 0, 0, 0) calc(50% + 5px));
  }

  li {
    display: flex;
    flex-direction: column;
    position: relative;

    i {
      position: absolute;
      width: 1rem;
      height: 1rem;
      border-radius: 100%;
      border: 5px solid #fff;
      background-color: rgba(0, 0, 0, 0.5);
      top: calc(50% - 1rem + 2.5px);
      left: calc(50% - 1rem);
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }

    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: end;
      height: 100%;
      margin: 2rem 2rem;

      b {
        text-align: center;
      }
    }

    div:last-child {
      justify-content: start;
    }
  }

  li::before {
    content: "";
  }

  li:nth-child(even) {
    flex-direction: column-reverse;

    span {
      color: rgb(46, 150, 121);
    }

    div {
      justify-content: start;
    }

    div:last-child {
      justify-content: end;
    }


  }
}

.sd-qrcode {
  svg {
    width: 300px;
  }
}