body {
  background: url(../img/background.png) no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #FDF9EB;
}

.navbar {
  background: #1c1007d3;
}

.navbar.scrolled {
  background: #1B1007;
  padding: 10px 0;
  box-shadow: 0 4px 15px #462a13;
}

.navbar-toggler {
  border: none !important;
}

.nav-link {
  color: whitesmoke;
  margin-right: 12px;
}

.nav-link.active {
  color: goldenrod !important;
  font-weight: 500;
}

.nav-link:hover {
  color: goldenrod !important;
}

.text-darkgold {
  color: #654C19;
}

.hero {
  background: url(../img/hero-lg-full.png) no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
  overflow: hidden;
  height: 100vh;
  display: flex;
}

.hero-content .font-forum {
  font-weight: 800 !important;
  font-size: 32px;
  text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.9);
}

.hero-content h1 {
  font-size: 54px;
  letter-spacing: 2px;
  text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.8);
}

.hero-content .dan {
  font-size: 42px !important;
  color: #f9e7a7;
}

.hero-brand {
  color: white;
  text-shadow: 5px 5px 8px rgba(0, 153, 255, 0.5);
}

.motto {
  color: #fff7da;
  width: 50%;
  margin: 20px 0px;
}

.btn-hero {
  text-decoration: none;
  background: linear-gradient(180deg,
      #CC9933 0%,
      #663300 100%);
  border: none;
  width: 225px;
  color: whitesmoke;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.text-cream {
  color: #ffefb6;
}






/* End CSS */