:root{
  --menu-active-color: rgb(181,18,27);
  --menu-hover-color: rgb(233,29,39);
  --black-main: rgb(15,15,15);
  --transparent: rgba(15,15,15, 0.7);
  --subtle-gray: #6c757d;
}

body{
  background-color: var(--black-main);
}

header{
  background-color: var(--transparent);
}

@media screen and (min-width: 768px) {
.main-container{
  padding: 0px 25px;
}
}

@media screen and (min-width: 992px) {
.main-container{
  padding: 0px 50px;
}
}

@media screen and (min-width: 1200px) {
.main-container{
  padding: 0px 100px;
}
}

@media screen and (min-width: 1400px) {
.main-container{
  padding: 0px 150px;
}
}

.main-container{
  min-height: 100vh;
}


/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--menu-active-color);
/* border-radius: 20px; */
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: white;
}