@font-face {
  font-family: 'Ubuntu Sans';
  src: url('./assets/fonts/UbuntuSans-VariableFont_wdth\,wght.ttf') format('truetype');
  font-weight: 100 900; /* Das Gewicht des variablen Fonts von 100 bis 900 */
  font-stretch: 75% 125%; /* Breite von 75% bis 125% */
  font-display: swap; /* Damit Text sofort angezeigt wird und die Schrift nachgeladen wird */
}
body, html {
  min-height: 100%;
  margin: 0; /* Entfernt den Standard-Margin des Bodys */
}

body {
  display: flex; /* Aktiviert Flexbox-Layout */
  align-items: center; /* Zentriert die Elemente vertikal */
  justify-content: center; /* Zentriert die Elemente horizontal */
  color: #ccc; /* Textfarbe */
  font-family: Ubuntu Sans, sans-serif; /* Schriftart */
  height: 100vh; /* Setzt die Höhe des Bodys auf 100% der Viewport-Höhe */
  background-image: url("./assets/img/giphy.gif"); /* Hintergrundbild */
  background-position: center; /* Zentriert das Hintergrundbild */
  background-size: cover; /* Skaliert das Hintergrundbild, um den gesamten Hintergrund zu bedecken */
}

body:before, body:after {
  content: ""; /* Leeres Pseudo-Element */
  position: absolute; /* Absolute Positionierung */
  top: 0; /* Setzt das Element an den oberen Rand */
  right: 0; /* Setzt das Element an den rechten Rand */
  bottom: 0; /* Setzt das Element an den unteren Rand */
  left: 0; /* Setzt das Element an den linken Rand */
}

body:before {
  z-index: -1; /* Stellt sicher, dass es hinter anderen Inhalten bleibt */
  background-size: cover; /* Hintergrundbild abdecken */
  background-position: center; /* Bild zentrieren */
  background-image: url("./assets/img/giphy.gif"); /* Hintergrundbild */
  filter: blur(5px); /* Unschärfe-Effekt */
  overflow: hidden; /* Verhindert Überlauf */
}

body:after {
  z-index: -1; /* Stellt sicher, dass es hinter anderen Inhalten bleibt */
  border: 1px solid #fefefe; /* Rahmen um das Element */
  background: rgba(0, 0, 0, 0.6); /* Halbtransparenter schwarzer Hintergrund */
  mix-blend-mode: overlay; /* Blending-Effekt */
}

.four-oh-four {
  text-align: center;
  padding: 0 4%;
  max-width: 80%;
}

h1 {
  margin: 0;
  font-size: 6rem; /* Weiter vergrößerte Schriftgröße für sehr große Desktops */
  letter-spacing: -1px;
}

h2 {
  margin: 0;
  font-size: 10rem; /* Weiter vergrößerte Schriftgröße für sehr große Desktops */
  font-weight: bold;
  letter-spacing: -1px;
}

/* Container für die Buttons */
.button-container {
  display: flex;
  justify-content: center; /* Zentriert die Buttons horizontal */
  gap: 40px; /* Erhöhter Abstand zwischen den Buttons */
}

/* Gleiche Größe für die Buttons */
.button {
  display: inline-block;
  padding: 20px 4rem; /* Weiter vergrößertes Padding */
  background-color: grey; /* Hintergrundfarbe */
  color: white; /* Textfarbe */
  text-decoration: none; /* Unterstreichung entfernen */
  border-radius: 10px; /* Abgerundete Ecken */
  text-align: center; /* Text zentrieren */
  flex: 1.5; /* Sorgt dafür, dass alle Buttons gleich groß sind */
  max-width: 400px; /* Weiter vergrößerte maximale Breite der Buttons */
  box-sizing: border-box;
}

/* Hover-Effekt für die Buttons */
.button:hover {
  background-color: darkgrey; /* Dunklere Farbe beim Hover */
}

@media (max-width: 1920px) { /* Sehr große Desktops */
  h1 {
    font-size: 4.77rem; /* Reduktion um 15% */
  }
  h2 {
    font-size: 7.4375rem; /* Reduktion um 15% */
  }
}

@media (max-width: 1200px) { /* Desktops */
  h1 {
    font-size: 4.62rem; /* Reduktion um 10% */
  }
  h2 {
    font-size: 6.75rem; /* Reduktion um 10% */
  }
  .button {
    padding: 20px 3rem; /* Vergrößertes Padding für Desktops */
  }
}

@media (max-width: 992px) { /* Laptops */
  h1 {
    font-size: 3.74rem; /* Keine Änderung */
  }
  h2 {
    font-size: 6.25rem; /* Keine Änderung */
  }
  .button {
    padding: 20px 2rem; /* Vergrößertes Padding für Laptops */
  }
}

@media (max-width: 768px) { /* Tablets */
  h1 {
    font-size: 3.77rem; /* Erhöhung um 10% */
  }
  h2 {
    font-size: 5.5rem; /* Erhöhung um 10% */
  }
  .button {
    padding: 20px 1.5rem; /* Vergrößertes Padding für Tablets */
  }
}

@media (max-width: 576px) { /* Handys */
  h1 {
    font-size: 3.366rem; /* Erhöhung um 20% */
  }
  h2 {
    font-size: 5.25rem; /* Erhöhung um 20% */
  }
  .button {
    padding: 20px 1rem; /* Vergrößertes Padding für Handys */
    max-width: 90%; /* Maximale Breite für Buttons auf Handys */
  }
}