body {
    font-family: monospace, monospace;
    background-color: black;
    color: #ffffff;
}

a {
    color: darkmagenta;
}

#image-searcher {
    width: 450px;
    height: 360px;
    background-image: url(images/searcher1.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
}

.buttons-wrapper {
    display: flex;
    flex-direction: column; /* Standard: Buttons untereinander */
    gap: 11px;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

/* Media Query für größere Bildschirme (ab 768px, z.B. Tablets und Desktops) */
@media (min-width: 768px) {
    .buttons-wrapper {
        flex-direction: row; /* Buttons horizontal nebeneinander */
        justify-content: left; /* Zentriert die Buttons */
        width: auto;
        max-width: none;
    }
}

@media (min-width: 1024px) {
    #image-searcher {
        width: 500px; /* Beispiel: Größere Bildgröße für größere Bildschirme */
        height: 400px;
    }
}

#acronym {
    text-align: right;
    padding-right: 18px;
    font-size: 0.9em;
}

#image-teacher {
    width: 76%;
    aspect-ratio: 5 / 6;
    background-image: url(images/teacher1.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
}

#image-demiurg {
    width: 83%;
    aspect-ratio: 5 / 6;
    background-image: url(images/demiurg.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
}

#image-anti {
    width: 55%;
    aspect-ratio: 5 / 6;
    background-image: url(images/anti.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
    align-content: center;
}

#image-purification {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-image: url(images/purification.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
}

#image-exempel-kette {
    width: 50%;
    aspect-ratio: 4 / 5;
    background-image: url(images/gebetskette.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
}

#image-exempel-sigil {
    width: 50%;
    aspect-ratio: 4 / 5;
    background-image: url(images/purification.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

#danke {
    display: flex;
    align-items: center;
    justify-content: center;
}

#charCount {
    color: dimgray;
}