/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


:root {
    --wine-red: #722f37;
    --paper: #fdfaf5;
    --ink: #1a1a1a;
}

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Georgia', serif;
    margin: 0;
    padding: 20px;
    border: 12px solid var(--wine-red);
    min-height: 100vh;
}

/* Navigation - This must be on EVERY page */
nav {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid var(--wine-red);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: var(--ink);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
}

nav a:hover { color: var(--wine-red); }

/* Layout for the Home Page Photo */
.hero-layout {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
}

.profile-photo {
    width: 300px; /* Adjust size as needed */
    height: auto;
    border: 5px solid var(--wine-red); /* Consistent branding */
    box-shadow: 10px 10px 0px var(--wine-red); /* Creative 'offset' shadow effect */
    filter: sepia(20%); /* Subtle academic/vintage tone */
}

/* Make it stack on mobile */
@media (max-width: 768px) {
    .hero-layout {
        flex-direction: column-reverse;
        text-align: center;
    }
    .profile-photo {
        width: 100%;
        max-width: 250px;
    }
}