* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --wn-primary-color: #110d0d;
  --font-family: "Fira Sans","Helvetica","Arial",sans-serif;
}

a {
  color: inherit;
}
a:hover {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
}

body {
  background-color: var(--wn-primary-color);
  font-family: var(--font-family);
  color: #fff;
}

body.comming-soon {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  align-content: center;
  justify-content: center;
}

.comming-soon-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0.6;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.btn {
  border-radius: 0;
}

.btn-primary,
.btn-primary:hover {
  background: #fff;
  border-color: #fff;
  color: #000000;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  background: #000000;
  border-color: #000000;
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}


.btn-outline-primary {
  border-color: rgb(0, 168, 50);
  color:  rgb(0, 168, 50);
  border-width: 3px;
  border-radius: 1rem;
}


.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus {
  background:  rgb(0, 168, 50);
  border-color:  rgb(0, 168, 50);
  color: #fff;
  
  box-shadow: 0 0 0 0.2rem rgba(0, 168, 50, 0.5);
}


.navbarSchreiben {
  background: transparent;
  position: absolute;
  width: 100%;
  color: #fff;
}

.slothdaylogo2020 {
  width: 300px;
}

.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: #fff;
  text-align: center;
  line-height: 1.6;
  font-size: 1.1rem;
  font-weight: lighter;
  width: 60%;
  font-weight: 400;
  margin: 0 auto;
}
.title-hero {
  font-weight: bold;
  color: #f4b806;
}

@media (max-width: 992px) {
  .hero-content {
    width: 95%;
  }
}



.neon {
  text-align: center;
  border-radius: 8px;
  border: 3px solid rgb(0, 168, 50);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.neon-text {
  color: rgb(0, 168, 50);
  padding: 0;
  margin: 0;
}

.neon:hover {
  animation: border-flicker 2s linear forwards;
}



.neon:hover .neon-text {
  animation: text-flicker 2s linear forwards;
}

.neon:hover .first {
  animation: letter-flicker 3s linear infinite;
}

@keyframes text-flicker {
  2% { 
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  3% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  6% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  9% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  11% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  14% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  18% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  32% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  33% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  37% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  39% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  43% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  46% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  47% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  100% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
}

@keyframes letter-flicker {
    2% { 
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  3% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  6% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  9% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  11% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  14% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  18% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  32% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  33% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  37% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  39% {
    color: rgba(120, 0, 50, .5);
    text-shadow: none;
  }
  40% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
  100% {
    color: rgb(0, 168, 50);
    text-shadow: 0 0 15px rgb(0, 168, 50);
  }
}

@keyframes border-flicker {
  2% {
    border: 3px solid rgb(62, 244, 159);
    box-shadow: 0 0 15px -1px rgb(62, 244, 159), 
    0 0 12px -1px rgb(62, 244, 159) inset;
  }
  3% {
    border: 3px solid rgb(0, 40, 70);
    box-shadow: none;
  }
  5% {
    border: 3px solid rgb(62, 244, 159);
    box-shadow: 0 0 15px -1px rgb(62, 244, 159), 
    0 0 12px -1px rgb(62, 244, 159) inset;
  }
  6% {
    border: 3px solid rgb(40, 157, 102);
    box-shadow: none;
  }
  7% {
    border: 3px solid rgb(62, 244, 159);
    box-shadow: 0 0 15px -1px rgb(62, 244, 159), 
    0 0 12px -1px rgb(62, 244, 159) inset;
  }
  9% {
    border: 3px solid rgb(0, 40, 70);
    box-shadow: none;
  }
  13% {
    border: 3px solid rgb(62, 244, 159);
    box-shadow: 0 0 15px -1px rgb(62, 244, 159), 
    0 0 12px -1px rgb(62, 244, 159) inset;
  }
  16% {
    border: 3px solid rgb(0, 40, 70);
    box-shadow: none;
  }
  18% {
    border: 3px solid rgb(62, 244, 159);
    box-shadow: 0 0 15px -1px rgb(62, 244, 159), 
    0 0 12px -1px rgb(62, 244, 159) inset;
  }
  22% {
    border: 3px solid rgb(0, 40, 70);
    box-shadow: none;
  }
  34% {
    border: 3px solid rgb(62, 244, 159);
    box-shadow: 0 0 15px -1px rgb(62, 244, 159), 
    0 0 12px -1px rgb(62, 244, 159) inset;
  }
  36% {
    border: 3px solid rgb(0, 40, 70);
    box-shadow: none;
  }
  54% {
    border: 3px solid rgb(62, 244, 159);
    box-shadow: 0 0 15px -1px rgb(62, 244, 159), 
    0 0 12px -1px rgb(62, 244, 159) inset;
  }
  100% {
    border: 3px solid rgb(62, 244, 159);
    box-shadow: 0 0 15px -1px rgb(62, 244, 159), 
    0 0 12px -1px rgb(62, 244, 159) inset;
  }
}