.logo{
  width: 35%;
}

.bg-primary{
  background-color: rgb(77, 0, 0) !important;
}

@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
}

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

main{
  color: #333 !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/backflip.jpg);
  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, #einleitung { display:none;
      }
    
    h1{
font-size: 2rem;

}
    }

  @media (min-width: 576px){



  }

  .btn {
    background-color: rgb(77, 0, 0) !important;
    border-color: rgb(77, 0, 0) !important;
  }

  .profil {
    width: 650px !important;
    height: 650px !important;
  }