body {
  background: #000;
}

.modal-open{
    overflow: hidden;
}
/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* track (background) */
::-webkit-scrollbar-track {
    background: #0a0a0a; /* deep black */
    border-radius: 10px;
}

/* thumb (the draggable part) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(200deg,
        #442f01 0%,
        #b97c09 20%,
        #d4ab41 50%,
        #b97c09 80%,
        #442f01 100%);
    border-radius: 10px;
    border: 2px solid #0a0a0a; /* gives spacing illusion */
}

/* hover effect */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(200deg,
        #5a3e02 0%,
        #d89a1a 20%,
        #ffd86a 50%,
        #d89a1a 80%,
        #5a3e02 100%);
}

.text-bg-gold-gradient {
  background: linear-gradient(200deg,
      #ffc57a 0%,
      #C79A2B 40%,
      #f5c66f 60%,
      #a87300 100%);

  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background-clip: text !important;
}

.text-bg-gold-gradient-hovered {
  display: inline-block;
  background: linear-gradient(200deg,
      #ffc57a 0%,
      #C79A2B 40%,
      #f5c66f 60%,
      #a87300 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* shadow around text only */
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.233),
    0 0 10px rgba(255, 255, 255, 0.144),
    0 0 15px rgba(255, 255, 255, 0.075);
}

.clickable {
  cursor: pointer;
}