@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css');

:root {
  --primary: #663a14;
  --secondary: #fad7b8;
  --accent: #d56c10;
  --text: #0e0701;
  --background: #fce7d4;
}

body {
  background-color: var(--background);
}

.btn-primary {
  background-color: #663a14;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #e6842e;
}

.navbar-brand {
  font-family: 'Satisfy', cursive;
  font-size: 30px;
}

.line {
  width: 100%;
  height: 30px;
  background-color: var(--secondary);
  margin: 0 auto;
}

.navbar {
  background-color: var(--background);
}

.dropdown-menu {
  background-color: var(--secondary);
}

.dropdown-item:hover {
  background-color: var(--primary);
  color: white;
}

.banner {
  width: 100%;
  height: 362px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgitQPHJDQP-GYomYVzOaaX6tht6e9eMF-ZSwcpZEAEYMn4MEXbnmM7zJ5QPw1VofLqfkYN4Cs9xTlByKHsrL-cMGHmBpY8gokiNZRSnDHX3JkY_7Q6OKzvIeykf4Mhfsxc1qCkLXnkmNyu5_Yfd4QYYZ5XEQX1lFLO1mPLKevpoWfK-OphphA_7Uy62O35/s6720/banner.webp);
  background-size: cover;
  background-position: center;
}

.banner-mail {
  width: 100%;
  height: 362px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw4xyTHrIs1tUilWteqSxKNwU9xn9HcKtM8AKdYCh03SW8-ZCLp6RgZVd5nMwAJgZBXyA7NFLp_VHfz348EOHAlVWNVWALf1DdaF4sCwR_nPFIC42cxHeo9un7wCzplwap47OqHporjnGq_mm9QDq6b9Rlcd3bEPFWrutANAEC694XeFC2fBwpbHhdrahJ/s3739/banner-mail.webp);
  background-size: cover;
  background-position: center;
}

.banner-waffles {
  width: 100%;
  height: 362px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP-MoyJJVSX_lPBK2j72YDJfJuEEcR4MOREBqLjt5eWWY7xM6uA-qSFkPboOozu-XPsYgv0p2Orc5T0D0QLABQG392uqwoiRrgR4LXb_3GzmGYuNnhdPNOZER_U5gFslBcAwotFN4HRDS4XVpLGTRH8pnh3K8vg1kq0YXaY1YOjjJmVWn_cajGmruniskK/s3627/waffles.webp);
  background-size: cover;
  background-position: center;
}

.banner-challange {
  width: 100%;
  height: 362px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkkCb3LGWcoIPIQjt-QBjBsmo-vblLLGWqFGg5izIHSN2p-7OyFYlwvvPRiM8oPZxxhlh_HDzus4NT6QWOa1u2bhIntt0uoB1aDCrg03suyn25DQjoRwC3nuu5o3BioqwYJ1W2puvjNbBVMmKdgZYaGTkJeTjMXxKrvmpeNLVP9l8Fm_nTV2U7eJzLsZPd/s4548/banner-challange.webp);
  background-size: cover;
  background-position: center;
}

.banner-about {
  width: 100%;
  height: 362px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimod3JwRvt82KQ14CyGvYLbqMLFFh1SJpnTZd1BM_thyphenhyphenMAy8hJTRc9PYrzgSJYP9HdRPMYDiy0OoFOPvCHjm4Lzq5ggh3x9midIYIT7sf76lo_T-eNPsWdOjxOVn8MpkE_Wmda_zk3rFd2uh_4zTd3FLzd8iJ4hpcYGwSDvooiHIaBcVkX0Gf3hCRa0oE_/s4654/banner-office.webp);
  background-size: cover;
  background-position: center;
}

.banner-content {
  height: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardA-title {
  padding-top: 75px;
}

.card-popular {
  margin-bottom: 15px;
}

.img-card-popular {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.img-card-recent {
  height: 250px;
  width: 100%;
  object-fit: cover;
}

.challange-bulanan {
  margin-top: 220px;
  display: flex;
  align-items: center;
  background-color: var(--secondary);
  color: var(--text);
  padding-left: 30px;
  max-height: 300px;
  border-radius: 10px;
  border: 3px solid #e5ccb6;
}

.imgchef-container {
  margin-left: auto;
}

.imgchef-container img {
  width: 80%;
  height: auto;
  margin-bottom: 100px;
}

@media (max-width: 1500px) {
  .imgchef-container {
    display: none;
  }
}

.cardB-title {
  padding-top: 90px;
}

.category-title {
  padding-top: 40px;
}

.card {
  background-color: #e5ccb6;
}

footer {
  margin-top: 100px;
  background-color: var(--secondary);
}

.disqus {
  margin-top: 10px;
  border-radius: 15px;
  background-color: white;
}

.introforum {
  margin-top: 50px;
  padding: 20px;
  border-radius: 15px;
  background-color: white;
}

.formct {
  margin-top: 50px;
  padding: 20px;
  border-radius: 15px;
  background-color: white;
}

.form-challange {
  margin-top: 50px;
  padding: 20px;
  border-radius: 15px;
  background-color: white;
}

.gschallange {
  margin-top: 30px;
  padding: 20px;
  border-radius: 15px;
  background-color: white;
}

.gschallange iframe {
  width: 100%;
  height: 400px;
}

.about-content {
  margin-top: 50px;
  padding: 20px;
  border-radius: 15px;
  background-color: white;
}

.about-map {
  margin-top: 50px;
  padding: 10px;
  border-radius: 15px;
  background-color: white;
}

.about-map iframe {
  width: 100%;
  height: 400px;
}

.articlesec-one {
  margin-top: 50px;
  padding: 20px;
  border-radius: 15px;
  background-color: white;
}

.articlesec-two {
  margin-top: 15px;
  padding: 20px;
  border-radius: 15px;
  background-color: white;
}

.articlesec-three {
  margin-top: 15px;
  padding: 20px;
  border-radius: 15px;
  background-color: white;
}

.articlesec-four {
  margin-top: 15px;
  padding: 20px;
  border-radius: 15px;
  background-color: var(--accent);
  border-right: var(--background) 7px solid;
}

.articlesec-four h2 {
  color: white;
  font-size: 50px;
  text-align: center;
  font-weight: 700;
}

.articlesec-five {
  margin-top: 15px;
  padding: 20px;
  border-radius: 15px;
  background-color: var(--primary);
  color: white;
}

.embedyt {
  margin-top: 15px;
  padding: 20px;
  border-radius: 15px;
  background-color: white;
}

.embedyt iframe {
  width: 100%;
  height: 720px;
}