html {
    scroll-snap-type: y mandatory;
}

body {
    color: #ffffff;
    font-family: 'Cascadia Code', monospace;
    background-color: #101010;
    transition: background-color 0.5s ease-in-out;
    overflow-y: scroll;
}

body.bg-home { background-color: #101010; }
body.bg-about { background-color: #282828; }
body.bg-projects { background-color: #404040; }
body.bg-contact { background-color: #585858; }

body.popup-open {
    overflow: hidden; /* Prevent scrolling when popup is open */
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #282828;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #585858;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #707070;
}

section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative; /* Ensure sections are positioned relative to avoid overlap */
    z-index: 1; /* Ensure sections stack properly */
    min-height: 100vh; /* Ensure each section takes up at least the full viewport height */
    box-sizing: border-box; /* Include padding and borders in height calculations */
    display: flex; /* Ensure consistent layout */
    overflow: visible; /* Allow sections to expand dynamically based on content */
    height: auto; /* Allow sections to grow dynamically based on content */
}

/* Ensure sections push each other down */
section + section {
    margin-top: 0; /* Remove any default margin */
}

/* Allow sections to grow dynamically based on content */
section > div {
    height: auto; /* Allow inner divs to grow dynamically */
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 1095px) {
    section {
        padding: 1rem; /* Add padding for smaller screens */
    }
}

.nav-item {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: normal;
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
    opacity: 1;
    transform: translateY(0);
}

.nav-item.switching {
    opacity: 0;
    transform: translateY(-5px);
}

a.active-link .nav-item {
    font-weight: bold;
    color: #ffffff;
    position: relative;
}

a.active-link .nav-item::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    background-color: #e53e3e;
    border-radius: 1px;
    transition: width 0.3s ease-in, transform 0.3s ease-in;
}

a.active-link .nav-item.animate-bar::after {
    transform: translateX(-50%) scaleX(1.2);
    transition: transform 0.3s ease-out;
}

a.active-link:hover .nav-item::after {
    width: 100%;
}

@keyframes popupOpen {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes popupClose {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes popupSwitchNext {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes popupSwitchPrev {
    from { opacity: 0; transform: translateX(-100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes popupLeavePrev {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-100%); }
}

@keyframes popupLeaveNext {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

#popup-overlay .popup-content {
    position: absolute;
}

#popup-overlay .popup-content.opening {
    animation: popupOpen 0.3s ease-out forwards;
}

#popup-overlay .popup-content.closing {
    animation: popupClose 0.3s ease-in forwards;
}

#popup-overlay .popup-content.switching-next {
    animation: popupSwitchNext 0.5s ease-in-out forwards;
}

#popup-overlay .popup-content.switching-prev {
    animation: popupSwitchPrev 0.5s ease-in-out forwards;
}

#popup-overlay .popup-content.leaving-prev {
    animation: popupLeavePrev 0.5s ease-in-out forwards;
}

#popup-overlay .popup-content.leaving-next {
    animation: popupLeaveNext 0.5s ease-in-out forwards;
}

#form-popup {
    overflow: hidden; /* Prevent horizontal scrollbar inside the popup */
}

.project-card {
    display: flex;
    flex-direction: column; /* Ensure content stacks vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 1rem; /* Restore original padding */
    word-wrap: break-word; /* Break long words to prevent overflow */
    overflow-wrap: break-word; /* Ensure text wraps properly */
    box-sizing: border-box; /* Include padding in the element's dimensions */
    height: 100%; /* Ensure all cards match the tallest card */
    min-height: 16rem; /* Ensure a consistent minimum height */
    overflow: hidden; /* Prevent content from overflowing */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
}

.project-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(229, 62, 62, 0.4);
}

.skill {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.skill:hover {
    transform: scale(1.1);
    box-shadow: 0 0 6px 2px rgba(229, 62, 62, 0.4);
}

.skill p {
    transition: color 0.3s ease-in-out;
}

.skill img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

.skill:hover img {
    filter: grayscale(0%);
}

.contact-link span {
    transition: color 0.3s ease-in-out;
}

.contact-link .img-default,
.contact-link .img-hover {
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    top: 1rem;
}

.contact-link .img-default {
    opacity: 1;
}

.contact-link .img-hover {
    opacity: 0;
}

.contact-link:hover .img-default {
    opacity: 0;
}

.contact-link:hover .img-hover {
    opacity: 1;
}

/* Ensure email icon remains grayscale */
.contact-link[href^="mailto"] .img-default,
.contact-link[href^="mailto"] .img-hover {
    filter: grayscale(100%);
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Match the height of the parent section */
}

.hero-divider {
    height: 160px; /* Set a fixed height */
    width: 2px; /* Keep the divider thin */
    background-color: #4b5563; /* Ensure consistent color */
    margin: 1rem 3rem; /* Restore original margins */
    position: relative; /* Ensure proper positioning */
    z-index: 10; /* Ensure it is above other elements */
    display: block; /* Ensure it is always displayed */
    visibility: visible; /* Ensure it is not hidden */
    transition: transform 0.3s ease, height 0.3s ease, width 0.3s ease; /* Smooth transitions */
}

/* Adjust for smaller screens */
@media screen and (max-width: 767.5px) {
    .hero-divider {
        height: 2px; /* Make it horizontal */
        width: 160px; /* Adjust width for smaller screens */
        margin: 3rem 0; /* Restore original vertical margins */
        transform: rotate(0deg); /* Ensure no rotation */
    }
}

.hero-content {
    text-align: left;
}

#home {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Ensure the section takes up the full viewport height */
}

#home img {
    flex-shrink: 0;
}

#home .h-40 {
    background-color: #4b5563;
}

#home .text-left {
    text-align: left;
}

#typing-hi,
#typing-welcome,
#loop-typing-text {
    border-right: 2px solid #ffffff;
    display: inline;
    white-space: nowrap;
    overflow: hidden;
}

#typing-text {
    border-right: 2px solid #ffffff;
    display: inline-block;
    white-space: pre-wrap;
    overflow: hidden;
    animation: typing 3s steps(10, end), blink 0.5s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #ffffff;
    }
}

#loop-typing-text {
    color: #e53e3e;
}

@media screen and (max-width: 1095px) {
    #about {
        flex-direction: column; /* Stack the divs vertically */
    }

    #about > div {
        width: 100%; /* Make each div full width */
        padding: 16px; /* Add consistent padding */
    }
}

.projects-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default 3-column layout for desktop */
    gap: 2rem; /* Maintain spacing between cards */
    justify-content: center; /* Center the grid horizontally */
    max-width: 100%; /* Prevent grid from overflowing horizontally */
    align-items: stretch; /* Ensure all cards stretch to the same height */
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 1095px){
    .projects-content {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust grid for smaller screens */
    }

    .project-card {
        height: auto; /* Allow cards to grow dynamically based on content */
    }
}

.projects-title {
    display: none;
}

@media screen and (hover: none) and (pointer: coarse) {
    html {
        scroll-snap-type: none; /* Disable snap scrolling globally for mobile */
    }

    #home {
        scroll-snap-align: start; /* Enable snap scrolling only for the first section */
    }
}

.contact-link-container {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Dynamic grid columns */
    gap: 0rem; /* Add spacing between icons */
    justify-content: center; /* Center the grid horizontally */
    order: 0; /* Default order */
    border-top: none; /* Default: no top border */
    border-right: 1px solid rgba(255, 255, 255, 0.2); /* Add right border for larger screens */
    padding: 0;
    padding-right: 2.5rem; /* Add right padding */
}

.contact-form-container {
    order: 1; /* Default order */
    padding: 0;
    padding-left: 2.5rem;
}

/* Rearrange order and border after the breakpoint */
@media screen and (max-width: 767.5px) {
    .contact-link-container {
        order: 2; /* Move below the form */
        border-right: none; /* Remove right border */
        border-top: 1px solid rgba(255, 255, 255, 0.2); /* Add top border for smaller screens */
        padding: 0;
        padding-top: 2.5rem;
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); /* Adjust icon size to fit */
        grid-template-rows: repeat(auto-fit, minmax(50px, 1fr)); /* Allow rows to adjust dynamically */
        grid-auto-flow: dense; /* Allow grid items to fill available space */
        @media screen and (max-width: 400px) {
            grid-template-columns: repeat(2, 1fr); /* Switch to 2x2 grid when space is limited */
            grid-template-rows: repeat(2, 1fr); /* Ensure 2 rows in the grid */
        }
        grid-auto-flow: row; /* Ensure items flow into rows */
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); /* Adjust icon size to fit */
        grid-auto-flow: column; /* Force items to flow into columns */
        overflow: auto; /* Enable horizontal scrolling if needed */
    }

    .contact-form-container {
        padding: 0;
        padding-bottom: 2.5rem; /* Add top padding */
    }
}

@media screen and (max-width: 767px) {
    .header {
        display: none; 
    }
    
    .projects-title {
        display: block; /* Show the title on mobile */
    }
}