/* General Reset */
/* Resets default margin and padding for body and html to ensure full height */
body{
    margin: 0;
    font-family: Helvetica;
}

/* Background settings */
/* Styles the main background of the page */
.background {
    background-image: url('../images/background1.jpeg'); /* Sets the background image */
    background-size: cover; /* Ensures the background image covers the entire element */
    background-position: center; /* Centers the background image */
    min-height: 100vh; /* Minimum height set to full viewport height */
    display: flex; /* Uses Flexbox for layout */
    flex-direction: column; /* Arranges child elements in a column */
    justify-content: flex-start; /* Aligns items to the start of the flex container */
    align-items: center; /* Centers child elements horizontally */
    position: relative; /* Sets position for absolutely positioned elements inside */
}

/* Navigation styling */
/* Styles for the navigation bar */
.centered-nav {
    margin-top: 20px; /* Adds space above the navigation */
    text-align: center; /* Centers the navigation items */
    position: absolute; /* Positions navigation absolutely within the background */
    top: 0; /* Aligns navigation to the top */
    left: 50%; /* Centers navigation horizontally */
    transform: translateX(-50%); /* Adjusts positioning to center */
}

/* Navigation list styles */
.centered-nav ul {
    list-style-type: none; /* Removes bullet points from list */
    padding: 0; /* Removes padding from list */
}

.centered-nav ul li {
    display: inline; /* Displays list items in a line */
    margin: 0 20px; /* Adds margin between navigation items */
}

/* Navigation link styles */
.centered-nav ul li a {
    display: inline-block; /* Allows padding around links */
    padding: 10px 20px; /* Adds padding inside the links */
    font-size: 18px; /* Sets font size */
    background-color: rgba(0, 0, 0, 0.8); /* Sets background color with transparency */
    color: white; /* Sets text color to white */
    text-decoration: none; /* Removes underline from links */
    font-weight: bold; /* Makes text bold */
    border: 2px solid white; /* Adds white border around links */
    text-align: center; /* Centers text inside the link */
    transition: background-color 0.3s ease; /* Smooth transition for background color on hover */
}

/* Navigation link hover effect */
.centered-nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Changes background color on hover */
    color: black; /* Changes text color to black on hover */
}

/* Logo styling */
/* Positions the logo in the top left corner */
.logo {
    position: absolute; /* Allows precise positioning */
    left: 20px; /* Sets left position */
    top: -20px; /* Adjusts top position */
}

/* Logo image styles */
.logo img {
    max-width: 600px; /* Sets maximum width for logo */
    height: auto; /* Maintains aspect ratio of logo */
}

/* Contact Section */
/* Styles for the contact section */
.contact-container {
    max-width: 600px; /* Sets maximum width */
    margin-top: 150px; /* Adds space above the contact section */
    text-align: center; /* Centers text */
    background-color: rgba(255, 255, 255, 0.8); /* Sets background color with transparency */
    padding: 20px; /* Adds padding inside the container */
    border-radius: 10px; /* Rounds corners of the container */
}

/* Profile Section */
/* Styles for the profile section */
.profile-section {
    text-align: center; /* Centers text in profile section */
    padding: 20px; /* Adds padding */
}

/* Profile picture styles */
.profile-picture {
    width: 150px; /* Sets width for the profile picture */
    height: 150px; /* Sets height for the profile picture */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    object-position: center top; /* Positions image within the area */
    border-radius: 70%; /* Makes the picture circular */
    border: 4px solid #ccc; /* Adds a light gray border */
    margin-top: 20px; /* Adds space above the profile picture */
}

/* Name styles */
.names {
    font-size: 24px; /* Sets font size for names */
    margin-top: 10px; /* Adds space above names */
    color: #333; /* Sets text color to dark gray */
}

/* Social Media Section */
/* Styles for the social media section */
.social-media-section {
    margin: 30px 0; /* Adds vertical margin */
    font-size: 0; /* Hides the font size to prevent spacing between icons */
}

/* Social media icon styles */
.social-icon {
    width: 50px; /* Sets width for social icons */
    height: 50px; /* Sets height for social icons */
    margin: 0 15px; /* Adds horizontal margin */
    transition: transform 0.3s ease; /* Smooth transition for scaling on hover */
    font-size: inherit; /* Inherits font size from parent */
}

/* Social icon hover effect */
.social-icon:hover {
    transform: scale(1.2); /* Scales icon size on hover */
}

/* Contact Form Section */
/* Styles for the contact form section */
.contact-form-section {
    margin-top: 30px; /* Adds space above contact form section */
}

/* Heading styles */
h3 {
    font-size: 22px; /* Sets font size for headings */
    color: #333; /* Sets text color to dark gray */
}

/* Form styles */
form {
    display: flex; /* Uses Flexbox for layout */
    flex-direction: column; /* Arranges form elements in a column */
    align-items: center; /* Centers form elements */
}

/* Label styles */
label {
    font-size: 18px; /* Sets font size for labels */
    margin: 10px 0 5px; /* Adds vertical margin */
    color: #555; /* Sets text color to medium gray */
}

/* Input and textarea styles */
input, textarea {
    width: 100%; /* Sets width to 100% of the parent container */
    max-width: 400px; /* Sets maximum width */
    padding: 10px; /* Adds padding inside inputs */
    margin-bottom: 15px; /* Adds space below inputs */
    border: 1px solid #ccc; /* Adds a light gray border */
    border-radius: 5px; /* Rounds corners of inputs */
    font-size: 16px; /* Sets font size */
}

/* Button styles */
button {
    padding: 10px 20px; /* Adds padding inside button */
    font-size: 18px; /* Sets font size */
    background-color: #333; /* Sets background color to dark gray */
    color: white; /* Sets text color to white */
    border: none; /* Removes default border */
    border-radius: 5px; /* Rounds corners of the button */
    cursor: pointer; /* Changes cursor to pointer on hover */
}

/* Button hover effect */
button:hover {
    background-color: #555; /* Changes background color on hover */
}

.wrapper {
    max-width: 3000px; /* Maximale Breite des Inhalts */
    margin: 0 auto; /* Zentriert den Wrapper */
    width: 100%; /* Passt sich an die Bildschirmbreite an */
}


/* Responsive Design */
/* Media queries for responsive design */
@media only screen and (max-width: 600px){
    .wrapper{
        width: 100%;
    }
    .background {
        background-position:  center right;
    }

    .nav-container {
        flex-direction: column; /* Stack items vertically */
    }

    .logo {
        position: static; /* Reset position for mobile */
        margin-top: 280px; /* Space below the logo */
    }

    .logo img {
        max-width: 330px; /* Increase logo size for desktop */
        height: auto; /* Maintain aspect ratio */
    }

    .contact-container {
        max-width: 200px; /* Sets maximum width */
        margin-top: 20px; /* Adds space above the contact section */
        text-align: center; /* Centers text */
        background-color: rgba(255, 255, 255, 0.8); /* Sets background color with transparency */
        padding: 50px; /* Adds padding inside the container */
        border-radius: 10px; /* Rounds corners of the container */
    }

    .profile-section {
        text-align: center; /* Centers text in profile section */
        padding: 20px; /* Adds padding */
    }

    /* Profile picture styles */
    .profile-picture {
        width: 150px; /* Sets width for the profile picture */
        height: 150px; /* Sets height for the profile picture */
        object-fit: cover; /* Ensures the image covers the area without distortion */
        object-position: center top; /* Positions image within the area */
        border-radius: 70%; /* Makes the picture circular */
        border: 4px solid #ccc; /* Adds a light gray border */
        margin-top: 0; /* Adds space above the profile picture */
    }

    .names {
        font-size: 25px; /* Sets font size for names */
        margin-top: 10px; /* Adds space above names */
        color: #333; /* Sets text color to dark gray */
    }

    .social-media-section {
        margin: 30px 0; /* Adds vertical margin */
        font-size: 0; /* Hides the font size to prevent spacing between icons */
    }

    /* Social media icon styles */
    .social-icon {
        width: 50px; /* Sets width for social icons */
        height: 50px; /* Sets height for social icons */
        margin: 0 15px; /* Adds horizontal margin */
        transition: transform 0.3s ease; /* Smooth transition for scaling on hover */
        font-size: inherit; /* Inherits font size from parent */
    }

    /* Social icon hover effect */
    .social-icon:hover {
        transform: scale(1.2); /* Scales icon size on hover */
    }

    h3 {
        font-size: 20px; /* Sets font size for headings */
        color: #333; /* Sets text color to dark gray */
    }

    button {
        padding: 15px 30px; /* Adds padding inside button */
        font-size: 18px; /* Sets font size */
        background-color: #333; /* Sets background color to dark gray */
        color: white; /* Sets text color to white */
        border: none; /* Removes default border */
        border-radius: 5px; /* Rounds corners of the button */
        cursor: pointer; /* Changes cursor to pointer on hover */
    }

    .centered-nav ul {
        display: flex; /* Use flexbox for horizontal alignment */
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Center the items horizontally */
        padding: 0;
        list-style-type: none;
    }

    .centered-nav ul li {
        margin: 10px 10px; /* Adjust margin between items */
    }

    .centered-nav ul li a {
        display: inline-block; /* Allows padding around links */
        padding: 15px 30px; /* Adds padding inside the links */
        font-size: 24px; /* Sets font size */
        background-color: rgba(0, 0, 0, 0.8); /* Sets background color with transparency */
        color: white; /* Sets text color to white */
        text-decoration: none; /* Removes underline from links */
        font-weight: bold; /* Makes text bold */
        border: 2px solid white; /* Adds white border around links */
        text-align: center; /* Centers text inside the link */
        transition: background-color 0.3s ease; /* Smooth transition for background color on hover */
    }
}

@media only screen and (min-width: 601px) and (max-width: 1320px) {
    .wrapper{
        width: 100%;
    }
    .background {
        background-position:  center right;
    }

    .nav-container {
        flex-direction: column; /* Stack items vertically */
    }

    .logo {
        position: static; /* Reset position for mobile */
        margin-top: 100px; /* Space below the logo */
    }

    .logo img {
        max-width: 600px; /* Increase logo size for desktop */
        height: auto; /* Maintain aspect ratio */
    }

    .contact-container {
        max-width: 350px; /* Sets maximum width */
        margin-top: 0; /* Adds space above the contact section */
        text-align: center; /* Centers text */
        background-color: rgba(255, 255, 255, 0.8); /* Sets background color with transparency */
        padding: 100px; /* Adds padding inside the container */
        border-radius: 10px; /* Rounds corners of the container */
    }

    .profile-section {
        text-align: center; /* Centers text in profile section */
        padding: 20px; /* Adds padding */
    }

    /* Profile picture styles */
    .profile-picture {
        width: 350px; /* Sets width for the profile picture */
        height: 350px; /* Sets height for the profile picture */
        object-fit: cover; /* Ensures the image covers the area without distortion */
        object-position: center top; /* Positions image within the area */
        border-radius: 70%; /* Makes the picture circular */
        border: 4px solid #ccc; /* Adds a light gray border */
        margin-top: 20px; /* Adds space above the profile picture */
    }

    .names {
        font-size: 40px; /* Sets font size for names */
        margin-top: 10px; /* Adds space above names */
        color: #333; /* Sets text color to dark gray */
    }

    .social-media-section {
        margin: 30px 0; /* Adds vertical margin */
        font-size: 0; /* Hides the font size to prevent spacing between icons */
    }

    /* Social media icon styles */
    .social-icon {
        width: 100px; /* Sets width for social icons */
        height: 100px; /* Sets height for social icons */
        margin: 0 15px; /* Adds horizontal margin */
        transition: transform 0.3s ease; /* Smooth transition for scaling on hover */
        font-size: inherit; /* Inherits font size from parent */
    }

    /* Social icon hover effect */
    .social-icon:hover {
        transform: scale(1.2); /* Scales icon size on hover */
    }

    h3 {
        font-size: 40px; /* Sets font size for headings */
        color: #333; /* Sets text color to dark gray */
    }

    button {
        padding: 20px 40px; /* Adds padding inside button */
        font-size: 25px; /* Sets font size */
        background-color: #333; /* Sets background color to dark gray */
        color: white; /* Sets text color to white */
        border: none; /* Removes default border */
        border-radius: 5px; /* Rounds corners of the button */
        cursor: pointer; /* Changes cursor to pointer on hover */
    }

    .centered-nav ul {
        display: flex; /* Use flexbox for horizontal alignment */
        justify-content: center; /* Center the items horizontally */
        padding: 0;
        list-style-type: none;
    }

    .centered-nav ul li {
        margin: 0 10px; /* Adjust margin between items */
    }

    .centered-nav ul li a {
        display: inline-block; /* Allows padding around links */
        padding: 20px 40px; /* Adds padding inside the links */
        font-size: 24px; /* Sets font size */
        background-color: rgba(0, 0, 0, 0.8); /* Sets background color with transparency */
        color: white; /* Sets text color to white */
        text-decoration: none; /* Removes underline from links */
        font-weight: bold; /* Makes text bold */
        border: 2px solid white; /* Adds white border around links */
        text-align: center; /* Centers text inside the link */
        transition: background-color 0.3s ease; /* Smooth transition for background color on hover */
    }
}


@media only screen and (min-width: 786px) and (max-width: 1320px) {
    .wrapper{
        width: 100%;
    }

    .centered-nav ul li a {
        padding: 20px 40px; /* Adds padding inside the links */
        font-size: 24px; /* Sets font size */
    }

    .contact-container {
        max-width: 500px; /* Sets maximum width */
        padding: 100px; /* Adds padding inside the container */
    }

    .profile-section {
        text-align: center; /* Centers text in profile section */
        padding: 20px; /* Adds padding */
    }

    .names {
        font-size: 45px; /* Sets font size for names */
        margin-top: 10px; /* Adds space above names */
        color: #333; /* Sets text color to dark gray */
    }

    .social-media-section {
        margin: 30px 0; /* Adds vertical margin */
        font-size: 0; /* Hides the font size to prevent spacing between icons */
    }

    /* Social media icon styles */
    .social-icon {
        width: 100px; /* Sets width for social icons */
        height: 100px; /* Sets height for social icons */
        margin: 0 15px; /* Adds horizontal margin */
        transition: transform 0.3s ease; /* Smooth transition for scaling on hover */
        font-size: inherit; /* Inherits font size from parent */
    }

    /* Social icon hover effect */
    .social-icon:hover {
        transform: scale(1.2); /* Scales icon size on hover */
    }

    h3 {
        font-size: 40px; /* Sets font size for headings */
        color: #333; /* Sets text color to dark gray */
    }

    button {
        padding: 20px 40px; /* Adds padding inside button */
        font-size: 25px; /* Sets font size */
        background-color: #333; /* Sets background color to dark gray */
        color: white; /* Sets text color to white */
        border: none; /* Removes default border */
        border-radius: 5px; /* Rounds corners of the button */
        cursor: pointer; /* Changes cursor to pointer on hover */
    }
}

@media only screen and (min-width: 1165px) and (max-width: 1320px) {
    .wrapper {
        width: 100%;
    }

    .centered-nav ul {
        display: flex; /* Use flexbox for horizontal alignment */
        justify-content: center; /* Center the items horizontally */
        padding: 0;
        list-style-type: none;
    }

    .centered-nav ul li {
        margin: 0 10px; /* Adjust margin between items */
    }

    .centered-nav ul li a {
        padding: 20px 40px; /* Adds padding inside the links */
        font-size: 24px; /* Sets font size */
    }

    .contact-container {
        max-width: 800px; /* Sets maximum width */
        margin-top: 0; /* Adds space above the contact section */
        text-align: center; /* Centers text */
        background-color: rgba(255, 255, 255, 0.8); /* Sets background color with transparency */
        padding: 100px; /* Adds padding inside the container */
        border-radius: 10px; /* Rounds corners of the container */
    }

    .profile-section {
        text-align: center; /* Centers text in profile section */
        padding: 20px; /* Adds padding */
    }

    /* Profile picture styles */
    .profile-picture {
        width: 450px; /* Sets width for the profile picture */
        height: 450px; /* Sets height for the profile picture */
        object-fit: cover; /* Ensures the image covers the area without distortion */
        object-position: center top; /* Positions image within the area */
        border-radius: 70%; /* Makes the picture circular */
        border: 4px solid #ccc; /* Adds a light gray border */
        margin-top: 20px; /* Adds space above the profile picture */
    }

    .names {
        font-size: 40px; /* Sets font size for names */
        margin-top: 10px; /* Adds space above names */
    }

    .social-media-section {
        margin: 30px 0; /* Adds vertical margin */
        font-size: 0; /* Hides the font size to prevent spacing between icons */
    }

    /* Social media icon styles */
    .social-icon {
        width: 100px; /* Sets width for social icons */
        height: 100px; /* Sets height for social icons */
        margin: 0 15px; /* Adds horizontal margin */
    }

    h3 {
        font-size: 40px; /* Sets font size for headings */
        color: #333; /* Sets text color to dark gray */
    }

    button {
        padding: 20px 40px; /* Adds padding inside button */
        font-size: 25px; /* Sets font size */
    }
}