:root {
  --white: #FFFFFF;
  --orangeRed: #D33C27;
  --paleGold: #FCB356;
  --teal: #50A3AA;
  --darkTeal: #375960;
  --black: #121212;
}

/* Custom Static Image Background */
.static-bg {
  background-image: url(../images/Valheim_Background.jpg);
  height: 100%;

  /* For parallax scrolling effect (Static) */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* -------------------------------------------------------------------------------------------- */
/* Basic Font Style Changes */

p, h2, li {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: 3px 3px 5px rgb(0, 0, 0)
}

h1 {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-style: normal;
}

/* -------------------------------------------------------------------------------------------- */
/* Custom Highlighted Text Colours */

.red-text {
  color: var(--orangeRed);
}
.yellow-text {
  color: var(--paleGold);
}
.yellow-text a {
  color: var(--paleGold);
  text-decoration: none;
}
.yellow-text a:hover {
  color: var(--orangeRed);
}

/* -------------------------------------------------------------------------------------------- */
/* Custom Nav Bar & Footer Style Changes */

.custom-navbar {
  background: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 255, 0));
  height: 125px;
}

.custom-footer {
  background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 255, 0));
  height: 125px;
}

.navbar-brand img, .nav-item a {
  color: var(--white);
  filter: drop-shadow(3px 3px 3px rgb(0, 0, 0));
}
.navbar-brand img:hover {
  filter: drop-shadow(0 0 5px #7f180a);
}
.nav-item a:hover {
  color: var(--paleGold);
}

.custom-active {
  color: var(--orangeRed) !important;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* -------------------------------------------------------------------------------------------- */
/* Fade Behaviour Styles */

/* Fade Up Behaviour */
.custom-fadeUp {
  opacity: 0;
  transform: translateY(75px);
  transition: all 800ms;
}
.custom-fadeUp.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------------------------- */
/* Custom Container Styles */

.custom-container {
  background-color: rgba(18, 18, 18, 0.85);
  box-shadow: 0 5px 30px #111111;
  /* RGBA value had to be used to make the background have less opacity without it affecting everything inside the container */
}

.custom-container2 {
  background-color: rgba(18, 18, 18, 0.50)  !important;
  /* RGBA value had to be used to make the background have less opacity without it affecting everything inside the container */
}

/* -------------------------------------------------------------------------------------------- */
/* Image Card Buttons Custum Styles & Hover Effects */

.custom-button {
  overflow: hidden;
  --bs-border-color: var(--darkTeal);
  box-shadow: 0 0 10px var(--black);
  & img {transition: transform 500ms ease-out; } /* Smooth transition */
  & div {transition: transform 500ms ease-out; } /* Smooth transition */
}
.custom-button div {
  overflow: hidden;
  font-family: "Spectral", serif;
  background-color: #131313;
}

.custom-button:hover {
  box-shadow: 0 0 15px var(--teal);
}
.custom-button:hover img {
  transform: scale(1.075);
}
.custom-button:hover div {
  transform: scale(1.075);
  text-shadow: 0 0 10px #b6f2ff;
  /* text-shadow used for slight text glow effect */
}

/* -------------------------------------------------------------------------------------------- */
/* Custom Styles for Modals */

.modal-content {
  --bs-modal-bg: #131313;
  --bs-modal-border-color: var(--orangeRed);
}

.modal-header button { /* Styles for modal 'close' buttons */
  --bs-btn-bg: #131313;
  --bs-btn-border-color: var(--paleGold);
  font-family: "Spectral", serif;
}
.modal-header button:hover {
  --bs-btn-bg: #131313;
  border-color: var(--darkTeal) !important;
}

/* -------------------------------------------------------------------------------------------- */
/* Custom Styles & Hover Effects For Accordians */

.accordion-button:hover {
  text-shadow: 0 0 10px #b6f2ff;
}
.accordion-item:has(.accordion-button:not(.collapsed)) {
  border-bottom: 0;
}
.accordion-collapse.show {
  border-bottom: 1px solid #ffffff;
}

/* -------------------------------------------------------------------------------------------- */
/* Custom Styles & Hover Effects for Button Links on Home Page */

.custom-buttonHover {
  background: linear-gradient(rgb(82, 82, 82), rgb(0, 0, 0)) !important;
  font-family: "Cinzel Decorative", serif !important;
  border: 1px solid var(--paleGold) !important;
  box-shadow: 0 0 10px var(--black);
  transition: all 300ms ease-in;
}

.custom-buttonHover:hover {
  background: linear-gradient(rgb(65, 65, 65), rgb(0, 0, 0)) !important;
  border: 1px solid var(--orangeRed) !important;
  text-shadow: 0 0 10px #b6f2ff;
  box-shadow: 0 0 25px var(--paleGold);
}
.custom-buttonHover span {
  display: inline-block;
  transition: transform 300ms ease;
}
.custom-buttonHover:hover span{
  transform: scale(1.075);
}

/* -------------------------------------------------------------------------------------------- */
/* Other Random Styles */

.drop-shadow { /* Drop shadow effect for site logo */
  filter: drop-shadow(5px 5px 3px rgb(0, 0, 0));
}

.img-darken { /* Slightly darkens the carousel images  */
  filter: brightness(70%);
}

/* Customizes all bullets in a list */
li::marker {
  color: var(--paleGold);
  font-size: 1.2em;
}
.custom-subList li::marker {
  color: var(--orangeRed);
}

/* -------------------------------------------------------------------------------------------- */
/* MEDIA QUERIES */
/* -------------------------------------------------------------------------------------------- */

/* FOR MOBILE */

@media (max-width: 575px) {

  .navbar-nav li {
    scale: 0.5;
    margin: 0rem;
  }
  /* Changes size of Page Logo */
  .custom-fadeOut img {
    scale: 0.65;
  }
  p {
    scale: 0.95;
    margin: 1rem;
  }
  li {
    scale: 0.8;
  }
  .custom-button {
    margin-top: 1rem;
  }

}