/* Importing fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

body {
    background-color: #2e2e2e; /* Darker background to reflect the dark themes */
    color: #eaeaea; /* Light text on dark background */
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 20px;
}

/* Heading styles */
h1, h2, h3 {
    color: #C0A000; /* Dull gold to symbolize wealth and greed */
    font-family: 'Libre Baskerville', serif;
    margin-top: 0;
}

h1 {
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 2em;
    margin-bottom: 1em;
    border-bottom: 1px solid #555; /* Darker border */
    padding-bottom: 0.3em;
}

h3 {
    font-size: 1.5em;
    margin-bottom: 1em;
    color: #b71c1c; /* Dark red for subheadings */
}

/* Paragraph styling */
p {
    line-height: 1.8;
    margin-bottom: 1em;
    font-size: 1em;
}

/* Image captions */
.abbildung {
    text-align: center;
    font-size: 0.9em;
    color: #888; /* Slightly lighter gray */
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    font-style: italic;
    width: 100%; /* Ensure caption has same width as image */
}

/* Styling for links */
a {
    color: #b71c1c; /* Dark red */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Horizontal rule styling */
hr {
    border: 0;
    height: 1px;
    background: #555; /* Darker gray */
    margin: 3em 0;
}

/* List styling */
ul {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

li {
    margin-bottom: 0.5em;
}

/* Emphasis and strong text */
em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

/* Boxed sections */
.section {
    background-color: #3e3e3e; /* Slightly lighter than background */
    padding: 30px;
    margin-bottom: 2em;
    border: 1px solid #555;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    background-image: url('grain.png'); /* Subtle grain texture */
    background-size: cover;
    background-repeat: repeat;
    background-blend-mode: multiply;
}

/* Flex layout for person sections */
.person-section {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2em;
}

.person-section .image-container {
    flex: 0 0 auto;
    width: 250px; /* Set a consistent width for all images */
    margin-right: 20px;
}

.person-section .image-container img {
    width: 100%; /* Image fills the container width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px;
    filter: grayscale(100%); /* Black and white effect */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* Darker shadow */
}

.person-section .image-container .abbildung {
    width: 100%; /* Caption matches image width */
    text-align: center;
    font-size: 0.9em;
    color: #888; /* Slightly lighter gray */
    margin-top: 0.5em;
    margin-bottom: 1em;
    font-style: italic;
}

.person-section .description {
    flex: 1 1 auto;
}

#figurenkonstellation-img {
    width: 100%;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* Darker shadow */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .person-section {
        flex-direction: column;
        align-items: center;
    }

    .person-section .image-container {
        margin-right: 0;
        margin-bottom: 1em;
        width: 100%;
    }

    .person-section .image-container img {
        width: 100%;
    }

    .person-section .image-container .abbildung {
        width: 100%;
    }
}