@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

body {
  margin: 0;
}

.container {
  position: relative;
  height: 100vh;
  font-family: Lora, serif;
  color: white;
  
  h1 {
    margin: 0;
    font-size: 250%;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-shadow: 0 2px 2px black;
  }
  
  h3 {
    margin: 0;
    letter-spacing: 0.2em;
    text-shadow: 0 2px 2px black;
  }
  
  .page-title {
    position: absolute;
    left: 4em;
    top: 2em;
    z-index: 1;
  }

  .slideshow {
    $slide-bgs: url('https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg'),
      url('https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg'),
      url('https://i.loli.net/2020/01/06/hJnwRiWvgCcXoAr.png'),
      url('https://i.loli.net/2019/11/03/RtVq2wxQYySDb8L.jpg'),
      url('https://i.loli.net/2020/01/06/OF6PzWyrwM31ldi.jpg');

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;

      &:first-child {
        z-index: 0;
      }

      @for $i from 1 through length($slide-bgs) {
        &:nth-child(#{$i}) {
          background: nth($slide-bgs, $i) center / cover no-repeat;
        }
      }

      .slide-title {
        position: absolute;
        top: 40vh;
        left: 2em;
      }
    }
  }

  // bars for page transition
  .bars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;

    .bar {
      flex: 1;
      background: #111;
      transform: scaleY(0);
      transform-origin: top;
    }
  }

  // dots for navigation
  .nav-dots {
    position: absolute;
    left: 2em;
    bottom: 4em;
    z-index: 1;
    display: flex;
    margin: 0;
    list-style-type: none;

    .dot {
      width: 1em;
      height: 1em;
      margin: 1em;

      a {
        position: relative;
        display: block;
        height: 1em;
        line-height: 1em;

        &::before {
          position: absolute;
          content: "";
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 50%;
        }

        &:hover::before {
          background: rgba(255, 255, 255, 0.6);
        }

        &.active::before {
          background: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
}