body {
    background-color: rgb(221, 54, 165); /* Pinker Hintergrund */
    text-align: center;                /* Text mittig ausrichten */
    padding: 20px;                     /* Innenabstand */
    position: relative;                 /* Positionierung für Container */

    margin: 0;                         /* Standardmargins entfernen */
    border-left: 60px solid rgb(243, 142, 209); /* Hellpink Rand links */
    border-right: 60px solid rgb(243, 142, 209); /* Hellpink Rand rechts */
    box-sizing: border-box;            /* Umfasst Polsterung und Rand */
    height: 100vh;                     /* Volle Höhe des Viewports */





}
h1 {
    font-family: 'Zing Rust', cursive; /* Verspielt Schriftart */
    color: rgb(9, 250, 9);             /* Grüner Titel */
}

p {
    
    background-color: rgb(243, 142, 209);       /* Hellblauer Hintergrund */
    color: rgb(20, 239, 9);                      /* Schwarzer Text */
    border: 2px solid rgba(0, 0, 0, 0.023);           /* Schwarzer Rand */
    display: inline-block;             /* Inline-Block für Rand-Anpassung */
    padding: 10px;                     /* Innenabstand */
    margin-top: 20px;                  /* Abstand zum Titel */
}

.gif-container {
    position: absolute;                /* Positionierung */
    top: 130px;                        /* Abstand vom oberen Rand */
    right: 60px;                      /* Abstand vom rechten Rand */
}

.gif-container2 {
    position: absolute;                /* Positionierung */
    top: 50px;                        /* Abstand vom oberen Rand */
    left: 60px;                       /* Abstand vom linken Rand */
}

.gif-container img, .gif-container2 img {
    width: 145px;                      /* Größe der GIFs */
}


.tunnel {
    position: absolute;                     /* Absolute Positionierung */
    top: 300px;                             /* Festlegen des vertikalen Abstands vom oberen Rand */
    left: 60px;                             /* Festlegen des seitlichen Abstands vom linken Rand */
    display: inline-block;                  /* Damit der Container nur so groß wie das Bild ist */
}

.tunnel img {
    width: 150px;                         /* Größe des Tunnel-GIFs anpassen */
    height: auto;                         /* Seitenverhältnis beibehalten */
    max-width: 100%;                     /* Sicherstellen, dass das Bild responsiv bleibt */
}

.music-text {
    position: absolute;                     /* Absolute Positionierung */
    top: 50%;                               /* Vertikal zentrieren */
    left: 50%;                              /* Horizontal zentrieren */
    transform: translate(-50%, -50%);      /* Anpassen für exakte Zentrierung */
    color: rgb(29, 251, 4);                          /* Textfarbe */
    font-size: 18px;                       /* Textgröße anpassen */
    text-align: center;                    /* Text zentrieren */
}

.pirate-symbol {
    position: absolute;                 /* Absolute Positionierung */
    font-size: 30px;                   /* Größe der Piratensymbole */
}

.left-symbol {
    left: -50px;                        /* Positionierung links */
    top: 20%;                           /* Anpassung je nach Anzahl der Symbole */
}

.second-left {
    left: -50px;                        /* Positionierung links */
    top: 40%;                           /* Weitere Anpassung für das zweite Symbol */
}

.third-left {
    left: -50px;                        /* Positionierung links */
    top: 60%;                           /* Weitere Anpassung für das dritte Symbol */
}

.right-symbol {
    right: -50px;                       /* Positionierung rechts */
    top: 20%;                           /* Vertikale Zentrierung */
}

.second-right {
    right: -50px;                       /* Positionierung rechts */
    top: 40%;                           /* Weitere Anpassung für das zweite Symbol */
}

.third-right {
    right: -50px;                       /* Positionierung rechts */
    top: 60%;                           /* Weitere Anpassung für das dritte Symbol */
}