.body-container {
    font-family: 'Arial', sans-serif;
    background-color: #f4f3f2; /* Whiter background */
    color: #a69f91; /* Beige */
    margin: 0;
    padding: 0 15%; /* Increased side padding for more space */
}

header {
    background-color: #f5efdb; /* Light beige */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15%; /* Consistent padding with the body */
}

.logo {
    max-width: 150px;
    height: auto;
    margin: 0 10px 0 0; /* Adjusted margin for the logo */
    flex-shrink: 0; /* Prevents the logo from shrinking */
}

nav {
    flex-grow: 1; /* Allows the nav element to occupy the remaining space */
    display: flex;
    justify-content: flex-end; /* Aligns the navigation items to the right */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

nav ul li {
    margin: 0 15px;
}

nav a {
    text-decoration: none;
    color: #a69f91;
}

nav a:hover {
    color: #8c8577;
}




.split-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.left, .right {
    flex: 1;
}

.left {
    background: url('images/intro.jpg') center/cover no-repeat;
}

.right {
    width: 40%; /* Narrower intro text */
    padding: 20px;
    margin-left: 5%; /* Space between intro image and text */
    text-align: left;
}

#intro h1 {
    font-size: 4em;
    font-weight: bold;
    font-family: 'Georgia', serif;
    color: #808080; /* Gray */
}

#intro p {
    font-size: 1.5em;
}

.portfolio-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid with smaller images */
    gap: 80px;
    justify-content: center;
    padding: 40px 5%; /* Increased padding for more whitespace */
}

.portfolio-item {
    text-align: center;
    transition: transform 0.3s ease;
}

.portfolio-item:hover {
    transform: scale(1.1);
}

.portfolio-item h2 {
    font-weight: bold;
    margin-bottom: 10px;
}

img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0px 10px 5px gray);
}

footer {
    background-color: #f5efdb;
    text-align: center;
    padding: 10px 0;
    color: #a69f91;
}

.spacer {
    height: 100px; /* Adjust as needed for space between sections */
}

.split-content {
    display: flex;
    align-items: center; /* Aligns children vertically */
    justify-content: center; /* Centers children horizontally */
    margin: 40px 0;
}

.content-left, .content-right {
    flex: 1;
    padding: 20px;
}

.content-left {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically inside .content-left */
}

.content-left .text-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers text */
    height: 100%;
}

.content-left h2, .content-left p {
    font-size: 2em; /* Larger font size for the left side text */
}

.project-image {
    flex: 0 0 200px; /* Fixed width */
    height: 200px; /* Maintain a square shape */
    background-color: white; /* White frame */
    padding: 15px; /* Frame effect */
    box-shadow: 0px 10px 5px gray; /* Shadow for depth */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for scaling and shadow */
}

.project-image:hover {
    transform: scale(1.1); /* Scales up on hover */
    box-shadow: 0px 15px 10px gray; /* Optional: enhances shadow effect on hover */
}

.project-image img {
    max-width: 100%; /* Ensures image does not exceed container */
    max-height: 100%; /* Keeps image height within container */
    object-fit: cover; /* Ensures image covers the area properly */
}

.square {
    width: 250px; /* Größe der Quadrate */
    height: 250px;
    background-color: white;
    box-shadow: inset 0 8px 10px rgba(0, 0, 0, 0.3); /* Innen-Schatten */
    border-radius: 40px; /* Abgerundete Ecken */
    position: relative; /* Für die Positionierung des inneren Quadrats */
}




.project-content {
    flex-grow: 1;
    padding-left: 40px; /* Increased padding for more space */
    /* ...other styles... */
}

.project-content h3 {
    font-size: 1.3em; /* Larger size for the title */
    margin-bottom: 5px;
    color: #808080;
}

.project-content p {
    font-size: 1.1em; /* Slightly larger size for the description */
}

.project h3 {
    color: #808080;
    margin-bottom: 10px; /* Increased space between title and description */
}


.content-right {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the projects */
    /* ... other styles ... */
}

#webdev-intro {
    position: relative;
    height: 100vh;
    background: #fcfcfc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}



h1, .text-hover, h2, .project {
    transition: transform 0.3s ease, text-shadow 0.3s ease; /* Transition for scaling and shadow */
}

h1:hover, h2:hover {
    transform: scale(1.1); /* Increase text size */
}


.html-projects-heading {
    text-align: center;

    margin-bottom: 20px; /* Space above the box container */
}

.html-projects-heading h2 {
    font-size: 6em;
    font-weight: bold;
    font-family: 'Georgia', serif;
    color: #808080; /* Gray */
    margin-bottom: 10px;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.html-projects-heading h2:hover {
    transform: translateY(-5px); /* Slightly moves the text up */
    text-shadow: 
        1.5px 1.5px 1.5px rgba(0, 0, 0, 0.4),  /* Subtle initial shadow */
        3px 3px 3px rgba(0, 0, 0, 0.3),  /* Additional layer */
        4.5px 4.5px 4.5px rgba(0, 0, 0, 0.2),  /* Further depth */
        6px 6px 6px rgba(0, 0, 0, 0.1);  /* Outermost shadow layer */
}

.html-projects-heading h2:hover {
    transform: scale(1.05); /* Slight increase in size on hover */
}

.click-preview {
    font-size: 1.5em;
    color: #808080; /* Gray */
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.click-preview:hover {
    transform: scale(1.1); /* Slight increase in size on hover */
}



.headline {
    font-size: 2em; /* Adjust size as needed */
    color: #333; /* Text color */
    transition: transform 0.3s ease, text-shadow 0.3s ease;
    cursor: pointer; /* Indicates it's interactive */
}

.headline:hover {
    transform: translateY(-5px); /* Slightly moves the text up */
    text-shadow: 
        1px 1px 1px rgba(0, 0, 0, 0.4),  /* Subtle initial shadow */
        2px 2px 2px rgba(0, 0, 0, 0.3),  /* Additional layer */
        3px 3px 3px rgba(0, 0, 0, 0.2),  /* Further depth */
        4px 4px 4px rgba(0, 0, 0, 0.1);  /* Outermost shadow layer */
}

.square-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px; /* Abstand zwischen den Quadraten */
    margin: 40px 0; /* Abstand oben und unten */
}

.square {
    width: 250px; /* Größe der Quadrate */
    height: 250px;
    background-color: white;
    box-shadow: inset 0 8px 10px rgba(0, 0, 0, 0.3); /* Innen-Schatten */
    border-radius: 40px; /* Abgerundete Ecken */
    position: relative; /* Für die Positionierung des inneren Quadrats */
}

.inner-square {
    background-size: cover;
    width: 150px; /* Größe des inneren Quadrats */
    height: 150px;
    background-color: #FFFFFF; /* Hintergrundfarbe des inneren Quadrats */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Zentriert das innere Quadrat */
    border-radius: 20px; /* Abgerundete Ecken für das innere Quadrat */
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); /* Außenschatten */
    transition: transform 0.3s ease;
}


.psquare {
    width: 250px; /* Größe der Quadrate */
    height: 250px;
    min-width: 250px;
    background-color: white;
    box-shadow: inset 0 8px 11px rgba(0, 0, 0, 0.3); /* Innen-Schatten */
    border-radius: 40px; /* Abgerundete Ecken */
    position: relative; /* Für die Positionierung des inneren Quadrats */
}

.project {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Adjusts the spacing of items inside */
    background-color: transparent;
    padding: 15px;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 51px;
    width: 90%;
    position: relative; /* Needed for absolute positioning of the button */
}




.inner-psquare {
    background-size: cover;
    width: 150px; /* Größe des inneren Quadrats */
    height: 150px;
    background-color: #FFFFFF; /* Hintergrundfarbe des inneren Quadrats */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Zentriert das innere Quadrat */
    border-radius: 20px; /* Abgerundete Ecken für das innere Quadrat */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Außenschatten */
    transition: transform 0.3s ease;
}

.inner-square:hover {
    transform: translate(-50%, -50%) scale(1.5);
}

.project:hover .inner-psquare {
    transform: translate(-50%, -50%) scale(1.5);
}

.project:hover {
    transform: scale(1.1);
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
}

p {
    position: relative; /* Ermöglicht die Positionierung des Pseudo-Elements */
    font: bold 48px 'Futura';
}

p:before {
    content: attr(data-text); /* Nutzt den Text des data-text Attributs */
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    background-color: #000;
    text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.8);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    opacity: 0; /* Unsichtbar, bis zum Hover */
    z-index: -1; /* Hinter den regulären Text legen */
    transition: opacity 0.3s ease;
}


p:hover:before {
    opacity: 1; /* Macht den Hintergrundtext sichtbar beim Hover */
}