@font-face {
    font-family: "Aniron";
    src: url('./fonts/aniron.ttf') format('truetype');
}

@font-face {
    font-family: "Ringbearer";
    src: url('./fonts/ringbearer.ttf') format('truetype');
}

body {
    background-color:black;  /* Anthrazit als Hintergrundfarbe */
    font-family: "Ringbearer";
    src: url('./fonts/ringbearer.ttf') format('truetype');
    color:#008080;
}

h1 {
    color: gold;
    font-size: 24px;
    font-family: "Aniron", serif;
}

h1, h2, h3 {
    text-align: center;
}

h2 {
    color: #008080; /* Petrol Farbcode */
    font-size: 24px;
    font-family: "Ringbearer", serif;
}

h3 {
    color: darkgray;
    font-size: 22px;
    font-family: "Ringbearer", serif;
}

audio {
    display: none;
}

.centered-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -5.2cm;
}

.teleprompter-text {
    font-size: 18px;
    margin-bottom: 15px;
    color: darkgray;
    font-family: "Ringbearer", serif;
    margin-left: 8cm;
}

p {
    color: darkgray;
    font-size: 20px;
    padding-left: 60px;
}

.galadriel-quote {
    opacity: 1;
    transition: opacity 10s ease-out;
}

.fade-out {
    opacity: 0 !important;
}

.centered-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    margin-top: 0px;
    margin-bottom: -0.7cm;
}

.centered-image {
    display: block;
    max-width: 50%;
    height: 150px; 
    width: auto;
    margin-top: auto;
    margin-bottom: 0.5cm;
}

.landkarte {
    display: block;
    max-width: 100%;
    height: auto;
    width: auto;
}

.password-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Elemente horizontal */
    justify-content: center; /* Zentriert die Elemente vertikal */
    height: auto; /* Stellt sicher, dass der Container die volle Höhe des Bildschirms einnimmt */
    text-align: center; /* Zentriert den Text der inneren Elemente */
  }
  .password-row {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hidden {
    display: none;
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

.visible {
    display: block;
    opacity: 1;
}

#snowflakes {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 10000;
  }
  
  .snowflake {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.6;
    animation-name: fall;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  @keyframes fall {
    to {
      transform: translateY(100vh);
    }
  }
  .landkarte {
    position: relative;
    width: auto; /* Oder die gewünschte Breite */
    height: auto; /* Stellen Sie sicher, dass es die richtige Höhe für Ihr Bild hat */
}

.landkarte img {
    display: block;
    width: 100%; /* Sie können dies anpassen, je nachdem, wie Sie Ihr Bild anzeigen möchten */
    height: auto;
}

.calendar-number {
    position: absolute;
    z-index: 2; /* Über dem Bild */
    background-color: rgba(255, 255, 255, 0.7); /* leicht transparenter weißer Hintergrund */
    padding: 5px;
    border-radius: 50%; /* macht es kreisförmig */
    text-align: center;
    font-size: 30px; 
    width: 40px; /* Sie können die Größe anpassen, wenn nötig */
    height: 40px;
    line-height: 40px; /* Vertikal zentrieren des Texts */
    cursor: pointer; /* Hand-Cursor, wenn man über die Zahlen fährt */
    color: black; /* Textfarbe */
    text-decoration: none; /* Entfernt die Unterstreichung
}

.calendar-number:hover {
    background-color: rgba(255, 0, 0, 0.7); /* Ändert den Hintergrund, wenn Sie mit der Maus über eine Zahl fahren */
}

#number-1 {
    top: 430px; 
    left: 350px;
}

#number-2 {
    top: 400px;
    left: 390px;
}

#number-3 {
    top: 430px;
    left: 430px;
}

#number-4 {
    top: 400px;
    left: 470px;
}

#number-5 {
    top: 430px;
    left: 510px;
}

#number-6 {
    top: 400px;
    left: 550px;
}

#number-7 {
    top: 400px;
    left: 700px;
}

#number-8 {
    top: 520px;
    left: 700px;
}

#number-9 {
    top: 535px;
    left: 750px;
}

#number-10 {
    top: 683px;
    left: 838px;
}

#number-11 {
    top: 730px;
    left: 810px;
}

#number-12 {
    top: 600px;
    left: 710px;
}

#number-13 {
    top: 665px;
    left: 660px;
}

#number-14 {
    top: 687px;
    left: 752px;
}
#number-15 {
    top: 710px;
    left: 700px;
}

#number-16 {
    top: 740px;
    left: 745px;
}

#number-17 {
    top: 840px;
    left: 880px;
}

#number-18 {
    top: 840px;
    left: 955px;
}

#number-19 {
    top: 803px;
    left: 917px;
}

#number-20 {
    top: 790px;
    left: 730px;
}

#number-21 {
    top: 875px;
    left: 917px;
}

#number-22 {
    top: 770px;
    left: 955px;
}

#number-23 {
    top: 715px;
    left: 955px;
}

#number-24 {
    top: 800px;
    left: 1000px;
}

.content-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.side-image {
    /* Beispiel für responsive Bilder */
    max-width: 10%; /* oder eine andere passende Größe */
    height: auto;
}