:root {
  --red: #ee4d2d;
  --yellow: #ffa604;
  --blue: #16b6fb;
  --size: 300px;
  --dark: #42355e;
  font-family: Futura, sans-serif;
}

* {
  padding: 0;
  margin: 0;
}

@mixin badge($pos: "left") {
  background: currentColor;
  text-align: center;
  padding: 2px 6px;
  @if ($pos == "left") {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  } @else {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  position: absolute;
  top: 7px;

  & > span {
    color: white;
  }
  &::before {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -0.1875rem;
    border-top: 0.1875rem solid currentColor;
    @if ($pos == "left") {
      right: 0;
      border-right: 0.1875rem solid transparent;
    } @else {
      left: 0;
      border-left: 0.1875rem solid transparent;
    }
    filter: brightness(40%);
  }
}

.toc {
  background-image: linear-gradient(
    to right,
    #42355e calc(100% - 3px),
    transparent 0
  );
  color: white;
  padding-top: 2rem;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  width: 400px;
}

.section {
  position: relative;
  padding: 2.5rem 0 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  &:nth-child(3n + 1) {
    color: var(--red);
  }
  &:nth-child(3n + 2) {
    color: var(--yellow);
  }
  &:nth-child(3n) {
    color: var(--blue);
  }
  & > span {
    color: white;
  }
}
.badge {
  @include badge;
  align-self: flex-end;
}
.item {
  font-size: 0.8rem;
  color: white;
  display: block;
  line-height: 2;
  position: relative;
  text-decoration: none;
  border-bottom: unset;
  cursor: pointer;
  padding-right: 2rem;
  &:not(:first-child) {
    margin-top: .2rem;
  }
  & > .item {
    margin-left: 1rem;
    position: relative;
    &:not(:first-child) {
      margin-top: 0;
    }
  }
  
}
.chapter {
  margin-right: 0.5rem;
  position: absolute;
  left: -1rem;
}
.title {
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease-in;
  position: relative;
  &:hover {
    border-color: rgba(255, 255, 255, 0.8);
  }
}
.cfp {
  margin-left: 1rem;
}
.cfpActive {
  color: rgba(255, 255, 255, 0.7);
}
.cfpInactive {
  color: rgba(255, 255, 255, 0.2);
}
.home {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
}