* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* New keyframes for background fade without affecting content */
@keyframes backgroundFade {
    0% {
        background-image: url('https://cdn2.inkarnate.com/21urtq85p1er2tbazn00o6heufuj');
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    51% {
        background-image: url('mardin.png');
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Apply transition effect to the background separately */
body {
    transition: background 0.5s ease-in-out, opacity 1.5s ease;
}

/* General body settings */
body, html {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Prevent scrolling */
    font-family: 'Roboto', sans-serif;
    background-image: url('https://cdn2.inkarnate.com/21urtq85p1er2tbazn00o6heufuj');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #f4f4f4;
    opacity: 1;
}

.gold{
    color:#d4af37;
}
.ernst{
    width: 100px;
    height: 100px;
    
    background-image: url('mardin.png');
    position: relative;
    animation: freiheit 3s infinite;

}

@keyframes freiheit {
    0% {
        opacity: 1;
        background-image: url('https://cdn2.inkarnate.com/21urtq85p1er2tbazn00o6heufuj');
    }
    50% {
        opacity: 0;
    }
    52% {
        background-image: url('mardin.png');
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



.gold:hover{
    /*Eduard laser theme spielt mit epischen effekten*/
}
/* Banner Styling */
.banner {
    position: fixed;
    left: 0;
    top: 0;
    width: 18vw; /* Slightly smaller banner to give more width to content */
    height: 100vh;
    background-color: rgba(31, 31, 31, 0.9); /* Dark semi-transparent overlay */
    color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.2);
}

.banner h2 {
    font-family: 'Cinzel', serif;
    font-size: 2vw; /* Reduced size */
    color: #d4af37; /* Gold text */
    margin-bottom: 10px;
}

.banner h3 {
    font-size: 1.8vw; /* Slightly smaller */
    margin-bottom: 5px;
    color: #f8f8ff;
}

.banner p {
    font-size: 1.3vw;
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    margin-left: 20vw; /* Space for the banner */
    width: 80vw; /* Increase width to cover most of the screen */
    height: 100vh;
    align-items: center;
    justify-items: center;
}

.item1 {
    color: #d4af37; /* Gold text for the header */
    font-size: 5vw; /* Slightly smaller */
    text-align: center;
    font-family: 'Cinzel', serif;
    grid-column: span 2;
    margin-bottom: 20px;
}

.item1 hr {
    border: none;
    height: 3px;
    background-color: #d4af37;
    margin-top: 10px;
    width: 80%;
}

/* Image Section Styling */
.center1, .center2 {
    text-align: center;
   width: 40vh;/* Set the width to 40% of the screen */
    height: 40vh; /* Adjust the height to maintain proportions */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.center1 {
    background-image: url('happylovecraft.webp'); 
       opacity: 0.95;
}

.center2 {
    background-image: url('knob.png');
    opacity: 0.95;
}

.center1:hover, .center2:hover {
    transform: scale(1.05); /* Dynamic zoom effect */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
}

/* Button/Link Styling */
a {
    display: inline-block;
    color: #d4af37;
    background-color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    border: 2px solid #d4af37;
    padding: 15px 30px;
    font-size: 2.5vw;
    font-family: 'Cinzel', serif;
    transition: all 0.3s ease;
    border-radius: 8px;
}

a:hover {
    background-color: #d4af37;
    color: #1f1f1f;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Responsive Styling */
@media (max-width: 768px) {
    .banner {
        width: 100%;
        height: auto;
        position: relative;
        padding: 10px;
    }

    .banner h2, .banner h3, .banner p {
        font-size: 6vw;
    }

    .grid-container {
        grid-template-columns: 1fr;
        margin-left: 0;
        width: 100%;
    }

    .item1 {
        font-size: 10vw;
    }

    .center1, .center2 {
        width: 100%; /* On small screens, images take full width */
    }

    a {
        font-size: 5vw;
        padding: 10px 20px;
    }
}