/* ===== CSS VARIABLES ===== */
body {
    --dark-orange: #2f140a;
    --mid-orange: #633f28;
    --orange: #bc8c65;
    --light-orange: #F7E1CA;
    --dark-green: #182005;
    --mid-green: #334E2D;
    --green: #86965f;
    --light-green: #D7E6C8;
    --dark-pink: #3e112d;
    --mid-pink: #6e3258;
    --light-pink: #e6cbdb;
    --dark-blue: #091a30;
    --mid-blue: #254164;
    --blue: #7592ab;
    --light-blue: #d8e2e8;
    --background-light: var(--light-blue);
    --main-color: var(--mid-blue);
    --accent-color: var(--dark-blue);
    --background: var(--blue);
    background-color: var(--background);
    margin: 0;
    overflow-x: hidden;
    color: var(--accent-color);

    font-family: 'Atkinson Hyperlegible', sans-serif;
}

.resume-page {
    --background: var(--green);
    --main-color: var(--mid-green);
    --accent-color: var(--dark-green);
    --background-light: var(--light-green);
}

.projects-page {
    --background: var(--orange);
    --main-color: var(--mid-orange);
    --accent-color: var(--dark-orange);
    --background-light: var(--light-orange);
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/assets/fonts/fontawesome/fa-solid-900.woff2"), url("/assets/fonts/fontawesome/fa-solid-900.ttf");
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/assets/fonts/fontawesome/fa-brands-400.woff2"),
        url("/assets/fonts/fontawesome/fa-brands-400.ttf");
}


/* ===== UTILITY CLASSES ===== */
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ===== BASE TYPOGRAPHY ===== */
p {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 120%;
    letter-spacing: 0.03em;
    line-height: 2rem;
    
}

ul {
    color: var(--background-light);
    list-style: none;
}

h1 {
    font-family: "Alexandria", sans-serif;
    margin-top: clamp(-0.7rem, 1vw, 10rem);
    font-weight: 100;
    margin-bottom: 0;
}

/* ===== HEADER ===== */

header {
    padding-bottom: 0rem;
    margin-bottom: 2rem;
    font-family: "Alexandria";
    font-weight: bold;
    font-size: 1.5rem;
    top: 0;


    padding-bottom: 0.2rem;

    nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    img {
        width: 4rem;
        height: 4rem;
        object-fit: cover;
        margin-right: 1rem;
        top: 2px;
        background-color: var(--light-blue);
        padding:3px;
        border-radius: 40rem;
        outline: 3px solid var(--accent-color);
    }

    span {
        display: block;
        width: max-content;
        margin-top: 0.2rem;
        padding: 0.2rem;
        font-size: 0.7rem;
        font-weight: 400;

        border-radius: 0.4rem;
        flex-wrap: wrap;
    }



    .name {
        font-size: 1.2rem;
        font-weight: bold;
    }
}

header nav a {
    color: var(--accent-color);
    text-decoration: none;

}

aside nav {
    .button.projects {
        --background-light: var(--light-orange);
        --accent-color: var(--dark-orange);
    }

    .button.resumes {
        --background-light: var(--light-green);
        --accent-color: var(--dark-green);
    }

    .button.contact {
        --background-light: var(--light-pink);
        --accent-color: var(--dark-pink);
    }

    .button.home {
        --background-light: var(--light-blue);
        --accent-color: var(--dark-blue);
    }
}

footer {
    display: block;
    width: 100%;
    font-size: 0.7rem;
    align-self: center;
    padding: 0 !important;
    padding-left: auto;


    p {
        text-align: center;
        padding: 0;
        padding-bottom: 5rem;

    }

    ul {
        padding-left: 0;
        margin-top: 5rem;
        margin-bottom: 2rem;
        display: block;
        width: max-content;
        padding-left: 0;
        margin-left: auto;
        margin-right: auto;

    }

    li {
        display: inline-block;
    }

    a {
        text-decoration: none;
        color: var(--accent-color);
        background-color: var(--background-light);
        border: 2px solid var(--accent-color);
        padding: 0.2rem;
        border-radius: 0.5rem;
        box-shadow: 2px 2px solid var(--accent-color);


    }
}


/* ===== INTRODUCTION SECTION ===== */
.introduction {
    padding-top: 1lh;
    background-color: var(--background-light);
    color: var(--accent-color);
    text-align: left;
    position: relative;
    overflow-x: hidden;
    border-bottom: 0.4rem solid var(--accent-color);
    margin-bottom: 0;

    h2 {
        position: relative;
        z-index: 0;
        font-family: "Montserrat Alternates", sans-serif;
        margin-top: clamp(4rem, 10vw, 10rem);
        font-size: clamp(3rem, 10vw, 6rem);
        font-weight: 300;
        line-height: 65%;
        margin-bottom: 1rem;
        padding-bottom: 0rem;
        margin-left: 45%;
        display: block;
    }

    h1 {
        font-family: "Montserrat Alternates", sans-serif;
        font-size: clamp(5rem, 30vw, 10rem);
        font-weight: 400;
        margin-top: 0rem;
        margin-left: 44%;
        margin-bottom: 0.25lh;
        color: var(--accent-color);
        line-height: 85%;
        display: inline-block;
        letter-spacing: -0.03em;
    }

    .tag-block {
        margin-top: 0rem;
        margin-left: 43%;
        margin-bottom: 3rem;
        line-height: 120%;
        display: block;
        position: relative;
        float: left;
        margin-left: 43%;
        margin-right: 3rem;
        display: block;
        background: var(--main-color);
        padding: 0.3em 0.7em;
        border-radius: 14px;
        box-shadow: 12px 12px 0 -3px var(--accent-color);
        border: 3px solid var(--accent-color);
    }

    .tagline {
        margin-bottom: 0.4lh;
        font-family: "Alexandria", sans-serif;
        color: white;
        text-align: left;
        z-index: 20;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .focus-areas {
        font-family: "Atkinson Hyperlegible", sans-serif;
        margin-top: 0;
        color: var(--background-light);
        text-align: left;
        font-size: 1.2rem;
    }

    img {
        width: 27rem;
        mix-blend-mode: multiply;
        height: auto;
        float: left;
        position: absolute;
        bottom: 0px;
        right: 52%;
    }
}

/* ===== MAIN SECTIONS ===== */

.page-copy h1 {
    font-size: 7rem;
    font-family: "Alexandria", sans-serif;
    font-weight: 700;
    color: var(--accent-color);
    text-align: center;
    width: fit-content;
    line-height: 90%;
    margin-bottom: 2rem;
}

.intro h1 {
    font-size: 7rem;
    font-family: "Alexandria", sans-serif;
    font-weight: 700;
    color: var(--accent-color);
    text-align: center;
    width: fit-content;
    line-height: 90%;
    margin-bottom: 2rem;
}

/* ===== LINKS AND BUTTONS ===== */
.rail-sticky {
    font-family: 'Alexandria', sans-serif;
    margin-top: 3rem;
    margin-left: 7%;
    margin-right: 7%;
    flex: 1;
    max-width: 30rem;
    position: sticky;
    top: 6rem;
    float: right;

    display: flex;
    height: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}

.rail-sticky.home {
    padding-top: 4rem;

    header nav a {
        color: var(--background);
        opacity: 0%;
    }
}



.button {
    margin-bottom: 2rem;
    background-color: var(--background-light);
    width: 7rem;
    display: flex;
    justify-content: space-evenly;
    border: 3px solid var(--accent-color);
    border-radius: 10px;
    box-shadow: 9px 9px 0 -3px var(--accent-color);
    display: block;
    padding: 0.75rem 1.5rem;
    text-align: center;
    text-decoration: none;
    font-family: 'Alexandria', sans-serif;
    color: var(--accent-color);
    font-size: 1rem;
    font-weight: 700;
    transition: 0.1s;
}

.button.active {
    background-color: var(--main-color);
    color: var(--background-light);
    box-shadow: 6px 6px 0 -3px var(--accent-color);
    transform: translateX(3px) translateY(3px);
}



.button:hover,
.button:focus-visible {
    box-shadow: 6px 6px 0 -3px var(--accent-color);
    transform: translateX(3px) translateY(3px);

}

/* ===== LAYOUT CONTAINERS ===== */



main {
    flex: 3;
    margin-right: clamp(2rem, 17vw, 40rem);
    margin-top: 3rem;
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 60%;
    max-width: 70rem;
    margin-left: auto;
    margin-right: 12%;
    margin-top: 7rem;

    .header-image {
        display: block;
        position: relative;
        z-index: -1;


    }

    hgroup {
        display: block;
    }

    .sub-title {

        font-size: 1.2rem;
        font-weight: 300;
    }

    h1 {
        margin-top: 3.2rem;
        text-align: left;
        font-size: 7rem;
        font-weight: 700;
        line-height: 100%;
    }


}

.welcome {
    margin-top: -5rem;

}


.intro-paragraph {
    font-family: 'Atkinson Hyperlegible', sans-serif;
}

.projects-button {

    summary {




        box-sizing: border-box;

        list-style: none;
        cursor: pointer;




        &::after {
            /* Set the font for this icon style */
            font-family: 'Font Awesome 6 Free';
            /* Set the weight for this icon style */
            position: relative;
            float: right;
            bottom: 0.1lh;
            content: '\f054';
            /* Set this layer's color */
            color: var(--background-light);
            font-size: 2rem;
            transition: transform 0.2s ease;
        }
    }
}


.detail-cards {
    --border-width: 4px;
    --border-radius: 17px;
    transform: translateX(-7px) translateY(-7px);
    display: block;
    border: solid var(--border-width) var(--accent-color);
    border-radius: var(--border-radius);
    box-shadow: 14px 14px 0 -4px var(--accent-color);
    background-color: var(--background-light);
    padding: 0;
    transition: all 0.2s;
    padding-left: 2rem;
    width: 100%;

    ul {
        list-style: disc;
        line-height: 140%;

        li {
            margin-bottom: 0.9rem;
            max-width: 40rem;
        }
    }


    &:has(summary:hover) {
        box-shadow: 7px 7px 0 -4px var(--accent-color);
        transform: translateX(0px) translateY(0px);
    }

    summary {

        border-bottom: 5px solid var(--accent-color);
        padding: 2rem;
        margin-left: -2rem;
        border-radius: calc(1rem - var(--border-width));
        box-sizing: border-box;
        width: calc(100% + 2rem);
        list-style: none;
        cursor: pointer;
        font-family: 'Atkinson Hyperlegible', sans-serif;
        font-size: 2rem;
        font-weight: 800;
        color: var(--background-light);
        background-color: var(--main-color);

        &:hover {
            background-color: var(--accent-color);

        }

        &::after {
            /* Set the font for this icon style */
            font-family: 'Font Awesome 6 Free';
            /* Set the weight for this icon style */
            position: relative;
            float: right;
            bottom: 0.1lh;
            content: '\f054';
            /* Set this layer's color */
            color: var(--background-light);
            font-size: 2rem;
            transition: transform 0.2s ease;
        }
    }

    .cards {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        font-size: inherit;
    }

    &[open] {


        transform: translateX(0px) translateY(0px);
        box-shadow: 7px 7px 0 -4px var(--accent-color);

        summary {
            margin-bottom: 1rem;

            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        summary::before {
            background-color: var(--background);
            border-radius: 40px 0 0 0;
        }

        summary::after {
            font-family: 'Font Awesome 6 Free';
            /* Set the weight for this icon style */
            position: relative;
            bottom: 0.1lh;

            content: '\f078';
        }
    }
}

/* ===== CARDS SECTION ===== */
.cards,
details.cards[open]> :not(summary) {
    flex: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: stretch;

    p {
        color: var(--background-light);
    }

    section {
        display: inline-block;
        background: var(--main-color);
        border: 3px solid var(--accent-color);
        padding: 20px;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 25px;
        flex: 1;


        hgroup {
            margin-bottom: 1rem;

            /* prelude */
            p:has(+ h2) {
                color: var(--accent-color);
                display: inline-block;
                font-family: 'Atkinson Hyperlegible', sans-serif;
                color: var(--background-light);
                margin-top: 0;
                margin-bottom: 1rem;
                font-size: 0.7rem;
                font-weight: 700;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                display: inline-flex;
            }

            h2 {
                color: white;
                display: block;
                font-family: 'Alexandria', sans-serif;
                font-weight: 800;
                font-size: 1.4rem;
                margin-bottom: 0.2rem;

                /* subtitle */
                +p {
                    display: block;
                    margin-top: 0;
                    color: var(--background-light);
                    font-family: 'Atkinson Hyperlegible', sans-serif;
                    font-weight: 600;
                }
            }
        }

        h3 {
            color: white;
            font-size: 1.3rem;
            font-weight: 500;
        }



        /* call to action */

        .call-to-action {
            position: absolute;
            right: 2rem;
            bottom: 2rem;
            border-radius: 40px;
            color: var(--accent-color);
            background: var(--background-light);
            text-decoration: none;
            font-family: 'Alexandria', sans-serif;
            font-weight: 600;
            padding: 6px;
            margin-top: 1rem;
            float: right;
            border: 3px solid var(--accent-color);
            border-radius: 40px;
            box-shadow: 5px 5px 0 -2px var(--accent-color);

            &:hover {
                transform: translateX(2px) translateY(2px);
                box-shadow: 3px 3px 0 -2px var(--accent-color);
            }
        }

        .summary,
        details:not(summary) {
            line-height: 1.4rem;
            display: block;
            color: var(--accent-color);
            font-size: 1.2rem;
            list-style: none;
            /* text-indent: -0.7rem; */
            text-align: left;
            padding-bottom: 1rem;
            margin-top: 0;
            color: var(--background-light);
            font-family: 'Atkinson Hyperlegible', sans-serif;
            font-weight: 400;
            font-size: 0.95rem;
            margin-bottom: 0;
            text-align: justify;
            padding-inline-start: 0;
            padding-bottom: 5rem;

            ul& {
                padding-inline-start: 1em;
            }

            li {
                display: block;
                width: max-content;

                &::before {
                    content: attr(data-icon);
                    margin-left: -0.7rem;
                    padding-right: 0.8rem;
                }
            }

        }
    }
}

/* ===== PROJECT CARD ===== */
.project {
    align-items: stretch;
    position: relative;
    transition: 0.2s;
    flex: 1;
    min-width: 320px;
    hgroup{
        p{
            line-height:1.4rem;
        }
    }

    img {
        border-radius: 80%;
        float: right;
        height: auto;
        width: 5em;
        border: var(--accent-color) solid 3.5px;
    }
}


/* ===== SKILLS CARD ===== */
.skills {
    hgroup {
        p:has(+ h2) {
            color: var(--accent-color) !important;
        }

        h2 {
            color: var(--mid-blue) !important;
        }

    }

    --main-color: var(--background-light);
    position: relative;
    block-size: fit-content;
    width: fit-content;
    transition: 0.2s;
    flex: 0 0 auto;

    .tags {
        padding-bottom: 3rem;

        li {
            background-color:var(--mid-blue);
            color: var(--background-light);
        }
    }



}

.inlinetags {
    /* color: var(--background-light); */
    /* color: inherit; */
    text-decoration: none;
    margin-right: 1px;
    margin-bottom: 1px !important;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background: var(--background-light);
    color: var(--accent-color);
    font-family: 'Alexandria',
        sans-serif;
    padding: 3px 8px;
    border-radius: 4px;
    font-size:0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    line-height:1rem;

    &:hover,
    &:focus-visible {
        background: var(--accent-color);
        color: var(--background-light);
    }
}

.resume {
    vertical-align: middle;
    width: calc(50% - 1.3rem);
    height: 18rem;
    margin-right: .75rem;
    margin-bottom: .75rem;
    box-sizing: border-box;

    hgroup {
        margin-bottom: 0;
    }
}

.school,
.job {
    margin-left: 0;
    padding-left: 0;
    width: calc(95% - 2rem);
}


/* ===== TAGS ===== */
.tags {

    margin-top: 1rem;
    display: inline-block;
    padding-left: 1rem;
    margin-bottom: 2rem;
    padding-inline-start: 0;

    li {
        a {
            color: inherit;
            text-decoration: none;
        }

        margin-right:5px;
        margin-bottom: 2px !important;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        background: var(--accent-color);

        font-family: 'Alexandria',
        sans-serif;
        font-size: 0.9rem;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;

        color: var(--background-light);

        &:hover,
        &:focus-visible {
            background: var(--accent-color);

        }
    }
}

.tags a {
    color: inherit;
    text-decoration: none;
}

.tags a:hover,
.tags a:focus {
    text-decoration: underline;
    opacity: 0.8;
}

.article-hero {
    float:right;
    margin-right:-2rem;
    margin-left: -10rem;
    margin-top:-10rem;
    overflow: hidden;
    margin-bottom: 2rem;
    opacity:30%;
    
}
.article-cover-image {
    width: 100%;
    height: 40rem;
    object-fit: cover;
    color-mix

    
}

.card, .projectHeader {
    background-color:var(--main-color);
    border: 4px solid var(--accent-color);
    border-radius: 10px;
}

.projectHeader {
    padding-top:2rem;
    padding-left: 2rem;
    padding-right:0rem;
    margin-top:-16rem;
    z-index:10;
    color: var(--background-light);
    h1{
        font-size:3rem;
    }
    h2{
        font-size: 1rem;
    }
    
}

/* ===== FOOTER ===== */
footer {
    margin: -1rem;
    padding: 1rem;
    padding-left: 5%;
    background-color: var(--background-color);
}

/* ===== RESPONSIVE DESIGN ===== */
/* ===== Large Desktop (default) ===== */
/* No query needed, base styles apply */
@media (max-width: 1700px) {


    main {
        .cards {
            max-width: 70vw;
        }

        h1 {
            margin-top: 1rem;
            font-size: clamp(5rem, 10vw, 6.5rem);
        }

        hgroup {
            h1 {
                margin-top: 1rem;
                font-size: clamp(2rem, 10vw, 6.5rem);
            }

            .sub-title {
                font-size: 1.2rem;
                margin-bottom: -1rem;
                padding-bottom: 0;
            }
        }
    }


}

/* Medium screens (≤ 1500px) – tighten margins, move buttons to top */
@media (max-width: 1500px) {
    .resume {
        height: auto;
    }



    .introduction {

        margin-bottom: -2rem;
        padding-bottom: 0;

        h1 {
            font-size: clamp(5rem, 20vw, 10rem);
            z-index: 5;
        }

        img {
            width: clamp(25rem, 50vw, 28rem);
            right: 50%;
            z-index: 4;

        }

        .tag-block {
            z-index: 5;
            margin-bottom: clamp(2.2rem, 3vw, 3rem);

            .tagline {
                font-size: clamp(0.8rem, 3vw, 1.4rem);
            }

            .focus-areas {
                font-size: clamp(0.7rem, 1vw, 1rem);
                line-height: 1;
            }
        }
    }


    .cards {
        section {
            h2 {
                margin-bottom: 20rem;
            }
        }
    }

    .detail-cards {
        padding-right: 1rem;
        padding-left: 1rem;

        summary {
            margin-left: -1rem;
        }

    }





    main {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        max-width: 50rem;

        p {
            font-size: 1rem;
        }

        .welcome {
            h1 {
                font-size: clamp(4rem, 10vw, 6.5rem);
            }
        }

        .project {
            max-width: 30%;
        }

    }

    .introduction {
        padding-top: 5rem;
    }

    /* Rail still vertical but centered */


    .rail-sticky {
        margin: 2rem auto;
        float: none;
        max-width: 100%;
        position: sticky;
        top: 0;
        margin-top: -4rem;
        background-color: var(--background-light);
        padding-top: 1rem;
        padding-bottom: clamp(0.5rem, 1vw, 1.5rem);
        border-bottom: solid 5px var(--accent-color);
        min-width: 100vw;
        height: 4rem;

        z-index: 2;

        aside {
            z-index: 20;
        }


        header {
            position: absolute;
            float: left;
            left: 1rem;
            top: 1rem;

        }

        ul {
            position: absolute;
            z-index: 10;

            float: right;
            right: 3rem;
            top: 1rem;


        }

        li {
            display: inline-block;
            margin-left: clamp(1px, 1vw, 2rem);
        }

        header {
            span {
                font-size: clamp(0.5rem, 1vw, 0.7rem);
                width: clamp(5rem, 10vw, 8rem);
                text-wrap: wrap;

            }

            .name {
                width: 7rem;
                font-size: clamp(0.4rem, 3vw, 1rem);
                margin-bottom: -0.3rem;
                padding-bottom: 0;

            }

            img {
                margin-left: 1rem;
                margin-right: 0.3rem;
                width: clamp(2rem, 10vw, 4rem);
                height: clamp(2rem, 10vw, 4rem);

                /* padding-right: 9rem;
                margin-right: -9rem; */
            }
        }

        .button {

            font-size: clamp(0.6rem, 1.2vw, 1.2rem);
            padding-left: clamp(0.3rem, 0.2vw, 0.6rem);
            padding-right: clamp(0.3rem, 0.2vw, 0.6rem);
            padding-top: 0.3rem;
            padding-bottom: 0.3rem;
            width: fit-content;
            box-shadow: 2px 2px;

        }

        .button:hover {
            box-shadow: none;
        }
    }

    .welcome {
        padding-top: 2rem;
    }


    .rail-sticky.home {
        padding-top: 4rem;
        position: absolute;
        border-bottom: none;
        background-color: transparent;
        z-index: 100;
        align-items: center;

        ul {
            padding: 0;
            position: relative;
            margin-left: auto;
            margin-right: auto;


            display: block;
            width: fit-content;
            align-self: center;
            right: auto;

            top: 1rem;
        }

        li {
            margin-bottom: 0;
            margin-left: 0;

        }

        .button {
            margin-left: clamp(0rem, 6vw, 10rem);
            padding-left: clamp(0rem, 3vw, 2rem);
            padding-right: clamp(0rem, 3vw, 2rem);
            padding-top: clamp(0rem, 5vw, 0.6rem);
            padding-bottom: clamp(0rem, 5vw, 0.6rem);

        }

        .button.active {
            box-shadow: none;
            margin-left: 0;
        }
    }

    .project {
        width: 1rem;
    }

    /* Ensure the cards container spans full width */


    .cards {
        flex-direction: column;
        /* Stack the cards vertically */
        width: 100%;
        /* Full width of the container */
        gap: 1rem;
        /* Add spacing between stacked cards */
    }

    /* Ensure each individual card spans 100% */
    .cards>section {
        flex: 1 1 100%;
        /* Allow cards to take up full width */
        width: 100%;
        /* Ensure no shrinking occurs */
        margin: 0 auto;
        /* Center each card */
        max-width: none;
        /* Remove any constraints */
    }

    .resume {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-wrap: wrap;


    }




}

@media (max-width: 600px) {
    main {
        margin-left: 9%;
        margin-top: 5rem;
    }


    .introduction {
        img {
            /* right: 40%; */
            width: clamp(20rem, 50vw, 28rem);
        }
    }

    .rail-sticky {
        header {
            left: -0.5rem
        }




    }

    .detail-cards {
        width: 85vw;
        margin-left: -7vw;
    }


}

@media (max-width: 500px) {
    body {
        overflow-x: hidden;

    }



    .rail-sticky {
        z-index: 1000;

        ul {
            right: 0.5rem;
        }
    }

    h1 {
        font-size: 4.3rem !important;
    }

    .welcome {
        h1 {
            margin-top: 2rem;
            font-size: 4rem !important;
        }


    }

    .intro-paragraph {
        text-align: justify;
    }

    .cards {
        .summary {
            max-width: 100%;
        }



        section {
            max-width: 20rem;

        }

        .project {
            min-width: 200px;

            .call-to-action {
                z-index: 100;
            }



            img {
                z-index: 0;
                opacity: 30%;
                position: absolute;
                top: 0;
                float: left;
                left: 0;
                border: none;
                border-radius: 0.4rem;
                border-bottom: solid 4px var(--accent-color);
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                width: 100%;

            }

            hgroup {
                position: relative;
                top: 8rem;
                padding-bottom: 10rem;

                z-index: 10;

                h2 {
                    font-size: 1.8rem !important;


                }

                p {
                    font-size: 1.1rem;
                    color: white !important;
                }


            }

            .summary {
                position: relative;
                color: white !important;
                font-size: 1rem !important;
            }

            .tags {
                position: absolute;
                z-index: 10;

                top: 1rem;

                li {
                    background-color: rgba(3, 24, 82, 0.856);
                }
            }


        }

        margin-left: 0rem;
    }
}