*,
*::after,
*::before {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  scroll-behavior: smooth;
}

body {
  margin: 0%;
}

body 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;
  }
}

// Nav

body header {
  background-color: #fff;
  position: fixed;
  width: 100%;
  .navWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    padding: 1.5rem;
    margin: 0% auto;
    .logo {
      font-size: 1rem;
      font-weight: bold;
      span {
        color: #62c370;
      }
    }
    nav {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      column-gap: 2rem;
      align-items: center;
      text-align: center;
      position: relative;
      a {
        color: #121212;
        text-decoration: none;
        cursor: pointer;
        z-index: 1;
        transition: 300ms ease-in-out;
        &.active {
          color: #fff;
        }
      }
      .spy {
        position: absolute;
        top: 0%;
        left: 0%;
        height: 20px;
        width: 50px;
        background-color: #123412;
        transition: 300ms ease-in-out;
        transform: scale(1.3);
        border-radius: 0.1rem;
      }
    }
  }
}
