@font-face {
  font-family: "CFHalloween";
  src: url("/fonts/CFHalloween-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --icon-container-bg: #eb691c;
  --icon-container-hover-bg: #661f10;
}

html,
body {
  background-color: #661f10;
}

.light-blue-text {
  color: #eb691c;
}

.halloween-font {
  font-family: "CFHalloween";
}

.top-nav {
  background-color: #eb691c;
  min-height: 52px;
}

/* icons and titles */

nav i {
  color: var(--icon-container-bg);
}

.nav-link:hover {
  background-color: var(--icon-container-bg);
}

.nav-link:focus {
  background-color: var(--icon-container-hover-bg) !important;
  color: white;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--icon-container-bg);
}

.container h2,
.container h2 i {
  color: var(--icon-container-bg);
}

.article h4,
.article h4 i {
  color: var(--icon-container-hover-bg);
}

.article h4 img {
  fill: red;
}

@media (min-width: 1175px) {
  #navbar_top {
    padding-left: 15px;
  }
}

.hero {
  height: 35vw;
  background-image:
    url(../../img/halloween_template/HalloweenRoger3.png),
    url(../../img/halloween_template/spiderweb-right-top.png),
    url(../../img/halloween_template/hero_bg.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 35%, 50%, cover;
  background-position:
    92% bottom,
    calc(100% + 50px) -30px,
    center center;
  max-height: 950px;
  /* background: #01619b; */
}

#top-container-other {
  background-color: #eb691c;
  text-align: center;
}

.message {
  background: #661f10;
  background-image: url(../../img/halloween_template/spiderweb-left-bottom.png);
  background-repeat: no-repeat;
  background-size: 500px;
  background-position: -20px 90%;
  max-height: 950px;
}

.message-text {
  font-size: 60px;
}

@media (max-width: 2100px) {
  .hero {
    background-size: 35%, 50%, cover;
    background-position:
      92% bottom,
      calc(100% + 50px) -30px,
      center center;
  }
}

@media (max-width: 992px) {
  .hero {
    background-size: 35%, 20%, cover;
    background-position:
      92% bottom,
      calc(100%) -3px,
      center center;
  }
  .message {
    background: #661f10;
    background-image: url(../../img/halloween_template/spiderweb-left-bottom.png);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position: -20px 90%;
    max-height: 950px;
  }
  .message-text {
    font-size: 50px;
  }
}

.services svg {
  fill: white;
}

.services .icon-container {
  background-color: transparent;
  background-image: url(../../img/halloween_template/pumpkin-btn.png);
  background-size: 120%;
  background-repeat: no-repeat;
  background-position: center;
  border: none;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.services .icon-container svg {
  filter: drop-shadow(0 0 10px black);
}

.services .icon-container .icon-text {
  scale: 0.9;
  margin-bottom: -2px;
  margin-top: 20px;
  text-shadow: 0 3px 3px #661f10;
}

.services .icon-container:hover,
.services .icon-container:focus {
  background-color: transparent;
  background-image: url(../../img/halloween_template/pumpkin-btn.png);
  box-shadow: none;

  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.55));
}

.services {
  border-bottom: solid 20px black;
}

#ccc-carousel {
  border-bottom: solid 20px #000;
}

.mission-stars {
  background-color: #eb691c;
}

.our-mission-section {
  background-color: #eb691c;
  color: white;
  padding: 80px 10px 60px 10px;
}

.subscribe-btn-section {
  background: #661f10 url(../../img/subscribe-background-pattern.png) repeat;
  background-size: 300px;
  background-blend-mode: soft-light;
  width: 100%;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  -webkit-animation: slide 50s linear infinite;
  overflow: hidden;
}

.yt-videos-section {
  background-color: black;
  color: white;
}

footer {
  background-color: #661f10;
}
footer .container {
  color: white;
  background:
    linear-gradient(
      45deg,
      rgba(102, 31, 16, 0.9) 0%,
      rgba(102, 31, 16, 0.9) 100%
    ),
    url(../../img/logo-seal.webp);
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: center;
  background-size: auto, 350px;
}