p{margin:5px;}
h2{margin:7px;color:rgb(246, 246, 246);}
h3{margin:7px;text-align: center;color:gold}
body{
    background-color: rgb(39, 39, 39);
}
.container{
    display: block;
    max-width: 1200px;
    margin:auto;
    text-align: center;
}
.banner-container{
    display: block;
    max-width: 1200px;
}
.banner-container img{
    width: 95%;
    border-radius: 10px;
}
.arrow{
    display: flex;
}
.arrow-container {
    width: 25px;
    /* cubic-bezier-easing = sine / mehr Beispiele: https://easings.net/ */
    animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
    cursor: pointer;
    height: 20px;
    margin:auto;
  }
  
  .arrow-down {
    height: 6px;
    background: rgb(254, 254, 254);
    transform: rotate(45deg);
    transform-origin: 0% 0%;
    border-radius: 5px;
  }
  .arrow-down:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 100%;
    border-radius: 5px;
    background: rgb(255, 255, 255);
    transform: rotate(-90deg);
    transform-origin: 0% 100%;
  }
  
  @keyframes bounce {
  50% {
      transform: translateY(-15px);
    }
  }
.pushable {
    width: 95%;
    margin-top:10px;
    background: hsl(0, 94%, 7%);
    border-radius: 6px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
}
.front {
    display: block;
    padding: 8px 34px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 3px;
    background:linear-gradient(rgb(171, 89, 89),hsl(0, 100%, 39%));
    color: rgb(255, 255, 255);
    transform: translateY(-6px);
}
.pushable:active .front {
    transform: translateY(-2px);
}

.container_option{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top:10px;
}
.container_option a{
    text-decoration: none;
}
.container_option:hover > :not(:hover){
    filter: grayscale(1) blur(1px);
}
.box_option:hover{
    scale: 1.1;
    transition:0.5s;
}
.box_option{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: auto;
    height: 70px;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    font-weight: 500;
    color:rgb(219, 219, 219);
}
@media (max-width: 400px) {
    .box_option{
        padding:0;
    }
}
@media (max-width: 767px) {
    .container_option{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}
.box3{
    background:linear-gradient(120deg, rgba(34, 32, 32, 0.61) ,#a2a8d3) ;
}
.box2{
    background:linear-gradient(120deg, rgba(34, 32, 32, 0.61) 10% ,#385170) ;
}
.box1{
    background:linear-gradient(120deg, rgba(34, 32, 32, 0.61) ,#142d4c) ;
}
.desc-container{
    background-color: rgb(28, 28, 28);
    padding:7px;
    margin-top:5px;
    color:whitesmoke;
    text-align: justify;
    border-radius:5px;
}
.review-container{
    display: block;
    margin-top: 10px;
    padding: 8px;
    background-color: rgb(48, 48, 48);
    text-align: left;
    border-radius: 5px;
}
.review{
    margin-top:15px;
    border-bottom:1px solid rgb(172, 172, 172);
    color:whitesmoke;
}

.checked{
    color:gold;
}
.copyrights{
    color:whitesmoke;
}
.fireworks-container {
         position: fixed;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         z-index: 90;
         pointer-events: none;
        }