/* Grundlegendes Styling für die ganze Seite */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: '1906 French News', serif; /* Schriftart ändern */
  background-color: #fff; /* Weißer Hintergrund */
}

/* Container für die Inhalte */
.container {
  text-align: center;
  padding-left: 20px;  /* Margin links auf der mobilen Version */
  padding-right: 20px; /* Margin rechts auf der mobilen Version */
}

/* Styling für das Logo */
.logo {
  width: 20vw; /* Logo auf 20% der Bildschirmbreite setzen */
  height: auto; /* Höhe wird proportional angepasst */
  margin-bottom: 10px; /* Kleineren Abstand zum Text */
}

/* Styling für die Nachricht darunter */
.message {
  font-size: 24px; /* Standard Schriftgröße für größere Bildschirme */
  color: #333;
  font-weight: normal;
  margin-top: 10px; /* Kleineren Abstand vom Logo */
}

/* Media Query für kleinere Bildschirme (Mobilgeräte) */
@media (max-width: 600px) {
  .message {
      font-size: 16px; /* Schriftgröße auf kleinen Bildschirmen verringern */
      margin-top: 5px; /* Schrift noch näher ans Logo bringen */
  }

  /* Zeilenumbruch auf mobilen Geräten nach "wait" und "water" */
  .message {
      white-space: normal; /* Weißer Raum um Zeilenumbrüche zu ermöglichen */
      word-wrap: break-word; /* Zeilenumbruch bei Bedarf */
  }

  .message br {
      display: block;
      content: "\A"; /* Hier wird der Zeilenumbruch mit einem "br"-Tag in die mobile Version eingefügt */
  }

  .logo {
      width: 30vw; /* Logo kann auf mobilen Geräten etwas größer sein */
  }

  /* Padding (Abstand) für den Container auf mobilen Geräten */
  .container {
      padding-left: 20px;  /* Links Abstand hinzufügen */
      padding-right: 20px; /* Rechts Abstand hinzufügen */
  }
}