/* Eine schöne Schriftart wie Inter verwenden */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap');

/* Allgemeiner Stil für den Body */
.body-style {
    background-color: rgb(0, 21, 39);
    color: white;
    min-height: 75vh; /* Sorgt dafür, dass der Body die volle Höhe des Viewports hat */
    display: flex; /* Aktiviert Flexbox */
    padding-left: auto;
    flex-direction: column; /* Stapelt die Elemente vertikal */
    align-items: center; /* Zentriert horizontal */
    justify-content: center; /* Zentriert vertikal */
    padding: 5px;
    font-family: 'Inter', sans-serif;
    margin: 0; /* Entfernt den äußeren Rand, der eine Scrollbar verursachen könnte */
    overflow: hidden; /* Verhindert jegliches Überlaufen, das eine Scrollbar erzeugt */
}

/* Stil für den Haupt-Container */
.container-style {
    width: 100%; /* Der Container nimmt die gesamte verfügbare Breite ein */
    max-width: 900px; /* Begrenzt die maximale Breite für größere Bildschirme */
    text-align: center;
    padding: 0 20px; /* Fügt inneren Abstand hinzu, damit der Inhalt nicht den Rand berührt */
    box-sizing: border-box; /* Stellt sicher, dass Padding in der Gesamtbreite enthalten ist */
}

/* Stil für den Haupttitel */
.title-style {
    font-size: clamp(3rem, 10vw, 150px); /* Macht die Schriftgröße responsive */
    font-weight: 600;
    color: white;
    letter-spacing: 5px;
    margin-bottom: 1rem;
    text-shadow: 5px 5px 35px #0077ff ;
    transition: all 2s ease-in-out;
}

.title-style:hover {
    text-shadow: 5px 5px 35px #d400ff ;

}

/* Stil für die kurze Beschreibung */
.description-style {
    font-size: 1.125rem;
    color: #c4c4c4;
    max-width: 42rem;
    display: inline-block;
    margin: 0 auto;
    width: auto;
    transition: all 0.5s ease-in-out;
    margin-bottom: 1rem;
}

.description-style:hover {
    color: #0077ff;
}

.button {
    color: #ffffff;
    border-radius: 40px;
    border-width: 0px;
    border-style: solid;
    padding: 10px;
    padding-right: 22px;
    padding-left: 22px;
    background-color: rgba(0, 119, 255, 0.7);
    box-shadow: 2px 2px 8px rgba(0, 119, 255, 0.5);
    transition: all 0.4s ease-in-out;
    font-size: 1.3rem;
}

.button:hover {
    transform: scale(1.2);
    background-color: #3f99ff;
    box-shadow: 0px 0px 10px #3f99ff;;
}