/* styles.css */
body {
    font-family: 'Trebuchet MS', sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    color: #333;
    overflow-y: auto; /* Allows vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    height: 100%; /* Ensures the content can take full height */
}

header {
    padding: 10px 20px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center; /* Center-align the navbar items if desired */

}

nav ul li {
    display: inline;
    margin-right: 10px;
    margin-right: 10px; /* Increase margin to space out the items more */

}

nav ul li a {
    text-decoration: none;
    color: #333;
    padding: 20px 30px; /* Add padding to increase the clickable area */

}

nav ul li a:hover {
    color: #470404; /* Color changes to blue when hovered */
}

main {
    margin: 20px;
}

footer {
    background-color: #470404;
    text-align: center;
    padding: 1px 5px;
    position: fixed;
    width: 100%;
    bottom: 0;
    margin: 0;
    z-index: 1000;
    font-size: 12px;
    color:#ffffff;
}


.profile-pic {
    width: 300px;       /* or any size you prefer */
    height: 300px;      /* must be the same as width to maintain aspect ratio */
    border-radius: 50%; /* makes the image round */
    border: 3px solid #6e0606; /* optional: adds a white border around the image */
    object-fit: cover;  /* ensures the image covers the area without being distorted */
    display: block;
    margin: 60px auto 0 auto; /* Adds a 20px margin at the top, centers horizontally */
}

@media (max-width: 600px) {
    nav ul li {
        display: block; /* Stack the navbar items vertically */
        margin-right: 0; /* Remove horizontal margin */
        text-align: center; /* Ensure text is centered */
    }

    nav ul li a {
        display: block; /* Make links block to fill horizontal space */
        padding: 12px 20px; /* Larger padding for easier tapping */
    }

    /* Adjust other elements as necessary */
    body {
        font-size: 16px; /* Larger font size for readability on small screens */
    }
}

.parallax {
    background-image: url('your-image.jpg');
    height: 400px; /* Adjust to fit your content */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

strong {
    color: #333; /* Highlight your name */
}

em {
    font-style: italic;
    color: #555;
}

#home {
    max-width: 900px; /* Limit the width of the section */
    margin: 10px auto; /* Center the section and add top/bottom margin */
    line-height: 1.6; /* Increase line spacing for better readability */
}

#profile h1 {
    color: #470404;
    font-size: 40px;
    margin-bottom: 1%;
}

#profile h3 {
    color: #470404;
    font-size: 20px
}

#home h2 {
    font-size: 25px; /* Larger font size for the heading */
    color: #470404; /* Custom color for the heading */
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 5px 60px; /* Add padding on the top and bottom as 10px, left and right as 30px */
    text-align: center;

}

#home p {
    font-size: 15px; /* Increase the font size for the paragraph */
    color: #333; /* Darker color for the text */
    padding: 2px 60px; /* Add padding on the top and bottom as 10px, left and right as 30px */
    margin-bottom: 1%; /* Add some space below each paragraph */
    text-align: center;
}



body, html {
    overflow: auto; /* or overflow-y: scroll; */
    height: auto; /* Ensure height is set to auto or remove this property */
}

#icons {
    text-align: center; /* Center the icons horizontally */
    margin: 10px 0; /* Add some space above and below the section */
}

#icons a {
    margin: 0 20px; /* Adds horizontal spacing between each icon */
    font-size: 24px; /* Adjust the size of the icons */
    color: #333; /* Default icon color */
    text-decoration: none; /* Remove underline from links */
}

#icons a:hover {
    color: #6f0303; /* Change color on hover */
}

#projects {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center; /* Centers the project boxes vertically */
    align-items: center; /* Centers the project boxes horizontally */
    padding: 1%;
}

.project-box {
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin: 20px;
    max-width: 500px; /* Limit the max width for consistency */
    width: 100%; /* Full width within the container */
    box-sizing: border-box; /* Ensure padding and border are included in width */
}

/* Adjust for larger screens */
@media (min-width: 768px) {
    .project-box {
        max-width: 50%; /* Side-by-side layout on larger screens */
    }
}

/* Adjust for mobile screens */
@media (max-width: 767px) {
    .project-box {
        max-width: 90%; /* Use most of the screen width on smaller devices */
        margin-left: auto;
        margin-right: auto;
    }
}

.project-box h2 {
    color: #470404; /* Custom color for the heading */
    font-size: 18px;
    margin-top: 0px;
    margin-bottom: 10px;
}

.project-box p {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
}

.project-box ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0;
}

.project-box ul li {
    margin-bottom: 10px;
}

.project-box ul li a {
    text-decoration: none;
    color: #7b0707;
    font-size: 14px;
}

.project-box ul li a:hover {
    text-decoration: underline; /* Underline on hover */
}

.project-image {
    display: block; /* Ensures the image is treated as a block-level element */
    max-width: 70%; /* Make sure the image scales */
    height: auto; /* Maintain aspect ratio */
    margin-top: 20px;
    margin-left: auto; /* Automatic margin on the left */
    margin-right: auto; /* Automatic margin on the right */
}

/* Media query for smaller screens */
@media (max-width: 600px) {
    .project-image {
        max-width: 100%; /* Allow the image to take up full width on small screens */
        margin-top: 10px; /* Reduce the top margin on small screens */
    }
}

#recent-news {
    width: 100%;
    margin: 40px auto;
}

.news-entry {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    max-width: 1000px;
    padding: 2px 60px; /* Add padding on the top and bottom as 10px, left and right as 30px */
    padding-left: 1%;

}

.date, .description {
    flex: 1;

}

.date {
    margin-right: 20px;  /* Keeps a margin on the right side outside the date container */
    position: relative;
    padding-right: 5px; /* Reduced padding to bring text closer to the dotted line */
}


.date::after {
    content: "";
    position: absolute;
    right: -20px; /* Slightly shift the line to the left */
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(to bottom, #b3b1b1 50%, transparent 50%);
    background-size: 2px 10px;
}


.description ul {
    list-style-type: none;
    padding: 0;
}

.description li {
    margin-bottom: 5px;
    font-size: 16px;
    color: #333;
}

h2, .date p, .description {
    font-size: 20px; /* Adjust font size for better readability */
    color: #333;
}

.description ul li {
    font-size: 16px; /* Ensures text is legibly sized */
    color: #333; /* Sets a standard text color */
    padding: 5px 0; /* Adds vertical space around each list item */
}

.description {
    padding-left: 20px; /* Add padding to separate text from the line */
    overflow-wrap: break-word;  /* Allows words to break and wrap to the next line */

}

.date p b {
    font-size: 18px; /* Ensures text is legibly sized */
    color: #333; /* Sets a standard text color */
    padding: 5px 0; /* Adds vertical space around each list item */
}

.description ul li a {
    color: #7b0707; /* Sets a distinct color for the links */
    text-decoration: none; /* Removes underline from unhovered links */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition for hover effects */
}

.description ul li a:hover {
    text-decoration: underline; /* Underline on hover */
}

#home p a {
    text-decoration: none;
    color: #7b0707;
}

#home p a:hover {
    text-decoration: underline; /* Underline on hover */
}