*,
*::before,
*::after {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  text-transform: capitalize;
  color: #fff;
  &.section1 {
    background: #006c67;
  }
  &.section2 {
    background: #23ce6b;
  }
  &.section3 {
    background: #62c370;
  }
  &.section4 {
    background: #15616d;
  }
}

// D2D7DF
body aside {
  position: fixed;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  nav {
    position: relative;
  }
  a {
    display: block;
    height: 40px;
    width: 4px;
    background-color: #f4f4f44f;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
    span {
      color: #fff;
      margin-left: 1rem;
      opacity: 0;
      display: none;
    }
    &.active {
      span {
        display: block;
        animation: spyActive 2s ease forwards;
      }
    }
    &.show {
      span {
        display: block;
        opacity: 1;
      }
    }
    &:not(:last-child) {
      margin-bottom: 1rem;
    }
  }
  .spy {
    height: 20px;
    width: 20px;
    background-color: #fff;
    position: absolute;
    top: 0%;
    left: 0%;
    transition: 300ms ease-in-out all;
    border-radius: 99px;
    cursor: pointer;
  }
}

@keyframes spyActive {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    display: none;
  }
  1% {
    display: block;
  }
  50% {
    opacity: 1;
    transform: translateX(0%);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
