.hidden {
    opacity: 0;
}

@font-face {
    font-family: "atkinson-header";
    src: url('../fonts/AtkinsonHyperlegibleNextVF-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}



@font-face {
    font-family: "atkinson";
    src: url('../fonts/AtkinsonHyperlegibleNextVF-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}


html {
    --neutral-black: #08201E;
    --neutral-dark: #2D3A39;
    --neutral-mid: #5A5F5E;
    --neutral-light: #D4DFDD;
    --white: #ffffff;
    --primary-dark: #004D48; 
    --primary-mid: #00B3A8;
    --primary-light: #DEFFFD;
    --secondary-dark: #074F57; 
    --secondary-mid: #0D96A5;
    --secondary-light: #B8F3F9;
    --tertiary-dark: #703F2E; 
    --tertiary-mid: #BC755C; 
    --tertiary-light: #DAB3A5; 

    --teal-100: #9CC9C6;
    --teal-200: #739E9C;
    --teal-300: #4A7270;
    --teal-400: #204341;

    --luc-error-dark: #A30C17;
    --luc-error-mid: #F03A47;
    --luc-error-light: #FAB8BD;

    --luc-success-dark: #1A4D21;
    --luc-success-mid: #349B42;
    --luc-success-light: #55C664;

    
    /* 344D00 */
    --case-study: #165954;
    --hover-icon: #FFD80B;

    --header-font: atkinson-header, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
    --primary-font: atkinson, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    

    --project-1-light: #FFCA87;
    --project-1-dark: #232F3E;
    --project-2-light: #92CEF1;
    --project-2-dark: #004265;
    --micho-light: #FFD5E3;
    --micho-dark: #A31945; 
    /* #CC3467 */
    --project-4-light: #E2FFFF;
    --project-4-dark: #154445;
    --project-5-light: #E4FCCF;
    --project-5-dark: #4B5A2B;


    --zeroeyes-dark: #0A0B0E;
    --zeroeyes-gray: #AAB5BD;
    --zeroeyes-red: #E9393A;
    --border-radius: 20px;
    --amz-dark: #0F1111;
    --amz-blue: #017185;
    --amz-lightblue: #DEFAFE;
    --amz-navyblue: #095F76;

    --grad-light:#E9F1FD;
    --grad-dark: #5298E9; 

}

* {
    box-sizing: border-box;
}


body {
    background-color: var(--primary-light);
    margin: 0;
    
}
main {
    background-color: var(--primary-light);
    
}

.skip-link1 {
    position: absolute;
    top: -2.5rem;
    left: 0;
    text-decoration: none;
    background: var(--neutral-black);
    color: var(--white);
    padding: 0.5rem;
    z-index: 100;
    font-family: var(--primary-font);
}

.skip-link1:focus { 
    top: 1.5rem;
    left: 1rem;
    outline: 3px solid var(--primary-dark);
    outline-offset: 5px;  
    border-radius: var(--border-radius);
    padding: 1rem;
}

.skip-link2 {
    /* Change from opacity: 0 to this */
    position: absolute;
    left: -10000px; 
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    
    background: var(--secondary-mid);
    color: var(--white);
    z-index: 100;
    font-family: var(--primary-font);
    padding: 1rem;
    border-radius: var(--border-radius);
}

.skip-link2:focus { 
    /* Bring it back into view only when tabbed to */
    position: relative;
    left: 0;
    width: auto;
    height: auto;
    outline: 2.5px solid var(--secondary-light);
    outline-offset: 5px;  
}

.one-rem {
    margin-top: 2rem;
}

.project-content {
    max-width: 200ch;
    margin-left: auto;
    margin-right: auto;
}


.project-content p {
    max-width: 85ch; 
}
.project-content li {
    max-width: 85ch; 
}
p {
    color: var(--neutral-black);
    font-family: var(--primary-font);
    line-height: calc(var(--luc-base-text) * 1.6);
    margin: 3vh 0;
    font-size: var(--luc-base-text);
}
.underline {
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    text-decoration: underline #009A75 dashed 10%;
    text-underline-offset: 0.313rem; /* Adjust the offset */
    font-weight: 500;
}
b {
    font-weight: 600;
}
.white {
    color: white;
}
.red {
    color: #E9393A;
}
.enter {
    margin-top: -2vh;
}


h1, h2, h3, h4 {
    color: var(--neutral-black);
    font-family: var(--header-font);
    max-width: 100%;
    
    line-height: calc(3vh + 1vw);
}

h1:focus-visible, h2:focus-visible, h3:focus-visible, h4:focus-visible {

    outline: 3px solid var(--primary-dark); /* Use a bright accessibility color */
    outline-offset: 4px; /* Creates a gap between the element and the ring */

}

h1 {
    font-size: var(--luc-xl-text);
    line-height: calc(5vh + 3vw);
}
h2 {
    font-size: var(--luc-lg-text);
    font-weight: 700;
    line-height: calc(4vh + 3vw);
}
h3 {
    font-size: var(--luc-med-text);
    font-weight: 600;
    line-height: calc(4vh + 3vw);
}
h4 {
    font-size: var(--luc-sm-text);
}

.link {
	text-decoration: underline;
    position: relative;
    color: var(--primary-dark);
}
.link:focus-visible {
    outline: 3px solid var(--primary-dark); 
    outline-offset: 4px;
    border-radius: var(--border-radius);
}


/*  new cards    new cards    new cards     new cards     new cards  */
/* new 2/1 cards */
.cardcontainer-final {
    position: relative; 
    align-items: flex-start;
    border-radius: var(--border-radius);
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
    align-self: stretch;
    transition: transform 0.3s ease, box-shadow 0.3s ease-in;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
    border: 2px solid var(--secondary-mid);
    background-color: var(--white);
}
/* New hover effect class for enlarged shadow */
.cardcontainer-final:hover {
    transform: scale(1.02); /* Increases card size */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Enlarged shadow effect */
}

.cardcontainer {
    align-items: flex-start;
    border-radius: var(--border-radius);
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
    align-self: stretch;
    transition: all .3s ease-in;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden
}


.cardtext {
    margin: .5vh;
}
@media screen and (min-width: 515px) and (max-width: 732px) { 
    .cardtext {
        min-width: 32ch;
    }
    
}
.cardtext-projects {
    margin: .5vh;
    max-width: 30ch;
    color: #636363;
}
.card-info {
    display: flex;
    flex-flow: column wrap;
    align-self: flex-start;
    text-align: left;  
    width: 100%;
    padding: 0 1rem 0 2rem;
    margin: 0; /* removes default margin on ul */
    
}
@media screen and (max-width: 400px) {
    .card-info {
        padding: 0 1rem 0 1.5rem;
    }
}
.card-left { 
    display: flex;
    flex-flow: column wrap;
    align-self: flex-start;
    text-align: left;   
    width: 80%;   
    margin: -.1rem 0 0 -.1rem;
}
@media screen and (min-width: 767px) {
    .projects-card-left {
        /* width: 36ch; */
        margin-bottom: 0.625rem;
    }
}
.card-icons-projects {
    display: flex;
    flex-flow: row nowrap;
    gap: .75rem;
    height: 4vh;
    inset-inline-end: 0.938rem;
    position: absolute;
    top: 1.75rem;
    height: 1.875rem;
}
@media screen and (min-width: 767px) {
    .card-icons-projects {
        height: 2.438rem;
    }
}
@media screen and (max-width: 767px) {
    .card-icons-projects {
        inset-inline-end: 0.188rem;
    }
}


/* new cards 2/1 */
.tool-logo-final {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    transition: transform 0.3s;
    max-width: 2.5rem;
    max-height: 2.375rem;
    object-fit: contain; 
}
.tool-logo-final:hover {
    transform: scale(1.1) rotate(4deg); 
    cursor: pointer;
}
.tool-logo-final.clicked-logo {
    transform: scale(0.85) rotate(8deg); /* Define distinct clicked transformation */
    opacity: 0.5; /* Ensure opacity is included */
    transition: transform 0.4s ease, opacity 0.4s ease; /* Transition for click animation */
}
@media screen and (min-width: 1200px) {
    .tool-logo {
        height: 2.188rem; 
    }
}
@media screen and (min-width: 370px) and (max-width: 400px){
    .tool-logo {
        height: 2.125rem;

    }
}
.tool-logo-final:focus-visible {
    /* The Focus Ring */
    outline: 3px solid var(--primary-dark);
    outline-offset: 5px; 
}



.hvr-grow {
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); */
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}








/* --__--__--_----__--__--_----__--__--_--  navigation and footer   --__--__--_----__--__--_-_--_--  */

.burger {
    display: none;
}
.burger-x {
    display: none;

}
/* Logo */
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    text-decoration: none;
}

.logo {
    border-radius: var(--border-radius);
    position: absolute;
    top: calc(2.5rem - 25px);
    left: calc(2.919rem - 20px);
    cursor: pointer;
    
    transition: none;
    text-decoration: none; 
    display: inline-flex;

    /* THE FIX: Force a square container and center the image */
    display: inline-flex;
    align-items: center;     /* Vertical centering */
    justify-content: center;  /* Horizontal centering */
    width: 60px;             /* Adjust this based on your logo size */
    height: 60px;            /* Must match width to be a perfect circle */
}
.logo:focus-visible {
    /* The Focus Ring */
    outline: 3px solid var(--teal-400);
    outline-offset: 5px; 
}
.logo img {
    transition: transform .3s;
    display: block; /* Removes tiny extra space at the bottom of images */
}

.logo img:hover {
    transform: scale(1.2);
}



@media screen and (min-width: 0px) and (max-width: 767px) {
    .burger {
        display: block;
        width: 3.125rem;
        height: 3.125rem;
        max-width: 100%;
        position: fixed;

        top: 2.5rem;
        right: 2.981rem;
        border-radius: 0.625rem;
        z-index: 99;
    }
    .nav-wrapper {
        display: flex;
        flex-flow: column;
        background-color: var(--primary-dark);
        
    }
}

@media screen and (min-width: 768px) {
    .nav-menu {
        display: flex;
        margin-right: 3vh;
        gap: var(--luc-xs-text);
    }
    .nav-wrapper {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        
        
    }
}

nav.open {
    transform: none;
}


.nav-link {
    text-decoration: none;
    color: var(--neutral-black);
    padding: 0.5rem .3rem; 
    margin-right: 3vh;
    position: relative;
    font-size: var(--luc-base-text);
    border-radius: var(--border-radius);
}

.nav-link::before {
    content: '';
    position: absolute;
    width: 100%;
    height: .25rem;
    border-radius: .25rem;
    background-color: var(--primary-dark);
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

.nav-link:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}
@media screen and (min-width: 0px) and (max-width: 767px) {
    nav ul {
        display: block;
    }

    .nav-link {
        color: var(--white);
        font-size: 3.5vh;
        line-height: 9vh;
        position: relative;
        margin-right: 0px;
    }

    .nav-link::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 0.25rem;
        border-radius: 0.25rem;
        background-color: var(--white);
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }

    .nav-link:hover::before {
        transform-origin: left;
        transform: scaleX(1);
    }

    .nav-menu {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        margin: 20vh auto;
        gap: var(--luc-xs-text);
    }

    .burger-x.visible {
        display: block;
        background-color: var(--secondary-dark);
        border: none;
        margin: 0 45vw;
    }

    .burger-x-button {
        background-color: transparent;
        border: none;
        margin: 0 auto;
    }

    nav {
        height: 100vh;
        position: fixed;
        right: 0;
        top: 0;
        width: 100vw;
        z-index: 100;

        transform: translateX(100vw);
        transition: transform 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
}

@media screen and (min-width: 768px) {
    .burger-x-button {
        display: none;
    }
}
.nav-menu li {
    list-style: none;
    text-decoration: none;
} 

a {
    font-size: var(--luc-base-text);
}
header {
    margin-top: 4vh;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;    
    flex-flow: column wrap;
    background-color: var(--secondary-dark);
    max-width: 100%;
    margin-top: 15vh;
}
.footer-icons a {
    margin-left: 1rem; 
}
@media screen and (min-width: 768px) {
    footer {
        flex-flow: row wrap;
        justify-content: space-between;
        padding: 1rem 1rem 2.5rem 1rem;
    }
    .footer-first {
        order: 1;
        margin-left: 4vw;
    }
    .footer-icons {
        order: 3;
        margin-right: 4vw;
    }
}
.footer-text {
    color: var(--white);
    text-align: center;
}
.footer-first {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-philly {
    margin-top: 5vh;
}
.footer-icons {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 1.25rem;
    align-self: center;
    align-content: space-between;
    margin-bottom: 1.5rem;
    margin-top: 1.25rem;
}
.footer-icons a {
    text-decoration: none;
}
.icon {
    transition: all 0.3s ease;
    padding: 1rem 1rem .5rem 1rem;
    border-radius: 1.25rem;


}
.icon:hover {
    transform: translateY(-5px);
    background-color: var(--neutral-black);
    border-radius: 1.25rem;
}


/* --__--__--_----__--__--_----__--__--_--    index     --__--__--_--__--__--__--_-- */

.wrapper {
    grid-area: content;
    display: flex;
    flex-flow: column nowrap;
    width: 90%;
    margin: 0 auto;
    padding: 0 calc(var(--luc-base-text) * 1.5);
}


.intro {
    margin-top: 3vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    /* flex: 1;
    padding: 20px; 
    display: flex;
    flex-direction: row;
    justify-content: space-between; */
}

.intro-text {
    margin-right: 3vh;
    font-weight: 400;
    
}
.intro-blurb {
    margin-top: 18vh;
    margin-bottom: 5vh;
    font-size: var(--luc-xl-text);
    line-height: calc(var(--luc-base-text) * 3.5);
    max-width: 65ch;
}

@media screen and (max-width: 768px) { 
    .intro-blurb {
        font-size: var(--luc-lg-text);
        line-height: calc(var(--luc-base-text) * 2.5);
        max-width: 75ch;
    }
}

@media screen and (min-width: 1100px) { 
    .intro-text {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}




/* Figure container styling */
.intro-figure {
    margin: 0;          /* Remove default figure spacing */
    width: 100%;        /* Let the figure fill its parent */
    display: flex;      /* Optional: useful if centering the image */
    justify-content: center; /* Center the image horizontally */
}

/* Image styling */
.frog {
    width: 60%;          /* Default size on large screens */
    max-width: 100%;     /* Ensure it never overflows its container */
    height: auto;        /* Keep aspect ratio */
    display: block;      /* Remove inline spacing below image */
}

/* Responsive adjustments */
@media (max-width: 1243px) {
    .frog {
        width: 80%;      /* Scales up on medium screens */
    }
}

@media (max-width: 600px) {
    .frog {
        width: 90%;      /* Almost full width on small screens */
    }
}


/* option 1

figure img.frog {
    width: 100%; 
    height: auto;
    margin: 0 1vw;
}



@media (min-width: 300px) and  (max-width: 767px) {
    figure img.frog {
        width: 100%;
    }
}

@media (min-width: 767px) and  (max-width: 950px) {
    figure img.frog {
        width: 100%;
    }
}


*/






@media screen and (min-width: 768px) { 
    .intro {
        flex: 1;
        padding: var(--luc-sm-text);
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }

    .lucia-presenting {
        width: 18.75rem; 
    }
}

@media screen and (min-width: 1220px) {
    .lucia-presenting  {
        width: 20vw;
        height: fit-content;
    }
}


.projects, .projects-final {
    display: flex;
    justify-content: center;
    flex-flow: column nowrap;
    gap: 3vh;
    margin-bottom: 8vh;
    margin-top: 2vh;
}
/* new cards 2/1 */
@media screen and (min-width: 732px) { 
    .projects-final {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
}
@media screen and (min-width: 1130px) and (max-width: 1200px) {
    .projects-final {
        display: grid;
        grid-template-columns: 33vw 33vw;
        grid-template-rows: 47vw 47vw;
    }
}
@media screen and (min-width: 1220px) {
    .projects-final {
        display: grid;
        grid-template-columns: 30vw 30vw;
        grid-template-rows: 1fr 1fr;
    }
}

.projects-page {
    display: flex;
    justify-content: center;
    flex-flow: column nowrap;
    gap: 3vh;
    margin-bottom: 8vh;
    margin-top: 2vh;
    
}

.projects-card {
    text-decoration: none;
}
@media screen and (min-width: 768px) { 
    .projects, .projects-page {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}
@media screen and (min-width: 1130px) and (max-width: 1220px) {
    .projects {
        display: grid;
        grid-template-columns: 33vw 33vw;
        grid-template-rows: 47vw 47vw;
    }
    .card-container {
        height: fit-content;
    }
    /* .projects-page {
        grid-template-columns: 40vw 35vw;
        grid-template-rows: 54.5vw 52vw;
    } */
}
@media screen and (min-width: 1220px) {
    .projects {
        display: grid;
        grid-template-columns: 30vw 30vw;
        grid-template-rows: 1fr 1fr;
    }
    .card-container {
        height: fit-content;
    }
}
@media screen and (min-width:1166px) {
    .card-container {
        height:auto;
    }
}


.card-container {
    align-items: center;
    border-radius: var(--border-radius);
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
    align-self: stretch;
    transition: all .3s ease-in;;
}
@media (max-width: 768px) { 
    .card-container {
        height: fit-content;
    }
}
@media screen and (min-width: 770px) and (max-width: 970px) { 
    .card-container {
        height: auto;
    }
}


.card-title-final {
    top: 1vh;
    position: relative;
    margin-bottom: var(--luc-base-text);
    font-size: var(--luc-med-text);
    line-height: normal;
}

.card-1 {
    border: 0.188rem solid var(--project-1-dark); 
    background-color: var(--project-1-light);
}
.card-1:hover {
    box-shadow: 0.188rem 0.188rem var(--project-1-dark);
    transform: translate(-1px, -1px);
}
.card-2 {
    border: 0.188rem solid var(--project-2-dark); 
    background-color: var(--project-2-light)
}
.card-2:hover {
    box-shadow: 0.188rem 0.188rem var(--project-2-dark);
    transform: translate(-1px, -1px);
}
.card-3 {
    border: 0.188rem solid var(--micho-dark); 
    background-color: var(--micho-light)
}
.card-3:hover {
    box-shadow: 0.188rem 0.188rem var(--micho-dark);
    transform: translate(-1px, -1px);
}
.card-4 {
    border: 0.188remsolid var(--project-4-dark); 
    background-color: var(--project-4-light)
}
.card-4:hover {
    box-shadow: 0.188rem 0.188rem var(--project-4-dark);
    transform: translate(-1px, -1px);
}



.card-icons-final {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    gap: 0.75rem;
    top: 1.75rem; 
    right: 1.5rem; 
    height: 2.438rem;
    transition: transform 0.3s ease; 

    z-index: 2; 

}
.card-icons-final li {
    display: inline-block; /* for flex items */
    margin-bottom: -0.2rem;
}
/* CONSIDER SHOWING ICONS/TOOLTIP ON FOCUS */
/* .logo-wrapper .tooltip {
    opacity: 0;
    transition: opacity 0.3s;
}

.logo-wrapper:hover .tooltip,
.logo-wrapper:focus-within .tooltip {
    opacity: 1; 
} */


.card-icons-projects {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5rem;
    inset-inline-end: -0.375rem;
    position: absolute;
    top: 1rem;
}
@media screen and (min-width: 767px) {
    .card-icons-projects {
        height: 2.125rem;
    display: flex;
    flex-flow: row nowrap;
    gap: .75rem;
    justify-content: center;
    inset-inline-end: 0.625rem;
    position: absolute;
    top: 1.375rem;
    }
}

/* new cards 2/1 wrapper for logo icons and tooltip */


.logo-wrapper {
    position: relative;
    display: inline-block; /* Keeps logo and tooltip grouped */
    text-align: center; /* Ensures alignment */

}
/* show Tooltip on Hover */
.logo-wrapper:hover .tooltip {
    transform: translateX(-50%) scale(1); 
    opacity: 1; 
}
.logo-wrapper figure {
    /* this removes default margin from figure */
    margin: 0;
    padding: 0;
}
.card-link:focus-visible {
    /* The Focus Ring */
    outline: 3px solid var(--primary-dark);
    outline-offset: 5px; 
    border-radius: var(--border-radius);
}
.tooltip {
    position: absolute;
    bottom: calc(-100% + -.5vh);
    left: 50%;
    transform: translateX(-50%) scale(0);
    font-family: var(--primary-font);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.4rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    font-size: var(--luc-xs-text);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 999;
}
/* Tooltip Arrow */
.tooltip::after {
    content: '';
    position: absolute;
    top: -0.625rem;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0.313rem;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
}

.card-figure {
    margin: 0;
    padding: 0;
    /* drags image to the bottom of card */
    margin-top: auto;
    display: flex;
}

.card-image-1 {
    margin-top: 0;
    border-radius: 0 0 var(--border-radius) 0; 
    width: 100%;
}
.card-image-2 {
    margin-top: 0;
    border-radius: 0 0 var(--border-radius) var(--border-radius); 
    width: 100%;
}
.card-image-1, .card-image-2 {
    margin-top: auto; 
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    width: 100%;
    
}
/* new cards 2/1*/
.snapshot-image {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; 
}
.snapshot-image:hover {
    transform: scale(1.1); /* Zoom in by 10% */
}

.hover-bar {
    opacity: 0;
    position: absolute;
    bottom: -0.2%;  /* At the bottom of the card */
    left: 50%;
    transform: translateX(-50%) translateY(20px);  /* Initially hidden below */
    background-color: var(--secondary-mid);
    color: white;
    font-family: var(--primary-font);
    color: var(--white);
    font-size: var(--luc-base-text);
    border-radius: 0.25rem;
    white-space: nowrap;
    z-index: 2;  
    width: 100%;
    text-align: center;
    transition: opacity 0.3s ease, transform 0.5s ease; 
    /* padding to fix being an aside element */
    padding: .3rem .1rem 0.7rem .1rem; 
    height: 2.188rem;   
    
}
.hover-bar:hover {
    background-color: var(--secondary-dark);
}
.hover-list {
    list-style: none;
    text-decoration: none;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;

    gap: 0.5rem;

}
/* show hover bar when card is hovered */
.cardcontainer-final:hover .hover-bar {
    opacity: 1;
    transform: translateX(-50%) translateY(0);  /* animate up */
}
/* text inside the hover bar */
.hover-text {
    font-size: var(--luc-base-text); 
    transition: font-weight 0.3s ease; 
    color: var(--white);
}

.button-card-final {
    color: var(--white);
    font-family: var(--primary-font);
    font-size: var(--luc-base-text);
    text-decoration: none;
    cursor: pointer; 
    transition: all .3s ease .1s;
    margin-top: 0.5rem;
    padding: 1rem 1.25rem; 
    border-radius: var(--border-radius);
    text-align: center; 
    width: fit-content;
    margin-bottom: 1.7rem;
    background-color: var(--secondary-dark);

    
}
.button-card-final.clicked {
    transform: scale(0.9);
    opacity: 0.9;
    transition: transform 0.3s ease, opacity 0.15s ease; 
}
.button-card-final:hover {
    font-style: normal;
    font-weight: 500;
    border-radius: var(--border-radius);
    transform: translateY(-5px);
}



.index-header-projects {
    margin: 10vh auto 2rem auto;
    text-align: center;
}


/*  resume */
.resume-wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 80%;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.resume-title-name {
    margin-top: 5rem;
    margin-bottom: .5vw;
}
/* .resume-title + ul {
    margin-top: 1rem;
} */
.resume-title {
    margin-bottom: 1rem;
}
.line-break {
    border: none;
    border-top-width: medium;
    border-top-style: none;
    border-top-color: currentcolor;
    border-top: 3px solid var(--primary-dark);
    margin: 10px 0;
}
h3 + .line-break-light {
    margin-top: .5vw;
}
.line-break-light {
    border: none;
    border-top-width: medium;
    border-top-style: none;
    border-top-color: currentcolor;
    border-top: 2px solid var(--footer-background);
    margin: 10px 0;
}
.resume-job-title {
    margin: 0;
}
.resume-job-title {
    /* border: 1.5px solid var(--primary-dark); */
    border-radius: 7px;
    padding-left: 1vw;
    padding-right: 2vw;
    width: fit-content;
    margin: 1.5rem auto .6rem 0px;
}
.resume-job-title2 {
    margin-top: .5rem;
    padding-left: 1vw;
    padding-right: 2vw;
    margin: .5rem auto .6rem 0px;
}
.resume-list {
    margin-top: 0;
}

.button-resume-header {
    color: white;
    font-family: var(--primary-font);
    font-size: var(--luc-base-text);
    text-decoration: none;
    text-align: center; 
    border-radius: var(--border-radius);
    /* ^used to be 44px */
    cursor: pointer;
    transition: all .3s ease .1s;

    background-color: var(--secondary-dark);

    padding: 1rem 1.50rem; 
    width: fit-content;

    margin-top: 8vh;
}
.button-resume-header.clicked {
    transform: scale(0.9);
    opacity: 0.9;
    transition: transform 0.3s ease, opacity 0.15s ease; 
}
.button-resume-header:hover {
    font-style: normal;
    font-weight: 500;
    border-radius: var(--border-radius);
    transform: translateY(-5px);
}
.button-resume-header:focus-visible {
    outline: 3px solid var(--primary-dark); 
    outline-offset: 4px;
    border-radius: var(--border-radius);
}


.resume-links {
    list-style: none;
    padding: 0;
    margin: 0;
    
    margin-left: 0;
    display: flex;
    flex-flow: column;
    gap: .5rem;
    margin-top: 1.5rem;

}
.resume-links .link {
    line-height: 1.25rem;
}
@media screen and (min-width: 768px) {
    .resume-links {
        display: flex; 
        flex-flow: row;
        gap: 2rem;
        margin-top: 1.5rem;
    }
}
@media screen and (min-width: 764px) and (max-width: 796px) {
    .resume-links .link {
        line-height: 1rem;
    }
}


/* --__--__--_----__--__--_----__--__--_--  about   --__--__--_----__--__--_-_--_--  */

.intro-about {
    margin-top: 3rem;
}
.about-text {
    margin-top: 3vh;
    grid-area: about-text;
}
.about-wrapper {
    display: flex;
    flex-flow: column;
    /* gap: 3vh; */
}
.contact-wrapper {
    display: flex;
    flex-flow: column;
    margin: 0 auto;
    margin-top: 10vh;
}

.contact-title {
    margin-top: 3rem;
}

@media screen and (max-width:730px) {
    .contact {
    
        display: flex;
        flex-direction: column;
        
        margin-top: 2rem;
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

.about-lucia {
    width: 80%;
    margin: 0 auto;
    border-radius: var(--border-radius);
    grid-area: about-lucia;
    
}
@media screen and (min-width:0px) and (max-width: 730px) {
    .about-lucia {
        width: 100%;
        margin-top: 25vh;
    }
}

@media screen and (min-width:730px) {
    .about-wrapper {
        display: grid;
        /* padding-bottom: 1rem;
        gap: 5vh; */
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto; /* Let the rows grow based on content */
        grid-template-areas: 
        "about-text about-lucia"
        "about-text about-lucia"; 
        column-gap: 1rem;
        margin-top: 5vh;

    }
    .contact-wrapper {
        display: grid;
        /* padding-bottom: 1rem;
        gap: 5vh; */
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto; /* Let the rows grow based on content */
        grid-template-areas: 
        "contact frog"
        "contact frog"; 
        column-gap: 1rem;
        margin-top: 10vh;
        padding-left: 15vw;
        padding-right: 10vw;
    }
    .about-text {
        margin: 0;
    }
    .about-title p {
        max-width: 70ch;
    }
}


/* --__--__--_----__--__--_----__--__--_--  form   --__--__--_----__--__--_-_--_--  */


.button-group {
    display: flex;
    flex-flow: row wrap;
}
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    padding: 0px;
    max-width: 40rem;
}



fieldset {
    display: flex;
    flex-direction: column;
    border: none;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

label {
    font-family: var(--primary-font), sans-serif;
    font-size: var(--luc-base-text);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.required-indicator {
    color: var(--luc-error-mid);
    font-family: var(--primary-font), sans-serif;
    font-weight: bold;
    margin-left: 0.25rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

input,
textarea {  
    font-family: var(--primary-font), sans-serif;
    font-size: var(--luc-base-text);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 0.5rem;
    border: 2px solid var(--neutral-black);
    border-radius: 5px;
    transition: border-color 0.3s ease, background-color 0.3s
}

input:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--primary-dark); 
    outline-offset: 4px;
    border-radius: var(--border-radius);
}


input:invalid,
textarea:invalid {
    box-shadow: none;
    border-color: inherit;
}

input.error,
textarea.error {
    border-color: var(--luc-error-light);
    background-color: #fadbd8;
}

/* Make room for the icon */
input,
textarea {
    padding-right: 2.5rem;
    position: relative;
}

/* Base styling */
input.valid,
textarea.valid {
    border-color: var(--luc-success-mid);
}

input.error,
textarea.error {
    border-color: #e74c3c;
}

/* Checkmark */
input.valid,
textarea.valid {
    background-image: url("data:image/svg+xml,%3Csvg fill='%231e8449' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 6.709l-11.025 11.025-5.545-5.545 1.414-1.414 4.131 4.131 9.611-9.611z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px;
}

/* X icon */
input.error,
textarea.error {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23e74c3c' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71L12 12.01 5.7 5.71 4.29 7.12 10.59 13.41 4.29 19.7 5.7 21.11 12 14.82 18.3 21.11 19.71 19.7 13.41 13.41 19.71 7.12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px;
}

.error-message {
    font-family: var(--primary-font), sans-serif;
    font-size: var(--luc-xs-text);
    color: var(--luc-error-mid);
    margin-top: -0.5rem;
    display: block;
    min-height: 1.25rem;
}


.submit-button, .reset-button {
    font-family: var(--primary-font), serif;
    font-size: var(--luc-base-text);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: inherit;
    background-color: inherit;
    
    border-radius: 10px;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
}

.submit-button {
    background-color: var(--primary-dark);
    color: var(--white);
    border: 2px solid var(--primary-dark);
    
}

.reset-button {
    background-color: transparent;
    color: var(--neutral-black);
    border: 2px solid var(--neutral-black);
}
.submit-button:focus-visible, .reset-button:focus-visible {
    outline: 3px solid var(--primary-dark); 
    outline-offset: 4px;
    border-radius: var(--border-radius);
}

#form-feedback {
    font-family: var(--primary-font);
}

.button-group button {
    margin-right: 1rem;
}

.submit-button:hover {
    color: var(--white);
    background-color: var(--tertiary-dark);
    border: 2px solid var(--tertiary-dark);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.reset-button:hover {
    color: var(--tertiary-dark);
    border-color: var(--tertiary-dark);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}


/* --__--__--_----__--__--_----__--__--_--  submission page   --__--__--_----__--__--_-_--_--  */

legend {
    font-family: var(--primary-font), sans-serif;
    font-size: var(--luc-sm-text);
    margin-bottom: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.submission-container {
    background-color: var(--secondary-light);
    border: 2px solid var(--neutral-dark);
    border-radius: 10px;
    padding: 2rem;
    margin-top: 2rem;
}

.submission-container h2 {
    margin-top: 0;
    color: var(--neutral-black);
    font-size: var(--luc-med-text);
}

.submitted-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


.info-item h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: var(--primary-font), sans-serif;
    font-size: var(--mack-base-text);
    font-weight: 500;
    color: var(--mack-primary-black);
}

.info-item p {
    margin: 0;
    font-family: var(--primary-font), sans-serif;
    font-size: var(--mack-sm-text);
    color: var(--mack-accent-gray);
    line-height: 1.6;
    word-wrap: break-word;
}

/* case study page */
.project-wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 90%;
    margin: 0 auto;
    padding: 0 20px;
}
.proj1-cover {
    border-radius: var(--border-radius);
    margin-top: 4vh;
    height: auto;
    width: 100%;
    border: 1.5px solid var(--teal-300);
    
}
@media screen and (min-width: 0px) and (max-width: 767px) {
    .cover {
        margin-top: 10vh;
        border-radius: 0px;
    }
}
@media screen and (max-width: 768px) {
    .proj3-cover {
        border-left: none;
        border-right: none;
    }
}
@media screen and (min-width: 768px) {
    .cover {
        display: block;
        width: 90%;
        margin: 0 auto;
        
    }
}
.rounded-image-100 {
    display: block;
    border-radius: var(--border-radius);
    width: 100%;
    margin: 2vh auto;
    height: auto;
}

.rounded-image {
    display: block;
    border-radius: var(--border-radius);
    width: 64vw;
    margin: 1rem auto;
    height: auto;
}
.overview-title {
    font-weight: 650;
}
.overview-blurb-amz {
    border: 1px solid var(--teal-200);
    /* border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(221, 221, 221); */
    padding: 20px 30px 20px 30px;
    background: var(--secondary-dark);
    border-radius: var(--border-radius);
    color: var(--primary-light);

}

/* accessibility considerations */

/* responsive typography with clamp */

/* For browsers that support clamp  */
@supports (font-size: clamp(1rem, 1vi, 1rem)) {
    :root {
            --luc-xs-text: clamp(0.8rem, 0.11vi + 0.78rem, 0.89rem);
            --luc-base-text: clamp(1rem, 0.22vi + 0.95rem, 1.19rem);
            --luc-sm-text: clamp(1.25rem, 0.39vi + 1.17rem, 1.58rem);
            --luc-med-text: clamp(1.56rem, 0.64vi + 1.42rem, 2.11rem);
            --luc-lg-text: clamp(1.95rem, 1vi + 1.73rem, 2.81rem);
            --luc-xl-text: clamp(2.44rem, 1.52vi + 2.11rem, 3.75rem);
            --luc-2xl-text: clamp(3.05rem, 2.26vi + 2.56rem, 5rem);
            --luc-3xl-text: clamp(3.81rem, 3.31vi + 3.09rem, 6.66rem);
    }
}
  /* For browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
    :root {
            --luc-xs-text: 0.8rem;
            --luc-base-text: 1rem;
            --luc-sm-text: 1.25rem;
            --luc-med-text: 1.56rem;
            --luc-lg-text: 1.95rem;
            --luc-xl-text: 2.44rem;
            --luc-2xl-text: 3.05rem;
            --luc-3xl-text: 3.81rem;
    }
    @media screen and (min-width: 1728px) {
    :root {
            --luc-xs-text: 0.89rem;
            --luc-base-text: 1.19rem;
            --luc-sm-text: 1.58rem;
            --luc-med-text: 2.11rem;
            --luc-lg-text: 2.81rem;
            --luc-xl-text: 3.75rem;
            --luc-2xl-text: 5rem;
            --luc-3xl-text: 6.66rem;
    }
    }
}

:focus-visible {
    outline: 3px solid var(--primary-light); /* Use a bright accessibility color */
    outline-offset: 4px; /* Creates a gap between the element and the ring */
    border: var(--border-radius);
}
.nav-link:focus-visible {
    outline: 3px solid var(--primary-dark); /* Use a bright accessibility color */
    outline-offset: 4px; /* Creates a gap between the element and the ring */
}

.icon:focus-visible {
    outline: 3px solid var(--primary-light); /* Use a bright accessibility color */
    outline-offset: 4px; /* Creates a gap between the element and the ring */
}
.button-card-final:focus-visible {
    outline: 3px solid var(--primary-dark); /* Use a bright accessibility color */
    outline-offset: 4px; /* Creates a gap between the element and the ring */
}


/* changing colors of homepage in dark mode */
@media (prefers-color-scheme: dark) {
    main, body, .nav-wrapper, footer, .nav-link {
        background: var(--neutral-black);
        color: var(--white);
        text-decoration-color: var(--white);
        
    }

    h1:focus-visible, h2:focus-visible, h3:focus-visible, h4:focus-visible {

        outline: 3px solid var(--primary-light); /* Use a bright accessibility color */
        outline-offset: 4px; /* Creates a gap between the element and the ring */
    
    }
    .intro-text, .index-header-projects, .resume-list li, p, h1, h2, h3, h4 {
        color: var(--white);
    }
    .logo:focus-visible {
        outline: 3px solid var(--primary-light); 
        outline-offset: 4px; 
    }
    .skip-link1 {
        background-color: var(--secondary-mid);
    }
    .skip-link1:focus-visible {
        outline: 3px solid var(--primary-light); 
        outline-offset: 4px;
    }

    .nav-link:focus-visible {
        outline: 3px solid var(--primary-light); 
        outline-offset: 4px; 
    }
    .button-card-final:focus-visible {
        outline: 3px solid var(--primary-light); 
        outline-offset: 4px; 
    }
    .card-link:focus-visible {
        outline: 3px solid var(--primary-light); 
        outline-offset: 5px; 
        border-radius: var(--border-radius);
    }
    .link:focus-visible {
        outline: 3px solid var(--primary-light); 
        outline-offset: 4px; 
        border-radius: var(--border-radius);
    }

    p, a {
        color: var(--white);
        text-decoration-color: var(--white);
    }

    .cardcontainer-final, .card-title-final {
        color: var(--white);
        background-color: var(--neutral-black);
        text-decoration-color: var(--white);
    }
    .cardcontainer-final {
        border: 1.5px solid var(--teal-100);
    }

    .tooltip {
        background-color: var(--primary-dark);
        border: 1px solid var(--teal-100);
        font-size: var(--luc-xs-text);
    }
    .ae_icon {
        border: 1px solid var(--teal-100);
        border-radius: 6px;
    }

    img[src*="figma_icon.svg"] {
        content: url('../images/figma_icon_light.svg');
    }

    .wordpress_icon, .ut_icon, .ae_icon {
        filter: brightness(1.5);
    }

    .button-card-final, .button-resume-header {
        background-color: var(--primary-mid);
        color: var(--white);
    }

    .nav-link::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 0.25rem;
        border-radius: 0.25rem;
        background-color: var(--primary-mid);
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }

    .hover-bar, .hb-amz, .hb-amz:hover, .hb-cbk, .hb-cbk:hover, .hb-grad, .hb-ze, .hb-ze:hover, .ht-amz, .ht-grad, .ht-ze, .ht-cbk {
        background-color: var(--tertiary-dark);
        color: var(--white);
    }

    .link {
        color: var(--primary-mid);
    }

    .button-resume-header:focus-visible, input:focus-visible, textarea:focus-visible, .submit-button:focus-visible, .reset-button:focus-visible {
        outline: 3px solid var(--primary-light); 
        outline-offset: 4px;
        border-radius: var(--border-radius);
    }

    .submit-button {
        background-color: var(--secondary-mid);
        color: var(--white);
        border: 2px solid var(--secondary-mid);
        
    }
    .submit-button:hover {
        background-color: var(--secondary-light);
        color: var(--neutral-black);
        border: 2px solid var(--secondary-light);
        
    }
    .line-break {
        border-top: 3px solid var(--teal-200);
    }
    .line-break-light {
        border-top: 2px solid var(--teal-100);
    }

    .resume-title {
        color: var(--secondary-light);
    }

    .resume-job-title, .resume-job-title2 {
        color: var(--teal-100);
    }
    /* submission form styles */

    #form-feedback {
        color: var(--white);
    }

    .submission-container {
        background-color: var(--teal-400);
        border: 2px solid var(--teal-200);
    }

    input, textarea {
        background-color: var(--teal-100);
    }

    .reset-button {
        color: var(--white);
        border: 2px solid var(--white);
    }

    .reset-button:hover {
        color: var(--primary-mid);
        border-color: var(--primary-mid);
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .nav-link::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 4px;
        border-radius: 4px;
        background-color: var(--primary-mid);
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .01s ease-in-out;
    }
    .nav-link:hover::before {
        transform-origin: left;
        transform: scaleX(1);
    }
}

figcaption {
    font-family: var(--primary-font);
    font-size: 14px;
    text-align: center;
    align-self: center;
    margin-top: 10px;
}



/* img:hover {
    filter: saturate(120%);
    filter: drop-shadow(2px 2px 5px #99D0EF);
} */

/* ul */
ul li {
    color: var(--neutral-black);
    font-family: var(--primary-font);
    line-height: calc(var(--luc-base-text) * 1.6);
}
ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    line-height: calc(var(--luc-base-text) * 1.6);
}

ul li {
    margin-bottom: 0.75rem; /* 12px between bullets */
}

@media (max-width: 600px) {
    ul {
        padding-left: 1rem;
    }

    ul li {
      margin-bottom: 0.5rem; /* Adjust spacing for smaller screens */
    }
}