* {
  font-family: Inter,sans-serif !important;
}

/**/

.font1 {
  font-size: 18px;
  font-weight: 700;
}

.font2 {
  font-size: 15px;
  font-weight: 300;
  color: #d4d4d4;
}

.font3 {
  font-size: 15px;
  font-weight: 300;
}

.font4 {
  font-size: 15px;
  font-weight: 700;
}

.title {
  font-size: 25px;
  font-weight: 700;
}

/**/

.signin {
  border: #4e4e4e85 solid 1px;
  border-radius: 8px;
  transition: .2s ease-in-out;
  color: #5c5c5c;
}

.signin:hover {
  border: #6e6d6d solid 1px;
  color: #b1b1b1;
}

.signup {
  border: #c18be0 solid 1px;
  border-radius: 8px;
  background-color: #c18be0;
  transition: .2s ease-in-out;
}

.signup:hover {
  border: #9e63c0 solid 1px;
  background-color: #9e63c0;
}

/**/

.wya-bg {
  border: #33333385 solid 1px;
  background-color: #2b2b2c2d;
}

.list-bg {
  border: #33333385 solid 1px;
  background-color: #0e0e0e;
}

.purple-bg {
  border: #894faa solid 1px;
  background-color: rgba(158, 99, 192, 0.1);
  transition: .2s ease-in-out;
}

.premium-bg {
  border: #c18be0 solid 1px;
  background-color: rgba(158, 99, 192, 0.1);
  transition: .2s ease-in-out;
}

.purple-bg:hover {
  border: #c18be0 solid 1px;
  background-color: rgba(158, 99, 192, 0.1);
}

.selected {
  background-color: #c18be021;
  color: #c18be0;
  border-radius: 12px;
}

.button {
  transition: .2s ease-in-out;
}

.button:hover {
  background-color: #2b2b2c62;
  border-radius: 12px;
}

.button2 {
  border: #c18be0 solid 1px;
  border-radius: 8px;
  background-color: #c18be0;
  transition: .2s ease-in-out;
}

.button2:hover {
  border: #9e63c0 solid 1px;
  background-color: #9e63c0;
}

.button3 {
  border: #ffffff solid 1px;
  background-color: #ffffff;
}

.input-bg {
  border: #33333385 solid 1px;
  background-color: #2b2b2c2d;
}

.input-bg:focus {
  border: #c18be0 solid 1px;
  background-color: #c18be021;
}


/**/

.icons {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 5px;
  background-color: #c18be0;
}

/**/

.glow-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  min-width: auto;
  z-index: 100;
  opacity: .4;
  pointer-events: none;
}

.glow-bg img {
  max-width: 100%;
  height: auto;
}

.glow-bg-2 {
  position: fixed !important;
  bottom: 0 !important;
  left: -400px !important;
  min-width: auto;
  z-index: 100;
  opacity: .4;
  pointer-events: none;
}

.glow-bg-2 img {
  transform: scale(-1);
}

/**/

.track {
  animation: scroll 30s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-87.5%);
  }
}