/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,700&family=Inter:wght@300;400;500;700&display=swap');

/* 
font-family: 'DM Sans', sans-serif;
font-family: 'Inter', sans-serif;
extra light 200, light 300, medium 500, bold 700
 */

body {
    font-family: 'DM Sans', sans-serif;
    color: white;
    background-color: black;
    -webkit-font-smoothing: antialiased; /* makes all text thinner and prettier */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
a {
    text-decoration: none;
    color: white;
}
.italic {
    font-style: italic;
}

.material-symbols-rounded.arrow-up, li.flip-contain{
    vertical-align: sub;
}
.material-symbols-rounded.arrow-up {
    padding-left: 0.3rem;
    padding-top: 0.1rem;
}

/* -------------------------------------
-------- NAVBAR NAVIGATION MENU --------
---------------------------------------- */
/* cancel out default hamburger menu styling */
button.navbar-toggler { border: 0; }
button.navbar-toggler:focus { outline: none; box-shadow: none; }

/* add custom hamburger menu with transition onclick */
a#menu-icon { display: inline-block; }
a#menu-icon .bar {
    margin: 5px;
    width: 25px;
    height: 2px;
    background: white;
    border-radius: 1.5px;
    transition: margin 0.25s ease-out, transform 0.25s ease-out;
}
#menu-icon.close .bar:first-child {
    transform: translateY(7px) rotate(45deg); /* margin plus height */
}
#menu-icon.close .bar:nth-child(2) {
    opacity: 0;
}
#menu-icon.close .bar:last-child {
    transform: translateY(-7px) rotate(-45deg);
}

.navbar-nav .nav-link {
    color: white;
}
.navbar .navbar-brand .flip-contain {
    font-size: 1.563rem;
}

.navbar.bg-dark { background-color: rgba(0, 0, 0, 0.80) !important; }
.navbar {
    top: 0;
    left: 0;
    height: 86px;
    padding: 0;
}
.container-fluid { /* important */
    /* padding: 0 5.65rem; */
    padding: 0 5.2rem;
    max-width: 1400px;
}

.navbar ul.navbar-nav {
    gap: 1.6rem;
    font-size: 1.125rem;
    align-items: center;
}

#resumeModal .modal-body, #resumeModal .modal-body a {
    color: black;
} #resumeModal .modal-body a { text-decoration: underline;}
/* @media (max-width: 1024px) { */
@media (max-width: 1200px) { /* on desktop/tablet, adjust padding with smaller screens */
    .container-fluid {
        padding: 0 2.188rem;
    }
    .navbar ul.navbar-nav {
        gap: 1.3rem;
    }
}


/* -------------------------------
------'FLIP' HOVER ANIMATION -----
---------------------------------- */
.flip-contain {
    position: relative;
    height: 1.7rem; /* Adjust based on content height */
    overflow: hidden;
    display: inline-block;
}
.navbar-brand .flip-contain { height: 2rem; } /* this is so my name doens't get cut off and the child flip item isn't staggered incorrectly */

@media (min-width: 767px) { /* static widths on large browsers, auto on smaller screens */
    .w600 { width: 600px; }
    .w320 { width: 320px; }
    .w100 { width: 100px; }
    .w90 { width: 90px; } /* can't figure out dynamic widths based on link text, so add widths of containers manually.*/
    .w83 { width: 83px; }
    .w76 { width: 76px; }
    .w64 { width: 64px; }
    .w50 { width: 50px; }
    .w40 { width: 40px; }
}

.flip-item {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
    line-height: 1.7rem; /* ! Set line-height equal to the height of the container eg flip-contain */  
}

.flip-item:nth-child(2) {
    transform: translateY(100%);
    color: #9b9b9b;
}
.flip-contain:hover .flip-item:nth-child(1) {
    transform: translateY(-100%);
}
.flip-contain:hover .flip-item:nth-child(2) {
    transform: translateY(0);
}

/* -------------------------------
------- NAVBAR MEDIA QUERY -------
---------------------------------- */
@media (max-width: 767px) { 
    .flip-contain {
        position: static;
        height: auto;
        overflow: hidden;
        display: block;
    }
    .flip-item:nth-child(2) {
        display: none;
        /* hide all second flip links */
    } 
    .navbar ul.navbar-nav {
        gap: 1.5rem;
        align-items: start; /* important for LEFT ALIGN NAV ITEMS */
        padding: 2rem; /* IMPORTANT THAT IT IS THE SAME AS PAGE LR PADDING */
    }
    .navbar .navbar-brand .flip-contain p { /* BRAND LOGO */
        font-size: 1.3rem;
    }
    .flip-item,
    .nav-link p {
        /* disable animation, fix margins padding */
        position: static;
        display: flex;
        /* align-items: center; */
        line-height: normal;
        margin: 0;
        border: none;
        transition: none;
        font-size: 1rem;
    }
    .navbar.bg-dark {
        background-color: rgba(0, 0, 0, 0.90) !important;
    }
    #navbarNavDropdown {
        background-color: rgba(0, 0, 0, 0.90) !important;
        padding: 2rem 0 4rem 0;
        z-index: 1000;
    }
    .mobile-only {
        display: block;
    }
    .mobile-hide {
        display: none;
    }
    .flip-contain:hover .flip-item:nth-child(1) {
        transform: none;
    }
    .container-fluid {
        padding: 0;
    }
    .navbar {
        height: 65px;
    }
    .navbar-brand {
        height: 65px;
        /* VERY IMPORTANT TO MAKE THIS SAME AS NAVBAR HEIGHT */
        /* height: 86px; */
        margin-left: 2rem; 
        display: flex;
        align-items: center;
        /* to replace paddings in container-fluid, cancelled out to do 
        background for toggled menu */
    }
    .navbar-toggler {
        margin-right: 25px;
    }
    .navbar-collapse.show {
        width: 100vw;
    }
    .navbar-nav.px-4 {
        padding: 0 !important;
    }
}
@media (max-width: 576px) {
    .navbar-brand {
        margin-left: 1.5rem;
    }
    .navbar-toggler {
        margin-right: .5rem;
    }
    .navbar ul.navbar-nav {
        padding: 1.5rem; /* IMPORTANT THAT IT IS THE SAME AS PAGE LR PADDING */
    }
}

/* ----------------------
----------FOOTER --------
------------------------- */
.footer-main .flip-item { /* cancel out other styling */
    justify-content: left;
}

.footer-main {
    display: flex;
    align-items: center;
    height: 12.5rem;
    background-color: #111;
}
.footer-wrap {
    display: flex;
    width: 100%;
}
/* left */
.bye-message {
    width: 60%;
    padding-right: 4rem;
}
.bye-message h3 { font-size: 1.6rem; font-weight: 300;}
.bye-message p { font-size: .8rem; padding-top: 1rem;}
/* right */
.footer-nav {
    /* two columns */
    display: flex;
    gap: 4rem;
    padding-top: 0.3rem;
}
.footer-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 1.1rem;
}


/* -----------------------------
------ FOOTER MEDIA QUERY ------
-------------------------------- */
@media (max-width: 1200px) {
    .footer-main {
        padding: 0 1rem;
    }
    .footer-nav {
        gap: 2.5rem;
    }
    .bye-message {
        width: 70%;
    }
}
@media (max-width: 767px) {
    .footer-main {
        padding: 0 2.5rem 0 2.5rem;
    }
    .bye-message h3 { font-size: 1.3rem;}
    .footer-nav ul {
        gap: 0.5rem;
    }
    .footer-nav .navbar-nav .nav-item .nav-link {
        padding: 0 !important;
    }
    .footer-nav .navbar-nav .nav-item .nav-link p {
        font-size: 0.9rem;
    }
    .bye-message {
        width: 67%;
        padding-right: 3rem;
    }
    .footer-nav {
        gap: 2rem;
    }
}
@media (max-width: 576px) {
    .footer-main {
        padding: 0 2rem;
        height: 18rem;
    }
    .footer-wrap { flex-direction: column; }
    .footer-nav {
        gap: 4rem;
    }
    .bye-message {
        width: 100%;
        padding: 0;
        margin-bottom: 1.5rem;
    }
    .footer-nav ul { padding-left: 1rem;}
    .bye-message h3 {margin-bottom: .8rem;}
    .bye-message p {padding-top: 0;}
}


/* ----------------------
------ HOME PAGE --------
----------------------- */
body#home-page {
    background-color: #111;
}
.home-jumbotron {
    margin-top: 86px; /* bc fixed navbar */
    height: 83vh;
    max-height: 864px;
    min-height: 580px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.welcome p {
    max-width: 24rem;
    font-size: 1.167rem;
    line-height: 1.6rem;
}
.welcome h2 {
    padding-bottom: 1.3rem;
    font-size: 5.7rem;
    line-height: 6rem;
}
.right-welcome {
    padding-top: 7.47rem;
}
.right-welcome .navbar-nav p.flip-item {
    font-size: 1.2rem;
}
.avatar-wrapper {
    position: relative;
    height: 110px;
    width: 160px;
    margin-bottom: 1.2rem;
}
#lets-explore {
    color: #999999;
    font-size: 1.05rem;
}
#circle {
    position: absolute;
    height: 101px;
    width: 101px;
    border-radius: 50%;
    /* background-color: #385F48; */
    background-color: #424C6F;
    right: 25px;
    top: 6px;
}
#avatar {
    position: absolute;
    right: 19px;
    transition: 0.18s ease-in-out;
}
#avatar:hover {
    transform: scale(1.1);
}
#avatar-caption {
    align-items: center;
}
#sparkle1 {
    position: absolute;
    right: 128px;
    top: 14px;
    transform: rotate(-7.85deg);
    transition: 0.25s ease-in-out;
}
#sparkle1:hover { transform: rotate(-70.463deg) rotate(30deg); }
#sparkle2 {
    position: absolute;
    right: -6px;
    top: 70px;
    transform: rotate(13.23deg);
    transition: 0.25s ease-in-out;
}
#sparkle2:hover { transform: rotate(32.723deg) rotate(30deg); }
.featured-container p { font-size: 1.1rem; color: white !important;}
.featured-container .nav-item {
    margin-top: 1.2rem;
}
.featured-container .material-symbols-rounded.arrow-up { font-size: 1.3rem; padding-left: .3rem; }
.featured-container .flip-item {
    justify-content: start;
}
.featured-thumb-wrap {
    position: relative; /* for the hover overlay arrow */
    border-radius: 1.5rem;
    overflow: hidden;
}
.featured-thumb-wrap .featured-hover-redirect {
    position: absolute;
    z-index: 2;
    opacity: 0;
    width: 55px;
    height: 55px;
    left: 25px;
    top: 25px;
    transition: .3s ease-out;
}
img.proj-thumbnail {
    width: 100%;
    transition: .3s ease-out;
}
.featured-container:hover .featured-thumb-wrap .featured-hover-redirect {
    transform: rotate(-45deg);
    opacity: 1;
}
.featured-container:hover img.proj-thumbnail {
    transform: scale(1.03);
}
.featured-container:hover .flip-contain .flip-item:nth-child(1) {
    transform: translateY(-100%);
}
.featured-container:hover .flip-contain .flip-item:nth-child(2) {
    transform: translateY(0);
}
.feature-split {
    display: flex;
    margin-bottom: 10rem; /* attention */
    gap: 1.5rem;
}
.feature-split .featured-split-item {
    flex: 1;
}
.feature-split .featured-split-item .featured-thumb-wrap {
    width: 100%;
}
.homepage-header {
    margin-top: 9rem; /* attention */
    padding-bottom: 2rem;
}
.homepage-header p {
    font-weight: 700;
    font-size: 22px;
}


/* @media (max-width: 1024px) { */
@media (max-width: 1200px) {
    .welcome h2 {
        font-size: 4.5rem;
        line-height: 4.8rem;
    }
    .welcome p {
        max-width: 24rem;
        font-size: 1.1rem;
    }
    .right-welcome {
        padding-top: 4.9rem;
    }
}
@media (max-width: 767px) {
    .home-jumbotron {
        padding: 0 2.5rem;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    .welcome h2 {
        font-size: 4rem;
        line-height: 4.3rem;
        margin-bottom: 0;
    }
    .welcome p {
        max-width: 23rem;
        font-weight: 500;
    }
    .right-welcome {
        padding-top: 2.3rem;
    }
    /* nyu cas */
    #avatar-caption {
        align-items: start;
    }
    #avatar-caption .nav-link { /* get rid of extra top bottom padding */
        padding: 2px 0;
    }
    .right-welcome .navbar-nav p.flip-item {
        font-size: 1.1rem;
        font-weight: 500;
    }
    #lets-explore {
        font-size: .85rem;
    }
    /* featured */
    .featured-container:hover .flip-contain .flip-item:nth-child(1) {
        transform: none;
    }
    .featured-section {
        padding: 0 2rem;
    }
    /* feature split */
    .feature-split {
        margin-bottom: 8rem; /* attention */
    }
    .homepage-header {
        margin-top: 7rem; /* attention */
        padding-bottom: 2rem;
    }
    .homepage-header p {
        font-size: 16px;
    }
    .homepage-header img { /* paper plane */
        width: 18px;
    }
}
@media (max-width: 576px) {
    .featured-section {
        padding: 0 1rem;
    }
    .home-jumbotron {
        height: 80vh;
        padding: 0 1.5rem;
    }
    .welcome h2 {
        font-size: 3.3rem;
        line-height: 3.4rem;
    }
    /* featured */
    .featured-container .nav-item {
        margin-top: .9rem;
    }
    .featured-container p {
        font-size: .9rem;
    } 
    .featured-container .material-symbols-rounded.arrow-up {
        font-size: 1.1rem;
    }
    .featured-thumb-wrap {
        border-radius: .6rem;
    }
    .feature-split {
        gap: .8rem;
        margin-bottom: 6rem; /* attention */
    }
    .homepage-header {
        margin-top: 5rem; /* attention */
        padding-bottom: 1rem;
    }
}

/* --------------------
---- CONTACT PAGE -----
---------------------- */
body#contact-page {
    background-color: #111;
}
.contact-jumbotron-wrap {
    margin-top: 86px; /* for fixed navbar */
    padding: 0 5.75rem 0 7rem;
    height: 70vh;
    max-height: 702px;
    margin-bottom: 10rem; /* added when there is no contact form */
}
.contact-jumbotron {
    display: flex;
    justify-content: space-between;
    height: 100%
}
.connect-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 6rem;
}
.connect-container p.greeting {
    font-size: 1.25rem;
}
.connect-container h2 {
    font-weight: 400;
    font-size: 2.875rem;
    margin-bottom: 2rem;
}
.connect-container .navbar-nav{
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}
.connect-container .navbar-nav .flip-item {
    justify-content: left;
}
.arrow-up {
    padding-right: .5rem;
}
.polaroids-contain {
    width: 50%;
    position: relative;
}
img.polaroid {
    position: absolute;
    width: 7.6rem;
    height: auto;
    border: 8px solid white;
    border-top-width: 15px;
    border-bottom-width: 32px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform .2s ease-out;
}
#bucky {
    top: 230px;
    right: 400px;
    transform: rotate(-8.84deg);
}
#cake {
    top: 100px;
    right: 200px;
    transform: rotate(3.89deg);
}
#ocean {
    top: 180px;
    right: 60px;
    transform: rotate(14.79deg);
}
#bucky:hover { transform: scale(1.3) rotate(-8.84deg); }
#cake:hover { transform: scale(1.3) rotate(3.89deg); }
#ocean:hover { transform: scale(1.3) rotate(14.79deg); }

/* ------------------------------
---- CONTACT PAGE MEDIA QUERY ---
--------------------------------*/
@media (max-width: 1200px) {
    #bucky { right: 200px; }
    #cake { right: 50px;}
    #ocean { right: 10px; }
}
@media (max-width: 1024px) { /* on desktop/tablet, adjust padding with smaller screens */
    .contact-jumbotron-wrap {
        padding: 0 2.188rem;
    }
    .connect-container h2 {
        font-size: 2.7rem;
    }
}
@media (max-width: 820px) {
    .connect-container h2 { font-size: 2rem; }
    .connect-container p.greeting { font-size: 1rem;}
    .connect-container { width: 100% }
    .polaroids-contain { width: 100%; height: 100%;}
    .contact-jumbotron {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .contact-jumbotron-wrap { height: 600px; }
    #bucky { left: 10%; top: 100px;}
    #cake { right: 30%;}
    #ocean { right: 5%; top: 100px;}
    .connect-container .navbar-nav {
        gap: .8rem;
    }
}
@media (max-width: 576px) {
    .connect-container p.greeting {
        margin-bottom: .5rem;
    }
    .connect-container h2 {
        margin-bottom: 1.4rem;
    }
    .connect-container .navbar-nav p {
        font-size: 1rem;
    } 
    .connect-container .navbar-nav .material-symbols-rounded.arrow-up {
        font-size: 1.2rem;
    }
}

/* --------------------
----- ABOUT PAGE ------ 
----------------------- */
body#about-page {
    background-color: #111;
}
.about-page-wrap {
    margin-top: 86px; /* for fixed navbar */
    display: flex;
    align-items: center;
    flex-direction: column;
}
.about-page-wrap #aboutme-1,
.about-page-wrap #aboutme-2,
.about-page-wrap #vibes {
    max-width: 75rem;
    margin-bottom: 10rem;
}
.about-page-wrap #photo-gallery {
    max-width: 74rem;
    margin-bottom: 7rem;
}
#aboutme-1 { margin-top: 8rem; }
#aboutme-1,
#aboutme-2 {
    display: flex;
    gap: 7.8rem;
} 
#vibes { display: flex; justify-content: space-between; }
.about-page-wrap h2,
.about-page-wrap h3 {
    text-transform: uppercase; 
    font-weight: 300;
    letter-spacing: 0.1em;
}
.about-page-wrap h2 {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.about-page-wrap img {
    border-radius: 1.25rem;
}
#bio-1 {
    flex: 4;
}
#bio-2 {
    flex: 4;
}
.spotify-songs {
    max-width: 550px;
}
.spotify-songs iframe {
    margin-bottom: .5rem;
}
.about-page-wrap .wrapped-img {
    width: 100%;
}
#audrey-1, #audrey-2 { 
    flex: 3;
}
img#link-zelda {
    width: 240px;
    height: 240px;
    margin-top: 40px;
}
/* IMAGE CAROUSEL ANIMATION */
.carousel-contain {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.carousel-contain::before,
.carousel-contain::after {
    position: absolute;
    top: 0;
    height: 100%;
    width: 167.524px;
    z-index: 2;
    content: "";
}
.carousel-contain::after {
    right: 0;
    background: linear-gradient(to right, rgba(0,0,0,0), #111);
}
.carousel-contain::before {
    left: 0;
    background: linear-gradient(to left, rgba(0,0,0,0), #111);
}
.carousel-wrapper {
    display: inline-block;
    animation: slide 52s linear infinite; /* Adjust the duration as needed */
}
.carousel-wrapper img {
    width: auto;
    height: 400px;
    margin: 0 6px;
    border-radius: 10px;
    scroll-snap-align: start;
}
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
/* ----------------------------
---- ABOUT PAGE MEDIA QUERY ---
------------------------------- */
@media (max-width: 1200px) {
    .about-page-wrap .container-fluid {
        padding: 0 3.5rem;
    }
    .about-page-wrap #aboutme-1,
    .about-page-wrap #aboutme-2 {
        gap: 6rem;
    }
}
@media (max-width: 1024px) {
    .about-page-wrap #aboutme-1,
    .about-page-wrap #aboutme-2 {
        gap: 4rem;
        margin-bottom: 4rem;
    }
    #bio-1, #bio2 {
        flex: 3;
    }
    #audrey-1, #audrey-2 { 
        flex: 2;
    }
    img#link-zelda {
        display: none;
    }
    .spotify-songs {
        max-width: 100%;
    }
    .about-page-wrap #aboutme-1,
    .about-page-wrap #aboutme-2, 
    .about-page-wrap #vibes {
        padding: 2rem 5rem;
    }
    .about-page-wrap #vibes {
        margin-bottom: 7rem;
    }
}
@media (max-width: 767px) {
    .about-page-wrap {
        justify-content: start;
    }
    .about-page-wrap h2 {
        margin-bottom: 2.5rem;
    }
    #aboutme-1 { flex-direction: column-reverse; }
    #aboutme-2, #vibes { flex-direction: column; }
    #bio-1, #bio-2 { max-width: 100%; padding-bottom: 1rem;}
    img#audrey-1 { width: 80%; height: auto; }
    img#audrey-2 { width: 80%; height: auto; }
    .about-page-wrap #aboutme-1,
    .about-page-wrap #aboutme-2, 
    .about-page-wrap #vibes {
        padding: 0 3rem;
        margin-bottom: 6rem;
    }
    #aboutme-1 { margin-top: 4rem; }
}
@media (max-width: 576px) {
    .about-page-wrap #aboutme-1,
    .about-page-wrap #aboutme-2, 
    .about-page-wrap #vibes {
        padding: 0 1.5rem;
    }
    .about-page-wrap h2 {
        margin-bottom: 1.5rem;
        font-size: 1.1rem;
    }
    .about-page-wrap p {
        font-size: .85rem;
    }
    .about-page-wrap #photo-gallery {
        margin-bottom: 5rem;
    }
    #aboutme-1,
    #aboutme-2 {
        gap: 2rem;
    }
    img#audrey-2,
    img#audrey-1 { width: 100%; }
    .carousel-wrapper img {  height: 300px; }
}

/* ----------------------
------- PLAY PAGE -------
------------------------- */
body#play-page {
    background-color: #111;
}
.play-page-wrap {
    margin-top: 86px; /* for fixed navbar */
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.play-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 5rem 0 6rem;
}
#play-title-card {
    position: relative;
    white-space: nowrap;
}
#pl { margin-right: -11px; }
#ygroun { margin: 0 -7px 0 -11px; }
#letterA {
    transform: translateY(.25rem) rotate(-20.548deg);
}
#letterD {
    transform: translateY(.6rem) rotate(16.043deg);
}
.pointer {
    position: absolute;
    width: 25px;
    top: 3.1rem;
    right: -1.4rem;
}
#play-title-card p {
    font-size: 3.6rem;
    font-weight: 700;
    display: inline-block;
    letter-spacing: .8rem;
}
.categories {
    display: flex;
    justify-content: center;
    gap: .6rem;
    width: 56rem;
    padding: 2.2rem 0 1.2rem 0;
    border-bottom: white solid 1.2px;
}
.category-tag {
    padding: 0.5rem 1.3rem;
    border-radius: 1.5rem;
    font-size: .85rem;
    font-weight: 600;
}
#cc-tag { background-color: #ff9a3b; color: #a24713; }
#paint-tag { background-color: #C07FE8; color: #6E388E; }
#design-tag { background-color: #B2EBAD; color: #267D2F; }
#draw-tag { background-color: #e65ecd; color: #801876; }
#digart-tag { background-color: #85B6FF; color: #1251AF; }

.play-content {
    max-width: 82rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.play-col-1,
.play-col-2, 
.play-col-3,
.play-col-4 {
    width: 50%;
    display: flex;
    flex-direction: column;
}
.play-col-1, .play-col-2 {
    justify-content: space-between;
}
.play-proj {
    width: 100%;
    border-radius: 1.25rem;
}
.lg-proj, .md-proj, .sm-proj {
    padding-bottom: 5rem;
}
.lg-proj {
    padding-left: 1.3rem;
    padding-right: 1.3rem;
}
.md-proj {
    padding-left: 3.4rem;
    padding-right: 3.4rem;
}
.sm-proj {
    padding-left: 5rem;
    padding-right: 5rem;
}
.still-lifes .lg-proj {
    width: 33%;
}
/* afkar proj */
.afkar-play div{
    flex: 1;
}

/* overlays */
.proj-contain {
    position: relative;
}
.overlay {
    display: none;
}
.play-content .material-symbols-rounded.arrow-up { /* override icon styling */
    font-size: 1.1rem;
}
.proj-contain:hover .overlay {
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    right: 0;
    top: 0;
    padding: 2rem;
    border-radius: 1.25rem;
    z-index: 100;
    overflow: scroll;
}
.proj-contain:hover .overlay a:hover { color: #999;}

#wizard-overlay {
    background-color: #1e1e3a;
}
#ripple-overlay {
    background-color: #1b1b1b;
}
#cards-overlay {
    background-color: #506c5f;
}
#whackamole-overlay {
    background-color: #99b9ff;
    color: black;
} #whackamole-overlay a { color: black;} #whackamole-overlay a:hover { color: #4d4d4d;}
#afkar-overlay {
    background-color: #1E1E20;
}


/* @media (max-width: 1024px) { */
@media (max-width: 1200px) {
    .categories {
        width: 45rem;
    }
    #play-title-card p {
        font-size: 3rem;;
    }
    #letterD {
        margin-right: -.4rem; /* important for centering. don't remove */
    }
    .pointer {
        width: 19.5px;
        top: 2.5rem;
        right: -1.3rem;
    }
    .md-proj, .sm-proj {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .proj-contain:hover .overlay {
        font-size: .95rem;
    }
}
@media (max-width: 767px) {
    .play-page-wrap { padding: 0 1rem; }
    .categories {
        width: 100%;
    }
    #play-title-card p {
        font-size: 2.7rem;;
    }
    #letterA {
        transform: translateY(.1rem) rotate(-20.548deg);
    }
    #letterD {
        transform: translateY(.5rem) rotate(16.043deg);
    }
    .pointer {
        position: absolute;
        width: 17.5px;
        top: 2.3rem;
        right: -1.2rem;
    }
    .categories {
        gap: .5rem;
    }
    .category-tag {
        padding: 0.4rem 1rem;
        font-size: .8rem;
        white-space: nowrap;
    }
    .proj-contain:hover .overlay {
        display: none;
    }
}
@media (max-width: 576px) {
    .play-header {
        margin: 5rem 0 3.5rem 0;
    }
    #play-title-card p {
        font-size: 2.4rem;
        letter-spacing: .6rem;
        margin-bottom: 0;
    }
    #letterA {
        transform: translateY(.1rem) rotate(-20.548deg);
    }
    #letterD {
        transform: translateY(.36rem) rotate(16.043deg);
        margin-right: -1rem; /* important for centering. don't remove */

    }
    #pl { margin-right: -9px; }
    #ygroun { margin: 0 -7.5px 0 -9px; }
    .categories {
        width: 100%;
        flex-wrap: wrap;
        gap: .5rem;
        padding: 2.5rem 0 2rem 0;
    }
    .category-tag {
        padding: 0.4rem 0.9rem;
        margin-bottom: .3rem;
    }
    /*  */
    .play-proj {
        border-radius: .7rem;
    }
    .lg-proj, .md-proj, .sm-proj, .still-lifes .lg-proj {
        padding-left: .5rem;
        padding-right: .5rem;
        padding-bottom: 1.1rem;
    }
    /* .still-lifes {
        flex-direction: column;
    }
    .play-col-1,
    .play-col-2, 
    .play-col-3,
    .play-col-4,
    .still-lifes .lg-proj {
        width: 100%;
    }
    .play-col-1,
    .play-col-2 {
        justify-content: start;
    } */
}
/* ------------------------
-------- PROJECT PAGES --------
--------------------------- */

/* project page */
.project-page-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 86px;
}

/* ------------------------
-------- LIBRARY PROJECT --------
--------------------------- */
#library-page {
    background-color: #1a1a1a;
}
.project-page-wrap.library-wrap {
    max-width: 1000px;
}
.library-content {
    width: 100%;
    gap: 9rem;
    margin-bottom: 10rem;
}
.library-wrap p {
    font-size: 1.1rem;
    margin: 0;
}
.library-wrap h1 {
    font-size: 2.2rem;
}
.library-wrap h2,
.library-wrap h3,
.library-wrap h4 {
    font-size: 1.1rem;
    font-weight: 700;
}
.library-wrap h2,
.library-wrap h3 {
    color: #FF6E81;
} 
.library-wrap h2 { margin: 0; }
.library-wrap h3 { margin-bottom: 2.3rem; }

/* hero */
.img-wrap img {
    width: 100%;
}
.library-hero img {
    margin: 5rem 0 4rem;
    border-radius: 1.25rem;
}
#library-info {
    margin: 2rem 0 4rem;
    font-size: 1.25rem;
}
.library-details {
    gap: 2rem;
    margin-bottom: 4.5rem;
}
.library-details div p:first-child {
    color: #FF6E81;
    font-weight: 700;
    padding-bottom: .5rem;
}
.iheart-nda {
    text-wrap: nowrap;
}
.iheart-appstore-wrap {
    background-color: #313131;
    border-radius: 1.25rem;
    padding: 20px 20px;
    gap: 1rem;
}
.appstore-cluster {
    gap: 1.5rem;
}
.appstore-cluster div:nth-of-type(1) {max-width: 70px;}
.appstore-cluster div:nth-of-type(2) {max-width: 155px;}
/* header underline */
.header-ul-wrap {
    margin-bottom: 3rem;
}
.header-ul {
    display: inline;
    color: #FF6E81;
    padding-bottom: .3rem;
    border-bottom: solid #FF6E81 3px;
}
/* split section */
.split-section {
    justify-content: space-between;
}
.split-right {
    width: 46%;
}

/* box properties */
.contain-lg {
    padding: 40px 32px 56px;
    background-color: #313131;
    border-radius: 1.25rem;
}
.contain-sm {
    padding: 32px 24px;
    background-color: #313131;
    border-radius: .625rem;
}
.contain-lg p,
.contain-sm p {
    font-size: 1rem;
}
.contain-lg h3 {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
.contain-img { /* rounded image box */
    border-radius: .625rem;
    overflow: hidden;
}
.cluster-16 {
    gap: 16px;
}
.cluster-56 {
    gap: 56px;
}
/* current overview */
.library-wrap p.library-respons {
    padding-top: 3rem;
    font-size: 1rem;
}
/* current experience */
.iheart-content-offerings {
    margin-top: 7rem;
}
.library-current-ux h4 {
    font-size: 0.875rem;
}
.library-current-ux ul {
    padding-left: 1rem;
    font-size: 0.75rem;
}
/* problem */
.library-problem {
    gap: 5.2rem;
}
.library-problem .split-right {
    gap: 4rem;
}
.library-problem .split-right h3 {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
.library-quant {
    padding: 40px 32px 0;
    background-color: #313131;
    border-radius: 1.25rem;
    text-align: center;
    gap: 2rem;
}
.library-quant p {
    font-size: 1rem;
    font-weight: 700;
    padding-top: .5rem;
}
.library-problem .contain-lg .d-flex { gap: 2rem; }
.library-problem .contain-lg .d-flex p { flex: 4; }
.library-problem .contain-lg .d-flex .img-wrap { flex: 3; }

/* user feedback */
.library-feedback {
    gap: 5.5rem;
}
/* existing research */
.library-existresearch {
    gap: 4rem;
}
.library-existresearch div:first-of-type { flex: 5; }
.library-existresearch .img-wrap { flex: 2; }
/* competitive analysis */
.library-competitive {
    gap: 7rem;
}
.library-competitive-row1 div.contain-sm:nth-of-type(1) {
    flex: 2;
}
.library-competitive-row1 div.contain-sm:nth-of-type(2) {
    flex: 1;
    padding: 2rem;
}

/* brainstorming */
.library-brainstorm {
    gap: 4rem;
}
.library-icon-grid {
    gap: 2rem;
    margin-bottom: 2rem;
}
.library-icon-grid div {
    flex: 1;
    gap: 1.5rem;
}
.lib-ideation-row2 {
    gap: .5rem;
}
.lib-ideation-row2 div:nth-of-type(1) { flex: 6; }
.lib-ideation-row2 div:nth-of-type(2) { flex: 6; }
.lib-ideation-row2 div:nth-of-type(3) { flex: 7; }
.library-crit {
    gap: 1rem;
    padding: 3rem 0;
}
.library-crit p:nth-of-type(1), .library-crit p:nth-of-type(3) { /* emojis */
    font-size: 60px;
}
.library-crit p:nth-of-type(2) { /* text between emojis */
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4rem;
    width: 60%;
}
/* narrowing solution */
.library-narrowing {
    gap: 4rem;
}
.library-solu .contain-sm {
    flex: 5;
}
.library-solu .contain-img {
    flex: 4;
}
.library-solu h4 {
    font-size: .95rem;
    margin-bottom: 1.5rem;
}
.library-solu .contain-sm p {
    font-size: 0.9rem;
}
/* testing */
.library-usertest {
    gap: 7rem;
}
.library-usertest .contain-lg {
    gap: 4rem;
    margin-bottom: 1.5rem;
}
.library-usertest h3 {
    margin-bottom: 2.3rem;
}
.library-key-findings div {
    flex: 1;
    padding: 24px 24px;
    background-color: #ddb9be;
    color: #313131;
}
.library-key-findings div p {
    font-size: 0.875rem;
    line-height: 1.125rem;
}
/* tabs or filters */
.library-tabfilt {
    gap: 5rem;
}
.library-tab-conclude {
    gap: 4rem;
}
/* final */
.library-final {
    /* gap: 10rem; */
    gap: 7rem;
}
.library-final h2 {
    display: inline;
    color: #FFA5B1;
    padding-bottom: .3rem;
    border-bottom: solid #FFA5B1 3px;
}
.library-final div:nth-of-type(1) { /* so header doesn't center align */
    width: 100%;
}
.library-wrap .library-final h4 {
    margin-bottom: 2.5rem;
}
.library-wrap .library-final p {
    font-size: 1rem;
}
.library-final-row1 {
    max-width: 750px;
}
.library-final-row1 { gap: 5rem; }
.library-final-row2 { gap: 3rem;}

.library-final-row2 .library-duoscreen { gap: .5rem; }
.library-final-row2 .library-duoscreen .img-wrap { flex: 1; }

.library-final-row1 .img-wrap { flex: 3; }
.library-final-row1 div:nth-of-type(2) { flex: 5; }

.library-final-row2 div:nth-of-type(1) { flex: 2; }
.library-final-row2 .library-duoscreen { flex: 3; }

.library-final-sortempty h4 { font-size: 1rem;}
.library-final-sortempty { gap: 3rem; }

/* design system */
.library-designsys {
    gap: 4rem;
}
.library-wrap .library-designsys h4 {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
/* reflect */
.library-reflect {
    gap: 5rem;
}
@media (max-width: 1024px) {
    /* hero */
    .library-wrap p {
        font-size: 1rem;
    }
    .library-wrap h1 {
        font-size: 2rem;
    }
    .library-wrap .library-details p {
        font-size: 1.1rem;
    }
    .library-wrap h2,
    .library-wrap h3,
    .library-wrap h4 {
        font-size: 1rem;
    }
    .library-wrap p.library-respons {
        padding-top: 2rem;
        font-size: .9rem;
    }
    /* current experience */
    .library-wrap .library-current-ux h4 {
        font-size: 0.875rem;
    }
    /* brainstorm */
    .library-crit p:nth-of-type(2) {
        font-size: .9rem;
        line-height: 1.2rem;
        width: 70%;
    }
}
@media (max-width: 767px) {
    .container-fluid.library-wrap {
        padding: 0 2rem;
    }
    .library-content {
        gap: 7rem;
    }
    /* hero */
    .library-hero img {
        border-radius: 1rem;
        margin: 3rem 0;
    }
    #library-info {
        font-size: 1.1rem;
        margin-bottom: 3rem;
    }
    .library-details {
        margin-bottom: 5rem;
    }
    .library-wrap .library-details p {
        font-size: 1rem;
    }
    .iheart-appstore-wrap {
        border-radius: 1rem;
        padding: 20px 25px;
        gap: 1.5rem;
    }
    .appstore-cluster {
        gap: .8rem;
    }
    /* split sections, row to column */
    .split-section {
        flex-direction: column;
    }
    .split-right {
        width: 100%;
    }
    /* boxes */
    .contain-lg {
        border-radius: 1rem;
        padding: 32px 24px;
    }
    .contain-sm {
        padding: 24px 20px;
    }
    /* problem */
    .library-problem {
        gap: 4rem;
    }
    .library-problem .split-right {
        gap: 3rem;
    }
    .library-problem .split-right h3 {
        font-size: 1.1rem;
        margin-bottom: 1.2rem;
    }
    .library-quant {
        padding: 32px 24px 0;
        border-radius: 1rem;
    }
    .library-quant p {
        font-size: .85rem;
        line-height: 1.1rem;
    }
    .library-problem .contain-lg .d-flex { 
        flex-direction: column;
    }
    .library-problem .contain-lg .d-flex .img-wrap {
        padding: 2rem 6rem;
    }
    /* competitive */
    .library-competitive {
        gap: 4rem;
    }
    /* brainstorm */
    .library-crit p:nth-of-type(1),
    .library-crit p:nth-of-type(3) {
        font-size: 40px;
    }
    .library-crit p:nth-of-type(2) {
        font-size: .8rem;
        width: 70%;
    }
    /* narrowing in */
    .library-solu .contain-sm {
        flex: 1;
    }
    .library-solu .contain-img {
        flex: 1;
    }
    .library-solu h4 {
        font-size: .9rem;
    }
    .library-solu .contain-sm p {
        font-size: 0.85rem;
    }
    /* testing */
    .library-usertest {
        gap: 4rem;
    }
    .library-key-findings div {
        padding: 20px 16px;
    }
    .library-key-findings div p {
        font-size: 0.7rem;
        line-height: .9rem;
    }
    .library-tab-conclude {
        gap: 2.5rem;
    }
    /* final */
    .library-final {
        gap: 5rem;
    }
    .library-final-row1,
    .library-final-row2 {
        gap: 2rem;
    }
    .library-final-row2 div:nth-of-type(1) { flex: 3; }
    .library-final-row2 .library-duoscreen { flex: 5; }
    .library-wrap .library-final p {
        font-size: .85rem;
    }
}
@media (max-width: 576px) {
    .container-fluid.library-wrap {
        padding: 0 1.5rem;
    }
    .library-content {
        gap: 5rem;
    }
    .library-wrap p {
        font-size: .85rem;
    }
    .library-wrap h2,
    .library-wrap h3,
    .library-wrap h4 {
        font-size: .9rem;
    }
    .header-ul-wrap {
        margin-bottom: 2.3rem;
    }
    .library-wrap h3 {
        margin-bottom: 1.5rem;
    }
    /* hero */
    .library-hero img {
        margin: 2rem 0 2.5rem;
        border-radius: .6rem;
    }
    .library-wrap h1 {
        font-size: 1.7rem;
    }
    #library-info {
        font-size: .9rem;
        margin: 1.5rem 0 3rem;
    }
    .library-details div { width: 45%; }
    .library-details { 
        flex-wrap: wrap;
        margin-bottom: 3rem;
    }
    .library-wrap .library-details p {
        font-size: .85rem;
        line-height: 1.2rem;
    }
    .iheart-appstore-wrap {
        padding: 15px 20px;
    }
    .library-wrap p.iheart-nda {
        text-wrap: wrap;
        font-size: .8rem;
        line-height: 1.2rem;
    }
    /* boxes */
    .contain-lg,
    .contain-sm,
    .contain-img {
        border-radius: .6rem;
    }
    .contain-lg {
        padding: 20px 16px;
    }
    .contain-sm {
        padding: 16px 12px;
    }
    .contain-lg p,
    .contain-sm p {
        font-size: .7rem;
    }
    .contain-lg h3 {
        font-size: .8rem;
        margin-bottom: 1rem;
    }
    .cluster-56 {
        gap: 28px;
    }
    /* motivations */
    .iheart-content-offerings {
        margin-top: 3rem;
    }
    /* core experience overview */
    .library-wrap p.library-respons {
        padding-top: 2rem;
        font-size: .7rem;
    }
    /* current experience */
    .current-ux-row2 { /* web polaris and legacy, row to column */
        flex-direction: column;
    }
    .library-wrap .library-current-ux h4 {
        font-size: 0.7rem;
        margin-bottom: 1rem;
    }
    .library-wrap .library-current-ux ul {
        font-size: 0.7rem;
        line-height: .9rem;
    }
    /* problem */
    .library-problem { /* whole section */
        gap: 2rem;
    }
    .library-problem .split-right { /* just users and opportunity */
        gap: 2rem;
        margin-bottom: 3rem;
    }
    .library-problem .split-right h3 {
        font-size: .9rem;
        margin-bottom: 1rem;
    }
    .library-quant {
        padding: 24px 12px 0;
        border-radius: .6rem;
        gap: 1.5rem;
    }
    .library-wrap .library-quant h4 {
        font-size: .75rem;
    }
    .library-quant p {
        font-size: .6rem;
        line-height: .8rem;
        padding-top: 0;
    }
    .library-problem .contain-lg .d-flex {
        gap: 1.5rem;
    }
    .library-problem .contain-lg .d-flex .img-wrap { 
        padding: 0rem 2.5rem 1rem;
    }
    /* feedback */
    .library-feedback {
        gap: 3rem;
    }
    /* existing research */
    .library-existresearch {
        flex-direction: column;
        gap: 2rem;
    }
    .library-existresearch img {
        max-width: 60%;
        padding: 1rem 1rem;
    }
    /* competitive */
    .library-competitive {
        gap: 3rem;
    }
    .library-competitive-row1 div.contain-sm:nth-of-type(1) {
        flex: 4;
    }
    .library-competitive-row1 div.contain-sm:nth-of-type(2) {
        flex: 1;
        padding: 1.3rem 1.5rem;
    }
    .library-competitive-row2 div.contain-sm {
        flex: 4;
    }
    .library-competitive-row2 div.contain-img {
        flex: 3;
    }
    /* brainstorm */
    .library-brainstorm {
        gap: 3rem;
    }
    .library-crit {
        padding: 1rem 0;
    }
    .library-crit p:nth-of-type(1),
    .library-crit p:nth-of-type(3) {
        font-size: 25px;
    }
    .library-crit p:nth-of-type(2) {
        font-size: .5rem;
        line-height: .7rem;
        width: 70%;
    }
    /* icon grids */
    .library-icon-grid {
        gap: .5rem;
        margin-bottom: 1rem;
    }
    .library-icon-grid div {
        gap: .6rem;
    }
    .library-icon-grid img {
        width: 22px;
    }
    .library-icon-grid p {
        font-size: .7rem;
        line-height: .9rem;
    }
    /* narrowing in */
    .library-narrowing {
        gap: 3rem;
    }
    .library-solu .d-flex:nth-child(2),
    .library-solu .d-flex:nth-child(4) {
        flex-direction: column;
    }
    .library-solu .d-flex:nth-child(1),
    .library-solu .d-flex:nth-child(3) {
        flex-direction: column-reverse;
    }
    .library-solu h4 {
        font-size: .7rem;
        margin-bottom: 1rem;
    }
    .library-solu .contain-sm p {
        font-size: 0.7rem;
    }
    /* testing */
    .library-usertest {
        gap: 3rem;
    }
    .library-usertest .cluster-16 {
        gap: 8px;
    }
    .library-key-findings div {
        padding: 14px 12px;
    }
    .library-key-findings div p {
        font-size: 0.55rem;
        line-height: .7rem;
    }
    .library-usertest .contain-lg {
        gap: 3rem;
    }
    /* tab filter */
    .library-tabfilt {
        gap: 3rem;
    }
    .library-tab-conclude {
        gap: 2.5rem;
    }
    /* design system */
    .library-wrap .library-designsys h4 {
        font-size: .7rem;
        margin-bottom: 1.5rem;
    }
    /* final screens */
    .library-final {
        gap: 4rem;
    }
    .library-wrap .library-final h4 {
        margin-bottom: 1.5rem;
    }
    .library-final-row1,
    .library-final-row2 {
        gap: 3rem;
    }
    .library-final-row1 { flex-direction: column-reverse; }
    .library-final-row2 { flex-direction: column; }
    .library-final-row1 div:nth-of-type(1).img-wrap {
        width: 40%;
    }
    .library-final-row2 .library-duoscreen {
        width: 80%;
    }
    .library-wrap .library-final p {
        font-size: .85rem;
    }
}
/* ------------------------
-------- MFR PROJECT --------
--------------------------- */
/* redirect project */
#mfr-page {
    background-color: #EFDFE0;
}
.project-page-wrap.mfr-wrap {
    max-width: 950px;
}
.mfr-content {
    width: 100%;
    gap: 5rem;
    margin-bottom: 10rem;
}
.mfr-wrap h1 {
    color: black;
    font-size: 2.2rem;
}
.mfr-wrap a {
    color: #007ed3;
}
.mfr-wrap a:hover {
    color: #39b0ff;
}
.mfr-wrap p {
    color: black;
}
.mfr-wrap h2,
.mfr-wrap h3,
.mfr-wrap h4 {
    color: black;
    font-size: 1.1rem;
    font-weight: 700;
}

.mfr-wrap p {
    font-size: 1.1rem;
    margin: 0;
}
.mfr-wrap h2 { margin: 0; }
.mfr-wrap h3 { margin-bottom: 2.3rem; }
.mfr-wrap .header-ul {
    display: inline;
    padding-bottom: .3rem;
    border-bottom: solid #000000 3px;
}
.mfr-wrap .header-ul-wrap {
    margin-bottom: 3rem;
}
/* hero */
.img-wrap img {
    width: 100%;
}
.mfr-hero.img-wrap {
    margin: 5rem 0 4rem;
    border-radius: 1.25rem;
    border: 2px solid black;
    overflow: hidden;
}
#mfr-info {
    margin: 2rem 0 4rem;
    font-size: 1.25rem;
}
.mfr-details {
    gap: 2rem;
    margin-bottom: 3rem;
}
.mfr-details div p:first-child {
    font-weight: 700;
    padding-bottom: .5rem;
}
.mfr-wrap .redirect-proj {
    margin-top: 2rem;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid black;
    border-radius: 1rem;
    transition: transform 0.15s ease-out;
}
.mfr-wrap .redirect-proj .img-wrap {
    width: 220px;
}
.mfr-wrap .redirect-proj .d-flex {
    align-items: center;
    gap: 1.5rem;
}
.mfr-wrap .redirect-proj p {
    font-size: .85rem;
}
.mfr-wrap p.redirect-title {
    font-size: 1.4rem;
    font-weight: 500;
}
.mfr-wrap .redirect-proj:hover {
    transform: scale(1.01);
    background-color: #ececec;
}
.mfr-wrap .redirect-chevron-box {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: .2rem;
}
@media (max-width: 1024px) {
    /* hero */
    .mfr-wrap p {
        font-size: 1rem;
    }
    .mfr-wrap h1 {
        font-size: 2rem;
    }
    #mfr-info {
        font-size: 1.1rem;
    }
    .mfr-wrap .mfr-details p {
        font-size: 1.1rem;
    }
    .mfr-wrap h2,
    .mfr-wrap h3,
    .mfr-wrap h4 {
        font-size: 1rem;
    }
}
@media (max-width: 767px) {
    .mfr-hero.img-wrap {
        border-radius: .6rem;
        border: 1px solid black;
        margin: 3rem 0;
    }
    .container-fluid.mfr-wrap {
        padding: 0 2rem;
    }
    #mfr-info {
        font-size: 1rem;
    }
    .mfr-wrap .mfr-details p {
        font-size: 1rem;
    }
    /* redirect card */
    .mfr-wrap .redirect-proj {
        padding: 16px;
        border-radius: .6rem;
    }
    .mfr-wrap .redirect-proj .img-wrap {
        width: 150px;
    }
    .mfr-wrap p.redirect-title {
        font-size: 1.3rem;
    }
}
@media (max-width: 576px) {
    .mfr-content {
        gap: 3rem;
        margin-bottom: 6rem;
    }
    .container-fluid.mfr-wrap { 
        padding: 0 1.5rem;
    }
    .mfr-hero.img-wrap {
        margin: 2rem 0 2.5rem;
    }
    .mfr-wrap h1 {
        font-size: 1.5rem;
    }
    .mfr-wrap h2, .mfr-wrap h3, .mfr-wrap h4 {
        font-size: .9rem;
    }
    .mfr-wrap p {
        font-size: .85rem;
    }
    #mfr-info {
        font-size: .9rem;
        margin: 1rem 0 3rem;
    }
    .mfr-details div { width: 45%; }
    .mfr-details { 
        flex-wrap: wrap;
        margin-bottom: 3rem;
    }
    .mfr-wrap .mfr-details p {
        font-size: .85rem;
        line-height: 1.2rem;
    }
    .mfr-wrap .redirect-proj .d-flex {
        align-items: start;
        flex-direction: column-reverse;
        gap: 1rem;
    }
    .mfr-wrap .redirect-proj .img-wrap {
        width: 100%;
    }
}