@import url("https://fonts.googleapis.com/css2?family=Kanit&display=swap");
.text-black {
  color: black !important;
}

.bg-black {
  background-color: black !important;
}

.bg-black-transparency {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.border-black {
  border-color: black !important;
}

.border-2px {
  border-width: 2px !important;
}

body {
  background: #2c3034;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(44, 48, 52, 0.5)), to(#24282c)), url("../img/bg.png");
  background: linear-gradient(180deg, rgba(44, 48, 52, 0.5) 0%, #24282c 100%), url("../img/bg.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: white;
  font-family: "Kanit", sans-serif;
}

a {
  color: white;
}

a:hover {
  color: white;
}

.navbar-top {
  background: #36353d;
  background: -webkit-gradient(linear, left top, left bottom, from(#36353d), color-stop(50%, #1f1e24), to(#151419));
  background: linear-gradient(180deg, #36353d 0%, #1f1e24 50%, #151419 100%);
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d6cfae 0%, #8c7f55 50%, #77674f 100%);
  border-top: 0px !important;
  border-right: 0px !important;
  border-bottom: 2px solid !important;
  border-left: 0px !important;
}

.navbar-top a,
.navbar-top :hover {
  color: white;
}

.navbar-bottom {
  background: #151419;
  background: -webkit-gradient(linear, left top, left bottom, from(#151419), color-stop(50%, #1f1e24), to(#36353d));
  background: linear-gradient(180deg, #151419 0%, #1f1e24 50%, #36353d 100%);
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d6cfae 0%, #8c7f55 50%, #77674f 100%);
  border-top: 2px solid !important;
  border-right: 0px !important;
  border-bottom: 0px !important;
  border-left: 0px !important;
}

.navbar-bottom a,
.navbar-bottom :hover {
  color: white;
}

.font-bronze {
  background: -webkit-linear-gradient(90deg, white 0%, #e0e2e4 50%, #989ea3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.font-gold {
  background: -webkit-linear-gradient(90deg, #d6cfae 0%, #8c7f55 50%, #77674f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-gold {
  background: #77674f;
  background: -webkit-gradient(linear, left top, left bottom, from(#d6cfae), color-stop(50%, #8c7f55), to(#77674f));
  background: linear-gradient(180deg, #d6cfae 0%, #8c7f55 50%, #77674f 100%);
  color: white;
}

.btn-gold:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#d6cfae), color-stop(50%, #8c7f55), to(#77674f));
  background: linear-gradient(180deg, #d6cfae 0%, #8c7f55 50%, #77674f 100%);
  color: white;
}

.btn-black {
  background: #2e3136;
  background: linear-gradient(315deg, #2e3136 0%, #212225 100%);
  color: white;
}

.btn-black:hover {
  background: linear-gradient(315deg, #2e3136 0%, #212225 100%);
  color: white;
}

.highlight-border {
	padding: 2px;
	background: #77674f;
	background: linear-gradient(90deg,
			rgba(214, 207, 174, 1) 0%,
			rgba(140, 127, 85, 1) 50%,
			rgba(119, 103, 79, 1) 100%);
	border-radius: 2rem;
}

.highlight-border .highlight {
	background: rgb(46, 49, 54);
	background: linear-gradient(180deg, rgba(46, 49, 54, 1) 0%, rgba(33, 34, 37, 1) 100%);
	border-radius: 2rem;
}

.highlight-border .border-gradient {
	border-image-slice: 2;
	border-image-source: linear-gradient(to right, rgba(214, 207, 174, 1) 0%, rgba(140, 127, 85, 1) 25%, rgba(119, 103, 79, 1) 50%, rgba(140, 127, 85, 1) 75%, rgba(214, 207, 174, 1) 100%);
}

.btn-sign-in {
  background: #77674f;
  background: -webkit-gradient(linear, left top, left bottom, from(#d6cfae), color-stop(50%, #8c7f55), to(#77674f));
  background: linear-gradient(180deg, #d6cfae 0%, #8c7f55 50%, #77674f 100%);
  color: white;
}

.btn-sign-in:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#d6cfae), color-stop(50%, #8c7f55), to(#77674f));
  background: linear-gradient(180deg, #d6cfae 0%, #8c7f55 50%, #77674f 100%);
  color: white;
}

.bounce {
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  -o-animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-15px);
  }
  50% {
    opacity: 0.5;
  }
  60% {
    -webkit-transform: translateY(-7px);
  }
}
/*# sourceMappingURL=style.css.map */