body {
    font-family: arial;
}

.container {
    position: relative;
    text-align: center;
}

img {
    opacity: 0;
    animation: fadeIn 2s forwards;
    width: 200px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.hidden {
    opacity: 0;
    animation: slideIn 1s forwards;
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Starten Sie mit der dritten Überschrift */
.hidden:nth-child(3) {
    animation-delay: 4s; /* Starten Sie die Animation der dritten Überschrift nach 4 Sekunden */
}

/* Dann die zweite Überschrift */
.hidden:nth-child(2) {
    animation-delay: 3s; /* Starten Sie die Animation der zweiten Überschrift nach 3 Sekunden */
}

/* Zuletzt die erste Überschrift */
.hidden:nth-child(1) {
    animation-delay: 6s; /* Starten Sie die Animation der ersten Überschrift nach 2 Sekunden */
}

body {
    background-color: #000;
    color: #ffcc66;
}

main {

    text-align: center;

}

#impressum {
    width:80%;
    margin: auto;
    text-align: left;
    color: #fff;
}


.animated-link {
    opacity: 0.5;
    transition: opacity 1s ease-in-out;
    color: #ffcc66; /* Initial color */
}

.animated-link:hover {
    opacity: 1;
    color: #ffcc66;  /* Hover color - matching the previous example */
}

a:link, a:visited, a:active {
    text-decoration: none;
}

.opac5 {
    opacity: 0.5;
}