$ColorBlack : #343541;

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  // scroll start;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &:is(.light)::-webkit-scrollbar-thumb {
    background: rgba(217, 217, 227, .8);
    border-radius: 30px;

    &:hover {
      background: rgba(236, 236, 241, 1);
    }
  }

  &:is(.dark)::-webkit-scrollbar-thumb {
    background: rgba(86, 88, 105, 1);
    border-radius: 30px;

    &:hover {
      background: rgba(172, 172, 190, 1);
    }
  }

  //scroll end

  &:is(.light) {
    // body background
    background: white;

    .currentColor {
      color: $ColorBlack;
    }
  }

  &:is(.dark) {
    // body background
    background: rgba(52, 53, 65, 1);

    .currentColor {
      color: #ECECF1;
    }
  }
}

.main-grid {
  display: grid;
  grid-template-columns: 260px auto;

  @media screen and (max-width:767px) {
    grid-template-columns: 100%;
  }
}