.projectSection {
    width: 100%;
    min-height: 100vh;
    height: fit-content;
}

.projectsContainer {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.projectPictureContainerSpaceholder {
    position: sticky;
    top: 0;
    height: fit-content;
    display: flex;
    align-items: center;
    z-index: 110;
}

.projectPictureContainer {
    width: 80%;
    height: 100vh;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(111,76,255,0.06), rgba(181, 71, 255, 0.3));
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 50%;
        border-radius: var(--radius-md);
    }
}

.projectDescContainer {
    height: fit-content;
}

.projectDesc {
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.projectBtn {
    display: flex;
    align-items: center;
    flex-direction: column;

    span {
        display: inline-block;
    }
}

.backBtn {
    position: fixed;
    left: var(--padding);
    bottom: var(--padding);
    z-index: 1111;
    border-radius: var(--radius-lg);
    border: white 1px dotted;
    padding: var(--padding);
    background-color: rgba(255, 255, 255, 0.37);
    backdrop-filter: blur(100px);
    animation: nudge 2s ease-in-out infinite;

    &:hover {
        background-color: rgba(255, 255, 255, 0.57);
    }
}

@keyframes nudge {
    0%, 100% { transform: translateY(0);        box-shadow: 0 0 0px rgba(255,255,255,0);   }
    50%       { transform: translateY(-5px);     box-shadow: 0 8px 20px rgba(255,255,255,0.15); }
}