*,
::before,
::after{
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  font-family: Verdana, Geneva, Tahoma, sans-serif sans-serif;
  color: white;
  box-sizing: border-box;
}

a{
  color: white;
}
a:hover{
  text-decoration: none;
  color: grey; 
}

p{
  font-weight: 200;
}

header {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  color: white;
  font-weight: 200;
}

body{
  background-color: black;
}

/* Classes */

.abschnitt{
  min-height: 100vh;
  padding-top: 10vh;
}
.subheading{
  font-size: 2rem;
  margin: 5rem;

  font-weight: 300;
  text-align: center;
}
.sub-subheading{
  text-align: center;
  margin-bottom: 5rem;
}
/* Navbar */
.nav-style{
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter:blur(2rem) ;
}
.navbar-nav > li{
  margin-right: 2.2rem;
  margin-left: 2.2rem;
  justify-content: center;

}
.nav-link{
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif sans-serif;
  font-weight: 200;
  font-size: 1rem;
}
.nav-link:hover{
  color: gray;
}

.navbar-toggler {
  width: 2rem;
  height: 2rem;
  position: relative;
  transition: .5s ease-in-out;
    
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
  border: 0;
  position: relative;
}

.toggler-icon {
  display: block;
  position: absolute;
  height: 0.05rem;
  width: 100%;
  background: white;
  border-radius: 0.05rem;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

/* State when the navbar is collapsed */
.navbar-toggler.collapsed .top-bar {
  position: absolute;
  top: 7px;
  transform: rotate(0deg);
}

.navbar-toggler.collapsed .bottom-bar {
  position: absolute;
  top: 13px;
  transform: rotate(0deg);
}

/* when navigation is clicked */
.navbar-toggler .top-bar {
  top: inherit;
  transform: rotate(135deg);
}

.navbar-toggler .bottom-bar {
  top: inherit;
  transform: rotate(-135deg);
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  align-items: flex-start;
}  

.card {
  --padding: 1rem;
  background: black;
  border: 1px solid rgb(0, 0, 0);
  border-radius: .25rem;
  overflow: hidden;
  opacity: 1;
}


.card-header {
  font-size: 1.5rem;
  padding: var(--padding);
  padding-bottom: 0;
  margin-bottom: .5rem;
  font-weight: 300;
  text-align: center;
}

.card-header.card-image {
  padding: 0;
  overflow: hidden;
}

.card-header.card-image > img {
  display: block;
  width: 100%;
  max-height: 200px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  transition: 200ms transform ease-in-out;
}

.card:hover > .card-header.card-image > img {
  transform: scale(1.025);
}

.card-body {
  font-size: .9rem;
  padding: 0 var(--padding);
  font-weight: 200;
  height: 17.5vh;
  text-align: center;
}
@media screen and (max-width: 780px){
.card-body{
  height: auto;
}
}

.card-footer {
  margin-top: 1rem;
  padding: var(--padding);
  padding-top: 0;
}

.btn {
  color: white;
  border: none;
  font-size: 1rem;
  font-weight: 200;
  padding: .5em .75em;
  border-radius: .25em;
  width: 100%;
  border: 0.05rem solid transparent;
}

.btn:hover, .btn:focus {
  background: none;
  color: white;
  border: 0.05rem solid rgb(128, 128, 128);
}

/* Modals */

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; 
  height: 100vh; 
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter:blur(2rem) ;
  color: white;
}

.modal-content {
  background-color: transparent;
  margin: auto;
  padding: 20px;
  font-weight: 200;
  border: none;
  width: 50%;
}
@media screen and (max-width: 900px){
  .modal-content {
    width: 80%;
  }
}

.modal-image{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.line-container{
  width: 30%;
  align-items: center;
  display: block;
  margin: auto;
  margin-bottom: 2rem;
}

/* IDs */
#title{
  z-index: 100;
  padding-top: 30vh;
  position: absolute;
  width: 100%;
  display: block;
  text-align: center;
}

#title-img{
  width: 25vh;
  margin: auto;
  transform-origin: center;
}

#title-text{
  width: 45vh;
  margin: auto;
}

#title-subline{
  font-size: 1.5rem;
}

#kontakt{
  justify-content: center;
  text-align: center;
}
#impressum{
  padding-top: 10vh;
}
#saas{
  margin-bottom: 2rem;
}
#p1Bild{
  object-fit:contain;
}

@media screen and (max-width: 1000px) and (min-width: 700px){
  #rfooter{
    padding-top: 3em;
  }
}
.l1{
  margin-top: -6em;
}

/* particles.js container */
#particles-js{
  width: 100%;
  height: 100%;
  background-color: black;
/*   background-image: url('/assets/coinB.png'); */
  background-size: cover;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
}