:root {
    --bg-color: #ffffff;
    --sub-bg-color: #ffffff;
    --darker-stroke-color: #dadada;
    --avatar-background-color: #FCE5D9;
    --h-font-color: #202020;
    --p-font-color: #474747;
    --secondary-font: #FB5081;

    --primary-color: #FB5081;
    --accent-color: #ffafaf3b;

    --glass-fill: rgba(255, 255, 255, 0.70);
    --stroke-color: #e6e6e6;
    --transition-behavior-out: transform 0.3s ease-in-out;
    --transition-behavior-in: transform 0.2s ease-in-out;
    --transform-behavior: scale(1.02);
    --tag-background: #eceef1;
    --tag-font: #000000;
}

html:not(.theme-ready) * {
    transition: none !important;
}


body {
    font-family: "Nunito Sans", sans-serif;
    background-color: var(--bg-color);
    margin: 0;
    transition: background-color 0.5s ease, color 0.5s ease;
}

html.dark-mode body {

    --secondary-font: #f96991;
    --bg-color: #010408;
    --sub-bg-color: #22282F;
    --avatar-background-color: #725345;
    --glass-fill: #3e444d5c;
    --stroke-color: #3E444D;
    --darker-stroke-color: #3E444D;

    --h-font-color: #ffffff;
    --p-font-color: #e0e0e0;

    --tag-background: #393e43;
    --tag-font: #FFFFFF;

}

html.dark-mode .nav-background {
    background:
        url("data:image/svg+xml,%3Csvg width='500' height='53' viewBox='0 0 500 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M77.1396 0.5H381.486C390.216 0.5 397.945 4.75411 402.694 11.291C403.463 12.349 404.681 13.0526 406.03 13.0527C407.379 13.0527 408.598 12.3492 409.367 11.291C413.968 4.9583 421.365 0.768333 429.76 0.512695L430.575 0.5H473.352C487.795 0.5 499.5 12.1434 499.5 26.5C499.5 40.8566 487.795 52.5 473.352 52.5H430.575C421.846 52.5 414.117 48.2459 409.367 41.709C408.598 40.6508 407.379 39.9473 406.03 39.9473C404.681 39.9474 403.463 40.651 402.694 41.709C397.945 48.2459 390.216 52.5 381.486 52.5H77.1396C68.6574 52.5 61.1204 48.4834 56.3428 42.2588C55.2889 40.8857 53.6809 39.9473 51.8936 39.9473C50.1061 39.9473 48.4983 40.8856 47.4443 42.2588C42.6669 48.4834 35.1306 52.4999 26.6484 52.5C12.2048 52.5 0.500214 40.8566 0.5 26.5L0.508789 25.8291C0.8612 12.0053 12.0663 0.859031 25.9736 0.508789L26.6484 0.5C35.1306 0.500149 42.6669 4.51665 47.4443 10.7412C48.4983 12.1144 50.1061 13.0527 51.8936 13.0527C53.6809 13.0527 55.2889 12.1143 56.3428 10.7412C61.1204 4.51664 68.6574 0.5 77.1396 0.5Z' stroke='white' stroke-opacity='0.2'/%3E%3C/svg%3E") no-repeat center / contain,
        var(--glass-fill);
}

main.container {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

main.container.page-exit {
    opacity: 0;
    transform: translateY(12px);
}


section[id] {
    scroll-margin-top: 70px;
    /* adjust if needed */
}


h1 {
    font-weight: normal;
    font-size: 36px;
    color: var(--h-font-color);
    font-family: "Google Sans", sans-serif;
    letter-spacing: -1px;

}

h2,
h3,
h4 {
    color: var(--h-font-color);
    font-family: "Google Sans", sans-serif;
}

p {
    line-height: 180%;
    font-size: 16px;
    color: var(--p-font-color);
}

ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

ul li {
    line-height: 140%;
    color: var(--p-font-color);
}

#theme-icon,
#header-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    display: inline-block;
    width: 25px;
    height: 25px;
    object-fit: contain;
}

/* Navbar */
.nav-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 53px;
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: backdrop-filter 0.3s ease, background-color 0.3s ease;
}

.nav-background {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg width='500' height='53' viewBox='0 0 500 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M77.1396 0.5H381.486C390.216 0.5 397.945 4.75411 402.694 11.291C403.463 12.349 404.681 13.0526 406.03 13.0527C407.379 13.0527 408.598 12.3492 409.367 11.291C413.968 4.9583 421.365 0.768333 429.76 0.512695L430.575 0.5H473.352C487.795 0.5 499.5 12.1434 499.5 26.5C499.5 40.8566 487.795 52.5 473.352 52.5H430.575C421.846 52.5 414.117 48.2459 409.367 41.709C408.598 40.6508 407.379 39.9473 406.03 39.9473C404.681 39.9474 403.463 40.651 402.694 41.709C397.945 48.2459 390.216 52.5 381.486 52.5H77.1396C68.6574 52.5 61.1204 48.4834 56.3428 42.2588C55.2889 40.8857 53.6809 39.9473 51.8936 39.9473C50.1061 39.9473 48.4983 40.8856 47.4443 42.2588C42.6669 48.4834 35.1306 52.4999 26.6484 52.5C12.2048 52.5 0.500214 40.8566 0.5 26.5L0.508789 25.8291C0.8612 12.0053 12.0663 0.859031 25.9736 0.508789L26.6484 0.5C35.1306 0.500149 42.6669 4.51665 47.4443 10.7412C48.4983 12.1144 50.1061 13.0527 51.8936 13.0527C53.6809 13.0527 55.2889 12.1143 56.3428 10.7412C61.1204 4.51664 68.6574 0.5 77.1396 0.5Z' stroke='black' stroke-opacity='0.1'/%3E%3C/svg%3E") no-repeat center / contain,
        var(--glass-fill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    mask-image: url("data:image/svg+xml,%3Csvg width='500' height='53' viewBox='0 0 500 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M381.487 0C390.382 0 398.258 4.33563 403.098 10.997C403.784 11.941 404.859 12.5528 406.031 12.5528C407.202 12.5528 408.277 11.941 408.963 10.997C413.803 4.33561 421.679 4.72302e-05 430.575 0H473.352C488.069 0 500 11.8649 500 26.5004C500 41.1358 488.069 53 473.352 53H430.575C421.679 53 413.803 48.6644 408.963 42.003C408.277 41.059 407.202 40.4472 406.031 40.4472C404.859 40.4472 403.784 41.059 403.098 42.003C398.258 48.6644 390.382 53 381.487 53H77.1392C68.4954 53 60.8142 48.9064 55.9457 42.5632C54.9704 41.2925 53.5009 40.4472 51.8933 40.4472C50.2858 40.4472 48.8164 41.2924 47.841 42.5632C42.9727 48.9063 35.292 52.9999 26.6484 53C11.9312 53 0.000217725 41.1358 0 26.5004C0 11.8649 11.9311 0 26.6484 0C35.292 0.000127156 42.9727 4.09376 47.841 10.4368C48.8164 11.7075 50.2858 12.5528 51.8933 12.5528C53.5009 12.5528 54.9704 11.7075 55.9457 10.4368C60.8142 4.09364 68.4954 0 77.1392 0H381.487Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='500' height='53' viewBox='0 0 500 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M381.487 0C390.382 0 398.258 4.33563 403.098 10.997C403.784 11.941 404.859 12.5528 406.031 12.5528C407.202 12.5528 408.277 11.941 408.963 10.997C413.803 4.33561 421.679 4.72302e-05 430.575 0H473.352C488.069 0 500 11.8649 500 26.5004C500 41.1358 488.069 53 473.352 53H430.575C421.679 53 413.803 48.6644 408.963 42.003C408.277 41.059 407.202 40.4472 406.031 40.4472C404.859 40.4472 403.784 41.059 403.098 42.003C398.258 48.6644 390.382 53 381.487 53H77.1392C68.4954 53 60.8142 48.9064 55.9457 42.5632C54.9704 41.2925 53.5009 40.4472 51.8933 40.4472C50.2858 40.4472 48.8164 41.2924 47.841 42.5632C42.9727 48.9063 35.292 52.9999 26.6484 53C11.9312 53 0.000217725 41.1358 0 26.5004C0 11.8649 11.9311 0 26.6484 0C35.292 0.000127156 42.9727 4.09376 47.841 10.4368C48.8164 11.7075 50.2858 12.5528 51.8933 12.5528C53.5009 12.5528 54.9704 11.7075 55.9457 10.4368C60.8142 4.09364 68.4954 0 77.1392 0H381.487Z' fill='black'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.nav-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.circle-btn {
    width: 54px;
    height: 100%;
    border: none;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0px;
    font-size: x-large;
}

.pill-area {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    height: 100%;

    font-family: var(--font-stack);
    font-size: 16px;
}

.play-link {
    width: 98px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.play-link a {
    text-decoration: none;
    transition: color 0.3s ease;
    color: var(--p-font-color);
    font-family: var(--font-stack);
    font-size: 16px;
}

.nav-link {
    text-decoration: none;
    color: var(--p-font-color);
    font-size: 0.9rem;
    font-family: var(--font-stack);
    position: relative;
    transition: color 0.3s ease;
    font-size: 16px;

}


.nav-link::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: var(--primary-color);
    box-shadow: 0 0 12px var(--primary-color);
    border-radius: 10px;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.3s ease;
}

.nav-link.active,
.nav-link:hover {
    color: var(--primary-color);
}

.nav-link.active::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Layout Container */
.container {
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 800px;
    margin: 75px auto;
    padding: 20px;
}

.rundown h1 {
    margin-top: 70px;
}

.rundown p {
    margin: 0;
}

#DNLink {
    color: var(--primary-color);
    background-color: var(--accent-color);
    border-radius: 999px;
    padding: 5px 10px 5px 10px;
    font-size: 16px;

    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

#DNLink:hover {
    cursor: pointer;
}

/* Profile Card */
.profile-card {
    display: flex;
    border-radius: 35px;
    padding: 40px;
    max-width: 800px;
    align-items: center;
    justify-content: space-between;

    border: 1px solid var(--stroke-color);
    background-color: var(--sub-bg-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

    transition: background-color 0.5s ease, color 0.5s ease;
    transition: border 0.5s ease, color 0.5s ease;
}

#avatar-root {
    background: var(--avatar-background-color);
    border-radius: 30px;
    border: 1px solid #F27F4F;
}

.avatar {
    position: relative;
    width: 300px;
    aspect-ratio: 3 / 4;
}

.avatar img {
    position: absolute;
    height: 100%;
    width: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

.base {
    z-index: 1;
}

.move,
.topbase {
    z-index: 2;
}

.avatar-container {
    flex: 0 0 40%;
}

.profile-details {
    flex: 0 0 50%;
    position: relative;
}

.top-decoration {
    top: -40px;
    right: 0;
    padding: 15px 0;
    text-align: right;
}

.top-decoration img {
    height: 100px;
    width: auto;
    filter: drop-shadow(0px 0px 1.5px rgba(72, 72, 72, 0.3));
}

/* Info */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid var(--darker-stroke-color);
}

.info-row:last-child {
    border-bottom: none;
}

.label {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--p-font-color);
    font-weight: 600;
}

.value {
    font-size: 18px;
    color: var(--h-font-color);
}

.value.bold {
    font-weight: 700;
}

.value.italic {
    font-style: italic;
    color: var(--h-font-color);
    font-weight: 300;
}

/* Social Icons */
.social-links {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    justify-content: flex-end;
}

.icon-blue img {
    width: 40px;
    height: 40px;
    transform: scale(1);
    transition: var(--transition-behavior-out);
}

.icon-blue img:hover {
    transform: scale(1.1);
    transition: var(--transition-behavior-in);
}

/* Work Grid */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.project-card {
    background: var(--sub-bg-color);
    border: 1px solid var(--stroke-color);
    border-radius: 20px;
    padding: 8px;
    text-align: left;

    transition: var(--transition-behavior-out);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

    display: flex;
    flex-direction: column;
}

.profile-card-img {
    width: auto;
    height: 222px;
}

.project-card img {
    border-radius: 10px;
    overflow: hidden;
    object-fit: cover;
    border: 1px solid var(--stroke-color);


    width: 100%;
    height: 100%;
    object-fit: cover;

}

.project-card-details {
    padding: 20px 25px 0px 25px;
}

.project-card-details h3 {
    font-weight: 700;
    font-size: x-large;
    margin: 0;
    margin-bottom: 5px;
}

.project-card-details p {
    font-size: 14px;
    margin-top: 5px;
}

.tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0px 25px 0px 25px;
}

.tags span {
    color: var(--tag-font);
    background-color: var(--tag-background);
    padding: 6px 16px;
    border-radius: 15px;
    font-size: 14px;
}

.date {
    font-size: 12px;
    color: var(--h-font-color);
    font-style: italic;
}

.project-button {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;

    background: transparent;
    color: var(--p-font-color);
    border: 1px solid var(--h-font-color);
    border-radius: 50px;

    padding: 5px 5px 5px 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;

    align-self: flex-end;
    margin: 8px;

    transition: background-color 0.2s ease, color 0.2s ease;

}

.project-button img {
    width: 30px;
    height: auto;
    border: none;
}

.project-button:hover {
    background-color: var(--h-font-color);
    color: var(--sub-bg-color);
    transition: background-color 0.2s ease, color 0.2s ease;

}

/* Explore Section Styles */

.explore {
    display: flex;
    flex-direction: column;
}

.explore-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.explore h2 {
    margin: 0;
    margin-top: 20px;
}

.explore-item {
    display: grid;
    grid-template-columns: clamp(200px, 40%, 210px) 1fr;
    gap: 30px;

    background: var(--sub-bg-color);
    border: 1px solid var(--darker-stroke-color);
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition-behavior-out);

    min-height: unset;
}

.explore-preview {
    border-radius: 10px;
    border: 1px solid var(--darker-stroke-color);
    overflow: hidden;

    min-height: 0;
    height: 100%;
}

.explore-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.explore-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


.explore-content h3 {
    font-weight: 700;
    font-size: x-large;
    padding: 15px 0px 0px 0px;
    margin: 0;
}

.explore-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
    padding-right: 15px;
}


.explore-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}


.explore-tags span {
    color: var(--tag-font);
    background-color: var(--tag-background);
    padding: 6px 16px;
    border-radius: 15px;
    font-size: 14px;
}


.email-protect {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}

/* Experience */

.about-info {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.about-text {
    align-self: center;
}

.profile-image {
    flex: 0 0 300px;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--darker-stroke-color);
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-info>div:last-child {
    flex: 1;
}

.about-info p {
    color: var(--p-font-color);
}

.skills-container {
    margin: 10px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.experience-item {
    border-bottom: 1px solid var(--darker-stroke-color);
    padding-bottom: 25px;
    margin-bottom: 20px;
    transition: var(--transition-behavior-out);
}

.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.exp-brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.exp-logo {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: var(--avatar-background-color);
    object-fit: cover;
}

.exp-title {
    display: block;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--h-font-color);
}

.exp-company {
    color: var(--p-font-color);
    font-size: 0.9rem;
}

.exp-date {
    font-size: 0.85rem;
    color: var(--p-font-color);
}

.exp-description {
    font-size: 0.95rem;
    margin-bottom: 15px;
    color: var(--p-font-color);
}

/* CASE STUDY CSS */

.cs-header-light {
    background-color: #ffffff;
    padding: 140px 0 80px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cs-eyebrow {
    font-size: 16px;
    font-weight: 800;
    color: var(--secondary-font);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cs-title {
    font-size: 3.5rem;
    color: var(--h-font-color);
    font-weight: 800;
    margin: 15px 0 40px 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

.cs-hero-frame {
    width: 100%;
    aspect-ratio: 14 / 8;
    background: linear-gradient(135deg, #fce5d9 0%, #f28d6d 100%);
    border-radius: 40px;
    margin-bottom: 60px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.cs-hero-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-summary {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cs-summary p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.cs-col-sub {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 35px;
}

.cs-col-subgroup {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 35px;
}


.cs-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--secondary-font);
    margin-bottom: 15px;
    letter-spacing: 1px;
}


.case-study-images img {
    width: 100%;
    height: 100%;
}

.case-study-images2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    width: 100%;
}

.case-study-images2 img {
    width: 100%;
}

.case-study-gif {
    width: 33.333%;
    min-width: 260px;
    height: auto;
    display: block;
    margin: 24px auto;
}


.case-study-gif img {
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 15px rgba(41, 38, 38, 0.176);
}

.cs-body {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.insight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
}

.aggie-insight-grid {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.insight-items {
    background-color: var(--sub-bg-color);
    padding: 30px;
    margin: 0;
    box-shadow: 0 4px 15px rgba(41, 38, 38, 0.176);
}

.design-system {
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(41, 38, 38, 0.176);
    background-color: var(--sub-bg-color);
}

.design-system h4 {
    margin-top: 0;
}

.color-system {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 10px;
}

.color-box {
    width: 60px;
    height: 60px;
    border-radius: 10px;
}

.insight-items p {
    margin: 0;
}

.iterated-color {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.case-study-demo {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
}

.case-study-demo img {
    width: calc(33.33% - 10px);
}

.final-images {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    align-items: start;
    margin-top: 18px;
    align-items: baseline;
}

.final-images img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--darker-stroke-color);
    box-shadow: 0 4px 15px rgba(41, 38, 38, 0.176);
}

.final_last {
    grid-column: 1 / -1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 12px;
    justify-content: baseline;
    width: 100%;
    max-width: 100%;
}

.case-study-navigation {
    display: flex;
    justify-content: space-between;
}

.next-case-btn {
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.next-case-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.next-case-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.inactive-btn {
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--darker-stroke-color);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;

    pointer-events: none;
    cursor: not-allowed;
}

.play-container {
    display: grid;
    gap: 25px;
    grid-template-columns: 1fr 1fr;
}

.play-container .gameSec:last-child {
    grid-column: 1 / -1;
}


.gameSec {
    text-decoration: none;
    padding: 30px;
    border: 1px solid var(--darker-stroke-color);
    border-radius: 20px;
    transition: var(--transition-behavior-out);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

}

.gameSec:hover {
    transform: var(--transform-behavior);
    transition: var(--transition-behavior-in);
    cursor: pointer;
    transform: scale(1.02);
}

.gameSec img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;

    border: 1px solid var(--darker-stroke-color);
}

.bento {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bento-tile {
    border: 1px solid var(--stroke-color);
    background: var(--sub-bg-color);
    border-radius: 18px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    transition: var(--transition-behavior-out);
    position: relative;
    min-height: 160px;
}

.bento-tile:hover {
    transform: var(--transform-behavior);
    transition: var(--transition-behavior-in);
}

.bento-tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.bento-span-2 {
    grid-column: span 2;
}

.bento-span-3 {
    grid-column: span 3;
}

.bento-tall {
    grid-row: span 2;
    min-height: 340px;
}

@media (max-width: 540px) {
    .bento {
        grid-template-columns: 1fr;
    }

    .bento-span-2 {
        grid-column: span 1;
    }

    .bento-span-3 {
        grid-column: span 1;
    }

    .iterated-color {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }
}

.lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, .78);
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease;
}

.lightbox-inner {
    max-width: min(1200px, 96vw);
    max-height: min(92vh, 92vh);
    position: relative;

    transform: scale(.98);
    opacity: 0;
    transition: transform 180ms ease, opacity 180ms ease;
}

.lightbox.is-open .lightbox-inner {
    transform: scale(1);
    opacity: 1;
}

.lightbox-img {
    max-width: 96vw;
    max-height: 92vh;
    display: block;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
}

.lightbox-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(20, 20, 20, .6);
    color: #fff;
    cursor: pointer;
}



@media (min-width: 900px) {
    .gameCard {
        grid-template-columns: 1fr 1.2fr;
        align-items: start;
    }
}

@media (max-width: 600px) {
    .explore-item {
        grid-template-columns: 1fr;
    }

    .explore-preview {
        height: 220px;
    }

    .about-info {
        flex-direction: column;
        margin: 0;
    }

    .profile-image {
        width: 100%;
        height: 100%;
    }

    .cs-col-sub {
        display: grid;
        grid-template-columns: 1fr;
        gap: 35px;
    }

}


@media (max-width: 768px) {

    .grid {
        grid-template-columns: 1fr;
    }

    .profile-card {
        flex-direction: column;
        justify-content: center;
        padding: 5%;
        gap: 15px;
    }

    .top-decoration {
        display: none;
    }

    .profile-details {
        width: 100%;
    }

    /* explore section */
    .explore-item {
        flex-direction: column;
    }

    .explore-content h3 {
        padding: 0;
    }

    .explore-preview {
        flex: 0 0 100%;
        width: 100%;
    }

    .explore-content {
        margin-left: 25px;
    }

    .cs-summary-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cs-title {
        font-size: 2.5rem;
    }

    .insight-grid {
        grid-template-columns: 1fr;
    }

    .aggie-insight-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .design-system {
        flex-direction: column;
    }


}