.woodelf-page {
  background-color:  #242424; color: #ddd; background-image: url(woodelf_bg.png); background-repeat: no-repeat; background-size: center/contain;
}
.nerrun-page {
  background-color:  #242424; color: #ddd; background-image: url(nerrun_bg.png); background-repeat: repeat-x; background-size: center/cover;
}
body.index {
  background-color: #eee;
}
.raceblock {
  background-color: #242424; max-width: 900px; min-width: 500px;
}

.nerrun-left {
  background: rgba(255, 255, 255, 0) url(nerrun_m.png) right center/contain no-repeat; min-height: 350px;
}
.nerrun-right {
  background: rgba(255, 255, 255, 0) url(nerrun_f.png) left center/contain no-repeat;  min-height: 350px;
}
.woodelf-left {
  background: rgba(255, 255, 255, 0) url(woodelf_m.png) right center/contain no-repeat; min-height: 350px;
}
.woodelf-right {
  background: rgba(255, 255, 255, 0) url(woodelf_f.png) left center/contain no-repeat;  min-height: 350px;
}
.race-text {
  padding-left: 40px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px;
  text-align: center; text-indent: 25px; font-family: 'Noto Serif', serif; font-size: 0.95em;
}
.race-icon {
  font-family: 'Noto Sans Glagolitic', sans-serif; font-size: 2.6em; padding-bottom: 15px;
  padding-left: 45px; padding-right: 10px;
  color: #eeeeee;
}
.woodelf-icon {
  text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #0f0, 0 -10px 20px #ff8000, 0 -18px 40px #070;
}
.nerrun-icon {
  text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;
}
.race-title {
  font-family: 'Noto Serif', serif; font-size: 1.6em; vertical-align: text-bottom;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
.landing-page {
  color: #eeeeee;
  height: 600px; 
  padding-top: 10%;
  background: #eee url(index-landscape.png) left top/cover no-repeat;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  animation: animatedBackground 100s linear infinite alternate;
}
.landing-icon {
  text-align: center;
  font-family: 'Noto Sans Glagolitic', sans-serif; font-size: 140px; line-height: 100px;
  margin: 0px;
  text-shadow: 0 0px 20px #ff8000, 0 0px 40px #F00, 2px 2px 2px rgba(206,89,55,0);
}
.landing-title {
  text-align: center; 
  font-family: 'Noto Serif', serif; font-size: 5em; 
  text-shadow: 0 0 10px #FFFFFF;
}
.landing-subtitle {
  text-align: center; font-family: 'Noto Serif', serif; font-size: 1.6em;
  text-shadow: 0 0 10px #FFFFFF;
}
.landing-text {
  padding-left: 40px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px;
  text-indent: 25px; font-family: 'Noto Serif', serif;
  max-width: 60vw; margin-top: 30px;
}
.landing-text h4 {
  font-size: 1.8em;
}
.landing-text p {
  margin-top: 20px;
}
.outlet {
  background-color: #242424; 
  box-shadow: 3px 2px 87px -34px rgba(0,0,0,1) inset;
  -webkit-box-shadow: 3px 2px 87px -34px rgba(0,0,0,1) inset;
  -moz-box-shadow: 3px 2px 87px -34px rgba(0,0,0,1) inset;
}
.outlet p {
  padding: 30px; margin: 10px 50px 10px 50px; color: #eee;
  font-size: 0.9em; font-style: italic; text-align: center;

  --b: 1px;   /* thickness of the border */
  --c: #eee;   /* color of the border */
  --w: 30px;  /* width of border */
  

  border: var(--b) solid #0000; /* space for the border */
  --_g: #0000 90deg,var(--c) 0;
  --_p: var(--w) var(--w) border-box no-repeat;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p);
}

.inlet {
  background-color: #ccc; padding-top: 40px; padding-bottom: 30px;
  box-shadow: 3px 2px 87px -34px rgba(0,0,0,1) inset;
  -webkit-box-shadow: 3px 2px 87px -34px rgba(0,0,0,1) inset;
  -moz-box-shadow: 3px 2px 87px -34px rgba(0,0,0,1) inset;
}
.inlet p {
  padding: 30px;  color: #242424;
  font-size: 0.9em; font-style: italic; text-align: center;

  --b: 1px;   /* thickness of the border */
  --c: #242424;   /* color of the border */
  --w: 30px;  /* width of border */
  

  border: var(--b) solid #0000; /* space for the border */
  --_g: #0000 90deg,var(--c) 0;
  --_p: var(--w) var(--w) border-box no-repeat;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p);
}


.navbar {
  background: none;
}

.oc-button svg {
  fill: #eee; width: 40px; height: 40px; margin: 5px;
  filter: drop-shadow(0 0 10px #555);
}

.offcanvas {
  background-image: url(offcanvasbg.jpg); background-size: 1400px;
  -webkit-box-shadow: -15px 0px 20px -3px rgba(0,0,0,0.6);
  -moz-box-shadow: -15px 0px 20px -3px rgba(0,0,0,0.6);
  box-shadow: -15px 0px 20px -3px rgba(0,0,0,0.6);
}

.offcanvas-header {
  padding: 10px 0px 10px 0px;
}

.offcanvas a {
  font-family: 'Noto Serif', serif; margin-left: 35px; font-size: 1.5em;
}

.dropdown-menu, .dropdown-item {
  background: none; border: none;
}
.dropdown-item {
  width: 90%;
}
.dropdown-item:hover, .nav-link:hover {
  background: rgba(0,0,0,0.04); 
}
.dropdown-item:focus, .dropdown-item:active {
  color: #242424; background: none;
}

.vault-background {
  background: url(hvault.jpg) center center/cover no-repeat; min-width: 100vw; min-height: 100vh; background-color: black;
  display: flex;
  align-items: center;
}
@keyframes vaultFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes vaultFadeIn {
  0% {
    opacity: 0;
    transform: scale(1, 0.1);
  }
  50% {
    transform: scale(1, 0.1);
  }
  60% {
    transform: scale(1, 1);
  }
  90% { 
    opacity: 0.9;
  }
  92% { 
    opacity: 0.0;
  }
  94% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
  }
}
@keyframes vaultFlicker {
  0% { opacity: 0.9; }
  50% { opacity: 0.9; }
  52% { opacity: 0.2; }
  54% { opcaity: 0.9; }
  88% { opacity: 0.9; }
  90% { opacity: 0.2; }
  92% { opacity: 0.9; }
  94% { opacity: 0.9; }
  95% { opacity: 0.2; }
  96% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

.vault-dark {
  background: url(hvaultdark.jpg) center center/cover no-repeat; min-width: 100vw; min-height: 100vh;
  z-index: 99;
  animation: vaultFadeOut 1s ease-in 3s 1 normal forwards;
}
.glow {
  opacity: 0; padding-bottom: 0px; padding-left: 5vw; padding-top: 15px;
  display: block; text-align: center; width: 100vw;
  color: white; font-size: 5.5em; font-family: "CountDown"; 
  -webkit-animation: glow 3s ease-in-out infinite alternate;
  -moz-animation: glow 3s ease-in-out infinite alternate;
  animation: vaultFadeIn 1s ease-in 3.5s 1 normal forwards, glow 3s ease-in-out infinite alternate; 

}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #009694, 0 0 40px #009694, 0 0 50px #009694, 0 0 60px #009694, 0 0 70px #009694;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #4dfffc, 0 0 40px #4dfffc, 0 0 50px #4dfffc, 0 0 60px #4dfffc, 0 0 70px #4dfffc, 0 0 80px #4dfffc;
  }
}

@font-face {
    font-family: "CountDown";
    src: url("countdown.ttf");
}

@media (max-width: 1024px) {
    .landing-text {
      max-width: 100vw; font-size: 1.1em;
    }
    .inlet, .outlet {
      max-width: 100vw;
    }
    .vault-background  {
      background: url(vault.jpg) center center/cover no-repeat;
    }
    .vault-dark {
      background: url(vaultdark.jpg) center center/cover no-repeat;
    }
    .glow {
      padding-left: 0px; padding-bottom: 30px; font-size: 4.5em; opacity: 0.9;
      animation: glow 3s ease-in-out infinite alternate; 
    }
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #242424; /* Black background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  opacity: 1; /* Initial opacity */
  transition: opacity 1s ease; /* Fade transition */
}