/* Basic reset */
:root {
    --font-main: 'muli', Arial, sans-serif;
    --bg-color: #eaeaec;
    --text-color: #373639;
    --base-font-size: 26px; /* Base font size for large screens */
    --font-size-medium: 22px; /* Medium screen font size */
    --font-size-small: 18px; /* Small screen font size */
    --header-padding: 5%;
    --main-padding: 5%;
    --main-max-width: 1000px;
    --icon-size-large: 24px;
    --icon-size-medium: 20px;
    --icon-size-small: 18px;
    --margin-top-name: 50px;
    --name-font-size-large: 8vw; /* Dynamic font size for large screens */
    --name-font-size-medium: 10vw; /* Medium screens */
    --name-font-size-small: 12vw; /* Small screens */
    --paragraph-margin: 20px 0; /* Vertical margins for paragraph */
    --paragraph-font-size-medium: 3vw; /* Paragraph font size for medium screens */
    --paragraph-font-size-small: 4vw; /* Paragraph font size for small screens */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--base-font-size);
}

/* Header styling */
header {
    background-color: var(--bg-color);
    padding: 20px var(--header-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

nav .left-nav, nav .right-nav {
    display: flex;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: var(--text-color);
    text-transform: uppercase; /* Uppercase for standard links */
    margin-right: 20px;
}

.github-icon {
    fill: currentColor;
    width: var(--icon-size-large);
    height: auto;
}

/* Specific style for email link */
.email-link {
    text-transform: lowercase; /* Override to lowercase */
}

/* Optional hover effect */
nav a:hover, .email-link:hover {
    color: #555; /* Change color on hover for better UX */
}

main {
    max-width: var(--main-max-width);
    margin: auto;
    padding: 0 var(--main-padding);
}

.name-container {
    padding: 0 var(--header-padding);
    margin-top: var(--margin-top-name);
}

.first-name, .last-name {
    display: block;
    font-size: var(--name-font-size-large);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5vw;
}

.first-name {
    text-align: left;
}

.last-name {
    text-align: right;
}

p {
    text-align: justify;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: var(--paragraph-margin);
    line-height: 1.2;
    hyphens: auto;
}

/* Styles specific to the CV page */
.cv-content {
    padding: 0 var(--main-padding);
    max-width: var(--main-max-width);
    margin: auto;
}

/* Override uppercase styling for the CV page */
.cv-content h1, .cv-content h2, .cv-content h3, .cv-content p, .cv-content ul, .cv-content li {
    text-transform: none; /* Remove uppercase */
    font-family: var(--font-main); /* Ensure consistent font */
    font-size: 1rem; /* Consistent font size */
}

.cv-content h1 {
    font-size: 2rem; /* Adjust size for CV heading */
    margin-bottom: 20px;
    color: var(--text-color);
    letter-spacing: 2px;
}

.cv-content h2 {
    font-size: 1.5rem; /* Adjust size for subheadings */
    margin-top: 30px;
    margin-bottom: 10px;
    color: var(--text-color);
    letter-spacing: 2px;
}

/* New styling for h3 elements */
.cv-content h3 {
    font-size: 1.25rem; /* Slightly smaller than h2 */
    margin-top: 20px;
    margin-bottom: 0px;
    color: var(--text-color);
    font-weight: 600; /* Emphasize h3 headings */
}

.cv-content p {
    font-size: 1rem; /* Standard paragraph size */
    line-height: 1.5; /* Improved line height for readability */
    margin-bottom: 15px;
}

/* Styling for ul and li elements */
.cv-content ul {
    list-style-type: disc;
    padding-left: 20px; /* Indent list items */
    margin-bottom: 15px; /* Space below the list */
    letter-spacing: 2px;
}

.cv-content li {
    margin-bottom: 5px; /* Space between list items */
    line-height: 1.5; /* Consistent line height */
}

/* Optional hover effect for links on the CV page */
.cv-content a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s;
}

.cv-content a:hover {
    color: #555; /* Change color on hover */
}

/* Hover effect for GitHub logo */
nav a .github-icon {
    transition: filter 0.3s ease; /* Smooth transition for filter effects */
}

nav a:hover .github-icon {
    filter: brightness(0) invert(0.5); /* Change the logo color to grayish */
}


/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        font-size: var(--font-size-medium);
    }

    .github-icon {
        width: var(--icon-size-medium);
        height: auto;
    }

    .first-name, .last-name {
        font-size: var(--name-font-size-medium);
    }

    p {
        font-size: var(--paragraph-font-size-medium);
    }
}

@media (max-width: 480px) {
    body {
        font-size: var(--font-size-small);
    }

    .github-icon {
        width: var(--icon-size-small);
    }

    .first-name, .last-name {
        font-size: var(--name-font-size-small);
    }

    p {
        font-size: var(--paragraph-font-size-small);
    }
}