/* General Styling */
body {
    font-family: 'Ubuntu Mono', monospace;
    color: #f0f0f0;
    background-color: #1a1a1a;
    font-size: 1rem; /* Base font size of 16px */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Rubik Mono One', sans-serif;
    color: #f0f0f0;
}

/* Hero Section */
.hero {
    height: 100vh;
    background-color: #000000;
    background-image: url('files/MushroomOutline.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    color: #000000;
    text-align: center;
}

.hero-transition-gradient{
    background: #000000;
    background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(26, 26, 26, 1) 100%);
}

h1 {
    font-size: 2.5rem; /* Equivalent to 40px */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add shadow to make text more visible */
}

p.lead {
    font-size: 1.125rem; /* Equivalent to 18px */
    font-family: 'Ubuntu Mono', monospace;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add shadow to make text more visible */
    color:white;
}

/* Floating Elements (Icon + Hamburger Button) */
.floating-elements {
    position: fixed;
    top: 1.25rem; /* 20px equivalent */
    left: 1.25rem;
    display: flex;
    align-items: center;
    z-index: 1000;
}

.floating-icon {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: 0.625rem; /* 10px equivalent */
    height:75px;
    width:75px;
}

.icon-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.hamburger-btn {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 1.875rem; /* 30px equivalent */
    height: 1.875rem;
    justify-content: space-between;
}

.hamburger-btn div {
    width: 100%;
    height: 0.25rem; /* 4px equivalent */
    background-color: rgba(255, 255, 255, 0.3);
}

/* Expanded Menu */
.expanded-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); /* Slightly transparent black background */
    z-index: 900;
    padding: 1.25rem;
    flex-direction: column;
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s 0.5s;
}

.expanded-menu.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s;
}

/* Social Icons */
.social-icons {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1.25rem; /* 20px equivalent */
    margin-top: 3rem; /* Add some top margin to move them below the menu */
}

.social-icons a {
    margin: 0 0.625rem; /* 10px equivalent */
}

.social-icon {
    width: 3rem; /* 30px equivalent */
    height: 3rem;
    object-fit: contain;
}

/* Menu Content */
.menu-content {
    display: flex;
    flex-direction: column;
}

.menu-item {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    margin-bottom: 1.25rem; /* 20px equivalent */
    padding: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: left; /* Align text to the left */
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Light background on hover */
    color: #fff;
}

.menu-item h2 {
    font-size: 1.75rem; /* Match the size of the h2 header */
    margin-right: 2rem;
    color: #f0f0f0;
    transition: color 0.3s ease;
}

.menu-item a {
    color: inherit; /* Inherit color from h2 */
    text-decoration: none; /* Remove the underline */
    transition: color 0.3s ease;
}

.menu-item:hover a {
    color: #f0f0f0; /* Set hover color */
    text-decoration: none;
}

.menu-description {
    font-size: 1.75rem;
    color: #999;
    font-family: 'Ubuntu Mono', monospace;
    text-align: left;
    margin-top: 0.5rem;
}

.menu-item:hover .menu-description {
    color: #f0f0f0; /* Match text to white on hover */
    transition: color 0.3s ease;
}

/* Spacer between sections */
.spacer {
    height: 3.125rem; /* 50px equivalent */
    background-color: #1a1a1a;
}

/* Fade-in effect for elements */
.fade-in {
    opacity: 0;
    transform: translateY(1.25rem); /* 20px equivalent */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Project Card Styling */
.project-card {
    background-color: #333;
    padding: 1.25rem; /* 20px equivalent */
    margin-bottom: 1.875rem; /* 30px equivalent */
    border-radius: 0.5rem; /* 8px equivalent */
}

.project-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem; /* Space between image and text */
}

.project-image {
    width: 250px; /* Fixed width */
    height: 250px; /* Fixed height */
    object-fit: cover; /* Ensure the image covers the space without distortion */
    background-color: #333; /* Add a placeholder background color while the image loads */
    border-radius: 8px;
    flex: none;/* Optional rounded corners */
}

.project-card h3 {
    font-size: 1.5rem; /* Equivalent to 24px */
    margin-bottom: 0.625rem; /* 10px equivalent */
    font-family: 'Rubik Mono One', sans-serif;
}

.project-card .subtitle {
    font-size: 1.125rem; /* Equivalent to 18px */
    margin-bottom: 0.3125rem; /* 5px equivalent */
    font-family: 'Ubuntu Mono', monospace;
}

.project-card .project-info {
    font-size: 1rem; /* Equivalent to 14px */
    color: #ccc;
    font-family: 'Ubuntu Mono', monospace;
}

/* Spacer between sections */
.spacer {
    height: 3.125rem; /* 50px equivalent */
    background-color: #1a1a1a;
}

/* Add extra padding to the last section for smoother scrolling */
#work-experience-section {
    padding-bottom: 50vh; /* Extra space for smooth scrolling */
}

.menu-container{
    margin-top: 8rem;
}


/* Mobile Responsiveness for Full-Screen Menu */
@media (max-width: 768px) {

    /* Resize Hamburger Icon */
    .hamburger-btn {
        width: 2rem; /* Make the hamburger icon smaller */
        height: 2rem;
        z-index: 1001; /* Ensure it's on top of everything */
        display: flex; /* Ensure the hamburger icon is visible */
    }

    .hamburger-btn div {
        height: 0.2rem; /* Make the hamburger lines thinner */
    }

    /* Adjust Floating Elements (Icon + Hamburger) */
    .floating-elements {
        top: 0.75rem; /* Slightly closer to the top */
        left: 0.75rem;
        display: flex; /* Ensure the floating elements are visible */
        z-index: 1000; /* Keep it on top */
    }

    .icon-image {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

    /* Full-screen expanded menu */
    .expanded-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* Full width */
        height: 100vh; /* Full height */
        background-color: rgba(0, 0, 0, 0.9); /* Darken background */
        padding: 2rem; /* Add padding for the content */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Start content from top */
        align-items: flex-start; /* Left align content */
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
        z-index: 999; /* Ensure it's on top of everything */
        overflow-y: auto; /* Allow scrolling for overflowing content */
    }

    /* Add margin to the menu items and social icons */
    .menu-container {
        margin-top: 6rem; /* Leave space for floating elements (hamburger and icon) */
        width: 100%; /* Ensure the container takes full width */
        padding: 0 1rem; /* Add padding to avoid text going edge-to-edge */
    }

    .menu-item {
        text-align: left; /* Left-align text */
        width: 100%; /* Full width for easier clicks */
        padding: 20px 0; /* Larger click targets */
        margin: 0.75rem 0; /* Add some margin between items */
        font-size: 1.25rem; /* Reduce the font size slightly */
        flex-direction: column; /* Stack the text under the headers */
        align-items: flex-start; /* Ensure alignment is consistent */
    }

    .menu-description {
        font-size: 1.25rem; /* Reduce description font size */
        margin-top: 0.5rem; /* Add some space between header and description */
        width: 100%; /* Prevent overflow */
        word-wrap: break-word; /* Break long text */
    }

    /* Social Icons for Mobile */
    .social-icons {
        margin-top: 2rem; /* Space above the icons */
        margin-bottom: 2rem; /* Space below the icons */
        justify-content: center;
    }

    .social-icon {
        width: 2rem; /* Larger icons on mobile */
        height: 2rem;
        margin: 0 0.75rem; /* Add spacing between social icons */
    }

    /* Hide floating elements ONLY when expanded menu is open */
    .expanded-menu.open ~ .floating-elements {
        display: none;
    }

    /* Adjust Project Cards for Mobile */
    .project-content {
        flex-direction: column; /* Stack image and text on mobile */
        text-align: center;
    }

    .project-image {
        width: 100%; /* Make the image take full width on mobile */
        height: auto;
    }

    .project-card h3 {
        font-size: 1.25rem; /* Smaller title for projects */
    }

    .project-card .subtitle {
        font-size: 1rem; /* Smaller subtitle */
    }

    .project-card .project-info {
        font-size: 0.85rem; /* Smaller detailed information */
    }

    /* Adjust Bio Section for Mobile */
    .bio-section h2 {
        font-size: 1.5rem; /* Adjust About Me heading */
    }

    .bio-text {
        font-size: 1rem; /* Adjust bio text */
        padding: 0 1rem; /* Add padding to avoid text touching edges */
    }

    /* Ensure Spacers Adjust on Mobile */
    .spacer {
        height: 2rem; /* Smaller spacer between sections */
    }

}