/* Sets up a basic, centered layout for the whole page */
body {
    font-family: Courier, sans-serif; /* Use a common, readable font */
    background-color: #f4f4f4; /* Light gray background */
    color: #333; /* Dark text color */
    margin: 0;
    display: flex; /* Enables flexbox for easy centering */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    min-height: 100vh; /* Ensures the body takes up the full viewport height */
    text-align: center;
}

.container {
    padding: 20px;
    /* Optional: Max width to keep content from getting too wide on large screens */
    max-width: 800px;
}

/* Styling for the main title */
.main-title {
    font-size: 5em; /* Large text size (5 times the base font size) */
    font-weight: **bold**; /* Makes the text bold */
    color: #0E1B80; /* Very dark color for emphasis */
    margin-bottom: 0.1em; /* Reduce space below the title */
}

/* Styling for the subtitle */
.subtitle {
    font-size: 2.0em; /* Smaller than the title but still prominent */
    font-style: italic; /* Add some stylistic flair */
    margin-top: 0;
    color: black; /* Very dark color for emphasis */
}

/* Styling for the image */
.project-image {
    max-width: 50%; /* Ensures the image is responsive and fits within the container */
    height: auto; /* Maintains the image's aspect ratio */
    margin-top: 30px; /* Space above the image */
    margin-bottom: 10px; /* Space below the image */
    border: 5px solid #ccc; /* Optional: adds a simple border around the image */
    border-radius: 29px; /* Optional: rounds the corners of the border */

}
/* Styling for the link area */
.link-area {
    margin-top: 40px; /* Space above the link */
}

.link-area a {
    text-decoration: none; /* Removes the default underline */
    font-size: 1.2em;
    padding: 10px 20px;
    border: 2px solid white; /* Adds a border for a button look */
    border-radius: 5px;
    color: white; /* Text color */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* Add a simple hover effect to show interaction */
.link-area a:hover {
    background-color: white;
    color: #1a1a1a; /* Text becomes dark on hover */
}