@font-face {
  font-family: Allura;
  src: url('fonts/Allura-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Roboto;
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Roboto;
  src: url('fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: ShadowsIntoLight;
  src: url('fonts/Birthstone-Regular.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

h1 {
  font-family: ShadowsIntoLight;
  font-size: 3rem;
  letter-spacing: 1px;
}

h5 {
  font-family: ShadowsIntoLight;
  font-size: 2rem;
  letter-spacing: 1px;
}

.initial{
  width: 10%;
}

main {
  color: #333 !important;
}


.logo {
  width: 30%;
}

.bg-primary {
  background-color: #7bb3eb !important;
}

.rotate {
  animation: 22s linear infinite spin;
  display: block;
  margin: 70px auto 0
}


@keyframes spin {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.btn,
.card {
  border-radius: 0rem !important;
}

.section-0 {
  height: 100vh;
  background-image: url(media/zeitung_scroll-over.png);
  background-attachment: fixed;
  background-size: cover;
}

.komd {
  width: 20%;
}

/** Größere Monitore **/
@media only screen and (min-width: 570px) {
  #mobil {
    display: none;
  }
}

/** Kleinere Monitore **/
@media only screen and (max-width: 600px) {

  #desktop,
  #spinner,
  .box {
    display: none;
  }

  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 576px) {
  #mobil{
    display:none;
  }
}

.img-fluid{
  width: 50%;
  
}

body{
  background-color: #EFE7DA;
}

.section-0 {
  height: 100vh;
  background-image: url(media/tuffieha-bay2.jpg);
  background-attachment: fixed;
  background-size: cover;
}


.btn-primary {
  --bs-btn-color: #3D211A;
  --bs-btn-bg: #e0dcd2;
  --bs-btn-border-color: #e0dcd2;
  --bs-btn-hover-color: #00000094;
  --bs-btn-hover-bg: #e0dcd2;
  --bs-btn-hover-border-color: #e0dcd2;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #00000094;
  --bs-btn-active-bg: #e0dcd2;
  --bs-btn-active-border-color: #e0dcd2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #00000094;
  --bs-btn-disabled-bg: #e0dcd2;
  --bs-btn-disabled-border-color: #e0dcd2;
}

a {
  color: #e0dcd2;
  text-decoration: underline;
}

.nav-link {
  color: #e0d2d2;
}