@import url(https://fonts.googleapis.com/css?family=Bangers);

/* https://getbootstrap.com/docs/5.0/examples/heroes/ */
.fringe-divider {
    height: 2.5rem;
    background-image: url("https://www.transparenttextures.com/patterns/subtle-grey.png");
    border: solid rgba(0, 0, 0, .25);
    border-width: 1px 0;
    box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, .4), inset 0 0.125em 0.5em rgba(0, 0, 0, .25);
}

.blueverse {
    /* background-color: rgb(61, 133, 198); */
    background-color: rgb(115, 159, 199);
}

.redverse {
    background-color: rgb(204, 0, 0);
}

.flashback {
    background-color: rgb(61, 121, 141);
}

.potential-future {
    background-color: rgb(166, 166, 166);
}

.amberverse {
    background-color: rgb(241, 194, 50);
}

.future {
    background-color: rgb(127, 127, 127);
}

.cardImageShadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.footer-border {
    border-bottom: 0.06rem solid #878a8d !important;
}

.navbar-border {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav-dropdown-indicator-basic {
    border: solid rgba(0, 0, 0, .25);
}

.lsd-title {
    text-transform: uppercase;
    font-family: Bangers;
    -webkit-text-fill-color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 1px;
    text-shadow: 0px 2px 2px #808080;
}

.change-text0 {
  animation: fontChange0 1.5s infinite,
                textShadowObserverFont0 1.5s infinite;
}

@keyframes fontChange0 {
  0% {
    font-family: 'Montserrat', sans-serif;
  }
  1% {
    font-family: 'Montserrat', sans-serif;
  }
  50% {
    font-family: 'OBSERVER-REG';
  }
  61% {
    font-family: 'Montserrat', sans-serif;
  }
  65% {
    font-family: 'OBSERVER-REG';
  }
  71% {
    font-family: 'Montserrat', sans-serif;
  }
  100% {
    font-family: 'OBSERVER-REG';
  }
}


/* https://codemyui.com/crt-screen-text-flicker-animation-in-pure-css/ */
@keyframes textShadowObserverFont0 {
  0% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  1% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  44% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  49% {
    text-shadow: 1px 0 0 #000000, -3px 0 0 #000000;
  }
  51% {
    text-shadow: 1px 0.5px 2px #000000, -1px -0.5px 2px #000000;
  }
  52% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  61% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  64% {
    text-shadow: 1px 0 0 #000000, -3px 0 0 #000000;
  }
  66% {
    text-shadow: 1px 0.5px 2px #000000, -1px -0.5px 2px #000000;
  }
  67% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  95% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  99% {
    text-shadow: 1px 0.5px 2px #000000, -1px -0.5px 2px #000000;
  }
  100% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
}

.change-text1 {
  animation: fontChange1 1.5s infinite,
                textShadowObserverFont1 1.5s infinite;
}

@keyframes fontChange1 {
  0% {
    font-family: 'Montserrat', sans-serif;
  }
  24% {
    font-family: 'OBSERVER-REG';
  }
  25% {
    font-family: 'Montserrat', sans-serif;
  }
  26% {
    font-family: 'Montserrat', sans-serif;
  }
  75% {
    font-family: 'OBSERVER-REG';
  }
  86% {
    font-family: 'Montserrat', sans-serif;
  }
  90% {
    font-family: 'OBSERVER-REG';
  }
  96% {
    font-family: 'Montserrat', sans-serif;
  }
}

@keyframes textShadowObserverFont1 {
  20% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  24% {
    text-shadow: 1px 0.5px 2px #000000, -1px -0.5px 2px #000000;
  }
  25% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  25% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  26% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  69% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  74% {
    text-shadow: 1px 0 0 #000000, -3px 0 0 #000000;
  }
  76% {
    text-shadow: 1px 0.5px 2px #000000, -1px -0.5px 2px #000000;
  }
  77% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  86% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
  89% {
    text-shadow: 1px 0 0 #000000, -3px 0 0 #000000;
  }
  91% {
    text-shadow: 1px 0.5px 2px #000000, -1px -0.5px 2px #000000;
  }
  92% {
    text-shadow: 0px 0 0 #000000, 0px 0 0 #000000;
  }
}

@keyframes shakeAnimation {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake {
    -webkit-animation-name: shakeAnimation;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.fringe-divider-barbed-wire0 {
    height: 5.5rem;
    background-image: url("../assets/img/barbedwire.png");
}

.fringe-divider-barbed-wire1 {
    height: 5.5rem;
    background-image: url("../assets/img/barbedwireflipped.png");
}

.subsection-header {
    border-bottom: 0.1rem solid #aeb0b2 !important;
}

.glatterflug {
}

.glatterflug-close {
  position:absolute;
     top:0;
     right:0;
}