/*********************************************************************************
/*
/* scroll to top
/*
/* https://www.youtube.com/watch?v=wLPIwZdo0gM
/*
/********************************************************************************/

#smoothup {
  position: fixed;
  bottom: 10px;
  right: 35px;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 2;
  cursor: pointer;
  padding: 5px;
}

#smoothup.fade-in {
  opacity:1;
}

#smoothup svg {
  width: 38px;
  height: 38px;
  color: var(--scroll-up-background); 
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  mix-blend-mode: difference;
}

#smoothup svg:hover {
  color: var(--scroll-up-background-hover); 
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  text-decoration: none;
}

/************************************************************************************/
/*
/* custom scrollbars
/*
/* https://www.digitalocean.com/community/tutorials/css-scrollbars
/*
/************************************************************************************/

/* works on Firefox */

* {
  scrollbar-width: thin;
  scrollbar-color: #777 transparent;
}

/* works on Chrome, Edge, and Safari */

*::-webkit-scrollbar {
  width: 12px;
}

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

*::-webkit-scrollbar-thumb {
  background-color: #777;
  border-radius: 20px;
  border: 3px solid White;
}