/* Color Scheme */

    :root {
        --fz-heading: 2.5rem;
        --fz-sm: 1.2rem;
        --fz-xxl: 2rem;
        --fz-xs: 1rem;
        --light-navy: #112240;
        --light-slate: #a8b2d1;
        --lightest-slate: #ccd6f6;
        --green: #64ffda;
        --transition: 0.3s ease;
        --border-radius: 5px;
        --font-mono: 'Roboto Mono', monospace;
        --primary-color: #007BFF;
        /* Blue */
        --secondary-color: #343A40;
        /* Dark Gray */
        --background-image: linear-gradient(to top, #132842 0%, #0f2e45 100%);
        --accent-color: #FF5733;
        /* Apple Red */
        --highlight-color: #FFC107;
        /* Orange */
        --text-color: #343A40;
        /* Dark Gray */
    }

    /* Global Styles */
    *,
    *::before,
    *::after {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    html {
        font-size: 62.5%;
        font-family: "Calibre", "San Francisco", "SF Pro Text", -apple-system, system-ui, "Roboto", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    }

    code,
    kbd,
    pre,
    samp {
        font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    }

    body {
        font-size: 2rem;
        background-image: var(--background-image);
        color: var(--text-color);
    }

    /* Header */
    .header {
        background-color: var(--background-image);
        padding: 1rem 0;
        border-bottom: 1px solid white;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
        background-color: #112240;
    }

    .header__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 140rem;
        margin: -1rem auto;
        padding: 0 1rem;

    }

    .logo img {
        height: 8rem;
        /* Adjust size as needed */
        width: auto;
    }

    .nav__list {
        list-style: none;
        display: flex;
        gap: 2rem;
    }

    .nav__item {
        list-style: none;
    }

    .nav__link {
        color: #eeee;
        text-decoration: none;
        font-size: 1.8rem;
        transition: color 0.3s ease;
    }

    .nav__number {
        color: #64ffda;
        /* Numeral color */
        margin-right: 0.5rem;
    }

    .nav__link:hover .nav__number,
    .nav__link:hover {
        color: #64ffda;
        /* Color on hover */
    }

    /* Sections */
    .section {
        gap: 2rem;
        max-width: 800px;
        margin: 0 auto;
        padding-top: 10rem;
    }

    .about-me-container {
        display: flex;
        align-items: center;
        gap: 4rem;
        /* Spacing between text and image */
        margin-top: 3rem;
        justify-content: space-between;
    }

    .about-me-text {
        flex: 2;
        font-size: 2rem;
        color: var(--lightest-slate);
        line-height: 1.8;
    }

    .headshot {
        position: relative;
        width: 45rem;
        height: 55rem;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .headshot figure {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .headshot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5%;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(100, 255, 218, 0.4);
        /* Light green overlay */
        border-radius: 5%;
        /* Matches the rounded edges of the image */
        border: 1px solid black;
    }

    .headshot:hover .overlay {
        background: rgba(100, 255, 218, 0.7);
        /* Darker overlay on hover */
        transition: background 0.3s ease-in-out;
    }

    .cta {
        font-size: 1.6rem;
        padding: 1rem 2rem;
        background-color: #FF5733;
        border: none;
        color: white;
        border-radius: 5px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .gallery-link {
        text-align: center;
        margin-top: 2rem;
        display: flex;

    }

    .view-gallery {
        font-size: 1.8rem;
        color: #64ffda;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .view-gallery:hover {
        color: #00ffbf;
        text-decoration: underline;
    }

    /* Adjustments for smaller screens */
    @media (max-width: 768px) {
        .about-me-container {
            flex-direction: column;
            gap: 2rem;
        }

        .headshot {
            width: 20rem;
            height: 20rem;
        }
    }

    .strong1,
    .strong2 {
        color: #64ffda
    }

    .gabriel {
        color: #97affe;
    }

    .section h3 {
        color: #dee6fd;
    }

    .section h4 {
        color: #64ffda
    }

    .section h5 {
        color: #64ffda
    }

    .section p {
        color: #00ffbf;
        font-size: 2.1rem;
    }

    .section h1,
    .section h2 {
        font-family: 'Roboto Slab', serif;
        color: #c5d2fd;
        margin-bottom: 2rem;
        font-size: 5rem;
    }

    .section p {
        line-height: 1.6;
    }

    .button_workshowcase {
        display: inline-block;
        padding: 1rem 2rem;
        font-size: 1.8rem;
        color: #00FFBF;
        /* Text color */
        background: transparent;
        /* Transparent background */
        border: 1px solid #00FFBF;
        /* Border color */
        border-radius: 0.5rem;
        /* Rounded corners */
        text-align: center;
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
        /* Smooth transition */
    }

    .button_workshowcase:hover {
        background: #00FFBF;
        /* Background color on hover */
        color: #001f3f;
        /* Text color on hover */
        box-shadow: 0 0 5px #00FFBF, 0 0 5px #00FFBF, 0 0 5px #00FFBF;
        /* Glow effect */
    }

    .about-me-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .about-me-text {
        flex: 2;
        color: #97affe;
        font-size: 2.1rem;
        line-height: 1.6;
        margin-bottom: 2rem;
    }

    .skills-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 4rem;
        grid-gap: 2rem;
        /* Adjust the gap as necessary for more/less spacing between the columns */

    }

    .skills-column {
        background: #132842;
        padding: 1rem;
        border-radius: 0.5rem;
        color: #97affe;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    }

    .skills-column h3 {
        color: #64ffda;
        margin-bottom: 1rem;
        font-size: 2.4rem;
    }

    .skills-column ul {
        list-style: none;
        padding: 0;
    }

    .skills-column ul li {
        margin-bottom: 0.5rem;
        font-size: 1.8rem;
        color: #dee6fd;
    }


    /* Add CSS variables for consistency */


    /* Styled Projects Section */



    .projects h2 {
        font-size: clamp(24px, 5vw, 32px);
        color: var(--lightest-slate);
    }

    .projects {
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }

    .projects .projects-grid {
        display: flex;
        grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
        /* Use this for consistent gaps between projects */
        list-style: none;
        padding: 0;

    }

    .projects-grid {
        display: flex;
    }

    .fa-brands .fa-github {
        background-color: white;
    }

    .projects .project-container {
        background-color: var(--light-navy);
        padding: 2rem;
        border-radius: var(--border-radius);
        transition: var(--transition);
        position: relative;
        border: 1px solid #64ffda;
        list-style: none;
    }

    .projects .project-container:hover {
        transform: translateY(-5px);
    }

    .projects .project-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .projects .project-top {
        display: flex;
        justify-content: space-between;
        padding: 2rem;
    }

    .projects .folder {
        color: var(--green);
        font-size: 2.4rem;
    }

    .projects .project-links a {
        margin-left: 10px;
        color: var(--light-slate);
        transition: color var(--transition);
    }



    .fa-brands.fa-github {
        color: #ccd6f6;
        /* Default light slate color */
        font-size: 24px;
        /* Adjust the size of the GitHub icon */
    }

    .fa-brands.fa-github:hover {
        color: white;
        /* Change to white on hover */
    }

    .projects .project-title {
        font-size: var(--fz-xl);
        color: var(--lightest-slate);
        margin-bottom: 10px;
    }

    .projects .project-description {
        font-size: var(--fz-md);
        color: #64ffda;
        margin-bottom: 20px;
    }

    .projects .project-tech-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        list-style: none;
        padding: 0;
        margin: 20px 0 0;
    }

    .projects .project-tech-list li {
        font-size: var(--fz-sm);
        color: var(--light-slate);
        font-family: var(--font-mono);
    }

    /* Accessibility */
    a {
        color: var(--primary-color);
    }

    a:focus {
        outline: 2px dashed var(--accent-color);
        outline-offset: 4px;
    }

    /* Contact Section */
    .section.contact {
        text-align: center;
        padding: 10rem 0;
        background-color: var(--background-color);
    }

    .section.contact h5 {
        color: var(--green);
        font-size: 1.8rem;
        margin-bottom: 1rem;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .section.contact h2 {
        font-size: 4rem;
        color: var(--lightest-slate);
        font-weight: 700;
        margin-bottom: 2rem;
    }

    .section.contact p {
        font-size: 1.8rem;
        color: var(--light-slate);
        margin-bottom: 4rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.5;
    }

    /* Updated CTA Button */
    .cta-button {
        display: inline-block;
        padding: 1.6rem 3.2rem;
        font-size: 2rem;
        color: var(--green);
        border: 2px solid var(--green);
        border-radius: 5px;
        text-decoration: none;
        background: transparent;
        transition: all 0.3s ease;
        position: relative;
        animation: breathing 1.2s infinite ease-in-out;
    }

    /* Hover effect for button */
    .cta-button:hover {
        background-color: var(--green);
        color: var(--background-color);
        box-shadow: 0 0 15px rgba(100, 255, 218, 0.8);
    }

    /* Social Icons Styles */
    .social-icons {
        position: fixed;
        /* Fixed position to stay with the page */
        top: 10rem;
        /* Adjust based on logo size, to appear below logo */
        left: 2rem;
        /* Keep it aligned on the left */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        /* Spacing between the icons */
        z-index: 1000;
        /* Make sure it stays on top of other content */
    }

    .social-icons a {
        display: inline-block;
        font-size: 2.5rem;
        /* Adjust the size of the icons */
        color: #ccd6f6;
        /* Light Slate color */
        transition: transform 0.3s ease, color 0.3s ease;
    }

    .social-icons a:hover {
        transform: scale(1.2);
        /* Enlarge on hover */
        color: #64ffda;
        /* Green on hover */
    }

    /* Line Divider */
    .line-divider {
        width: 0.2rem;
        height: 7rem;
        background-color: #ccd6f6;
        margin-top: 1rem;
        /* Space between icons and divider */
        opacity: 0.8;
    }

    .typewriter {
        font-family: 'Courier New', monospace;
        /* Typewriter font */
        overflow: hidden;
        /* Hides overflow text */
        border-right: 0.4em solid red;
        /* Creates a blinking cursor effect */
        animation: typing 4s steps(30, end), blink-caret .75s step-end infinite;
        max-width: 100%;
        /* Allows the text to take the full width */
        display: inline-block;
        /* Ensures the element behaves like an inline element */
        white-space: normal;
        /* Allows line breaks */
    }

    @keyframes typing {
        from {
            width: 0;
            /* Start with no width */
        }

        to {
            width: 100%;
            /* Complete width */
        }
    }

    @keyframes blink-caret {

        from,
        to {
            border-color: transparent;
            /* No border */
        }

        50% {
            border-color: #64ffda;
            /* Cursor color */
        }
    }

    /* For responsiveness */
    @media (max-width: 768px) {
        .social-icons {
            left: 1rem;
            /* Adjust left position for smaller screens */
        }
    }

    /* Breathing animation */
    @keyframes breathing {
        0% {
            transform: scale(1);
            box-shadow: 0 0 10px rgba(100, 255, 218, 0.2), 0 0 20px rgba(100, 255, 218, 0.4);
        }

        50% {
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(100, 255, 218, 0.4), 0 0 30px rgba(100, 255, 218, 0.6);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 10px rgba(100, 255, 218, 0.2), 0 0 20px rgba(100, 255, 218, 0.4);
        }
    }






    /* Responsive Design */
    @media (max-width: 768px) {
        .skills-container {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .projects .projects-grid {
            grid-template-columns: 1fr;
            /* Stack projects on smaller screens */
            gap: 2rem;
        }
    }


    @media (prefers-reduced-motion: no-preference) {

        .project-container:hover .project-inner,
        .project-container:focus-within .project-inner {
            transform: translateY(-7px);
        }
    }