@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    color-scheme: only dark;
    
    --clr-blue-100: #bfe7ff; /* (202.5, 25, 100)  */
    --clr-blue-200: #7ebfe6; /* (202.5, 45, 90)   */
    --clr-blue-300: #4cace6; /* (202.5, 67, 90)   */
    --clr-blue-400: #009fff; /* (202.5, 100, 100) */
    --clr-blue-450: #0079c2; /* (202.5, 100, 76)  */
    --clr-blue-500: #0059aa; /* (202.5, 100, 67)  */
    --clr-blue-600: #003573; /* (212.5, 100, 45)  */
    --clr-blue-700: #0c1d40; /* (220, 81, 25)     */

    --clr-indigo-200: #b5aaff; /* (247.5, 33, 100) */
    --clr-indigo-300: #6a55ff; /* (247.5, 67, 100) */
    --clr-indigo-400: #4126ff; /* (247.5, 85, 100) */
    --clr-indigo-500: #2c1aaa; /* (247.5, 85, 67)  */
    --clr-indigo-600: #0e0640; /* (247.5, 100, 23) */

    --clr-gold-100: #ffeaab; /* (45, 33, 100)  */
    --clr-gold-200: #e6c973; /* (45, 50, 90)   */
    --clr-gold-300: #e6bf4c; /* (45, 67, 90)   */
    --clr-gold-400: #ffbf00; /* (45, 100, 100) */
    --clr-gold-500: #d99100; /* (45, 100, 80)  */
    --clr-gold-600: #997300; /* (45, 100, 60)  */
    
    --clr-white: #fff;
    --clr-neutral-200: #dae1e6; /* 90% white, 5% blue      */
    --clr-neutral-300: #a0b3bf; /* 75% white, 16.7% blue   */
    --clr-neutral-400: #707a80; /* 50% white, 12.5% blue   */
    --clr-neutral-500: #394a55; /* 33.3% white, 33.3% blue */
    --clr-neutral-600: #222d33; /* 20% white, 33.3% blue   */
    --clr-black: #000;

    --clr-green-300: #00bf19; /* (128, 100, 75)  */
    --clr-green-400: #00ff22; /* (128, 100, 100) */
    --clr-red-300: #bf0000;   /* (0, 100, 75)    */
    --clr-red-400: #ff0000;   /* (0, 100, 100)   */

    --ff-sans-1: 'Montserrat', sans-serif;
    --ff-sans-2: 'Arial', 'Helvetica', sans-serif;
    
    --ff-serif-1: 'Merriweather', 'Georgia', serif;
    --ff-serif-2: 'Georgia', 'Times New Roman', serif;

    --fs-100: 0.75rem;
    --fs-200: 0.875rem;
    --fs-300: 0.75rem; /* project cards */
    --fs-400: 1rem;
    --fs-450: 1.125rem;
    --fs-500: 1.5rem;
    --fs-600: 1.875rem;
    --fs-700: 2.5rem;
    --fs-800: clamp(1.75rem, 3.5vw, 3.25rem);
    --fs-900: clamp(2rem, 4vw, 3.75rem);

    --border-offset: -2px;
    --border-offest-lg: -3px; 

    --border-rad-lg: 1rem;
    --border-rad: 0.75rem;
    --border-rad-sm: 0.375rem;

    --width-0: min(50vw, 600px); /* Footer links    */
    --width-1: min(100%, 960px); /* Tables, forms   */
    --width-2: min(80vw, 1200px); /* Standard width */
}


/****** Typography ******/

p {
    margin-bottom: 2rem;
}

p a,
p a:visited,
li a,
li a:visited {
    color: var(--clr-gold-400);
}

p a:hover,
p a:active,
li a:hover,
li a:active {
    color: var(--clr-blue-400) ;
}

p,
li {
    font-family: var(--ff-serif-1);
    font-size: var(--fs-400);
    line-height: 2;
    color: var(--clr-neutral-200);
    letter-spacing: 0.4px;
    text-underline-offset: 0.3125rem;
}

em {
    color: var(--clr-blue-300);
}

h1 {
    font-size: var(--fs-700);
    font-weight: 700;
    color: var(--clr-gold-400);
    margin: 2.5rem auto;
    text-align: center;
}

h2, h3, h4 {
    margin: 2rem 0 1.25rem;
}

h2, h3, h4, h5, h6 {
    color: var(--clr-blue-400);
}

h3, h4 {
    line-height: 2rem;
}

h2 {
    font-size: var(--fs-600);
    font-weight: 700;
    line-height: 2.5rem;
}

h3 {
    font-size: var(--fs-500);
    font-weight: 700;
}

h4 {
    font-size: var(--fs-450);
    font-weight: 600;
}

h5, h6 {
    font-style: oblique;
    font-weight: 500;
}

h5 {
    font-size: var(--fs-400);
    margin: 2rem 0;
}

h6 {
    font-size: var(--fs-200);
    margin: 0.5rem 0;
}

ul {
    margin-bottom: 2rem;
}

p + ul {
    margin-top: -1rem !important;
}

li {
    list-style-type: disc;
    margin: 0 0 0.5rem 2ch; 
}

li::marker {
    color: var(--clr-blue-400);
}

nav ul {
    margin-bottom: 0;
}

nav ul li {
    font-family: var(--ff-sans-1);
    line-height: normal;
    list-style: none;
    margin: 0;
    padding: 0;
}


/****** Containers ******/

html, body {
    font-family: var(--ff-sans-1);
    font-size: var(--fs-400);
    height: 100%;
    width: 100%;
    color: var(--clr-neutral-200);
    background-color: var(--clr-black);
    overflow-x: hidden;
}

.main {
    flex: 1;
    padding-bottom: 2rem;
    width: 100%;
    overflow-x: hidden;
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 0;
    padding: 0;
    background: linear-gradient(33deg, 
        var(--clr-indigo-500) 0%, 
        var(--clr-black) 35%,
        var(--clr-black) 66.7%,
        var(--clr-indigo-500) 83%, 
        var(--clr-blue-400) 100%) ;
    background-attachment: fixed;
    min-height: max(100vh, 100%);
}

.container__main {
    display: grid;
    grid-template-columns: [line0] 1fr [line1] auto [line2] 1fr [line3];
}

.subcontainer__main {
    grid-column: line1 / line2;
    margin: 0 auto;
    word-wrap: break-word;
    max-width: var(--width-2);
}

.container__header,
.container__footer,
.subcontainer__main {
    font-family: var(--ff-sans-1);
    width: 100%;
}

.container .container__header,
.container .container__footer {
    align-items: center;
    text-align: center;
    background-color: var(--clr-black) ;
}

.subcontainer__header,
.subcontainer__footer {
    margin: 0 auto;
}

section {
    background-color: var(--clr-black);
    margin: 4rem auto;
    min-width: var(--width-2);
}

.section-title {
    margin-top: 3rem;
    padding-bottom: 0;
}

.section-last {
    margin-bottom: 2.5rem;
}

.container__full-width {
    grid-template-columns: 1fr auto 1fr;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
}

.container__full-width section {
    background-color: inherit;
    margin: 0;
}

.subcontainer__full-width {
    grid-column: line1 / line2;
    margin: 0 auto;
    padding: 1.5rem 0;
    max-width: var(--width-2);
}

.subcontainer__full-width h2 {
    margin-bottom: 2rem;
}

.subcontainer__full-width section {
    background-color: transparent;
}

.no-heading {
    padding-top: 2rem;
}

/****** Blocks ******/

.code-block {
    display: block;
    font-size: var(--fs-400);
    border: 2px solid var(--clr-blue-500);
    border-radius: var(--border-rad-sm);
    padding: 1rem;
    width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    margin-bottom: 2rem !important;

}

.gallery-block {
    display: block;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto 0;
    padding-top: 1rem;
}

.gallery-block__list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    margin: 0;
}

.gallery-block__list-item {
    flex: 1 1 calc(33.333% - 1rem); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0 0 1rem;
}

.gallery-block__image {
    display: flex;
    border-radius: var(--border-rad-sm);
    flex-direction: column;
    width: min(360px, 36vw);
}

.img-block__figure {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: auto;
    margin: 1rem auto 0.75rem;
    padding: 0;
    align-items: center;
}

.img-block__image {
    border-radius: var(--border-rad-sm);
    max-width: 100%;
    max-height: 50vh;
    margin: 0 auto;
}

.img-block__border {
    border: 2px solid var(--clr-blue-500);
}

.img-block__no-border-radius {
    border-radius: 0px;
}

.video-block {
    display: inline-block;
}

.video-block video {
    border-radius: var(--border-rad-sm);
    max-width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    margin: 1rem auto 0;
}

.block__caption {
    font-family: var(--ff-serif-1);
    font-size: var(--fs-400);
    font-style: italic;
    color: var(--clr-neutral-300);
    text-align: center;
    margin: 1rem auto 1rem;
}


/*** Header ***/

.container__header {
    width: 100%;
}

.subcontainer__header {
    display: flex;
    flex-wrap: wrap;
    width: var(--width-2);
    padding: 1em 0.5rem;
}

.header__logo {
    flex: 1 1 auto;
    font-family: var(--ff-sans-1);
    font-size: var(--fs-450);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    margin: 0.5em 0;
}

.header__nav {
    flex: 1 1 auto;
}

.header__nav-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0.5em 0;
}

.header__nav-list li {
    font-size: var(--fs-400);
    font-weight: 500;
    flex: 1 1 auto;
    text-align: right;
}

.header__logo a {
    text-decoration: none;
    color: var(--clr-neutral-300);
}

.header__nav-list a,
.header__nav-list li a:active,
.header__nav-list li a:visited {
    text-decoration: none;
    color: var(--clr-blue-400);
}

.header__logo a:hover,
.header__nav-list li a:hover {
    color: var(--clr-gold-300);
}


/*** Footer ***/

.container__footer {
    padding: 1.75rem 1rem 1.25rem;
    align-items: center;
    text-align: center;
}

.subcontainer__footer {
    grid-template-rows: auto auto auto;
    justify-items: center;
}

.footer__site-link-wrapper {
    margin: 0.5rem 0;
}

.footer__site-link-wrapper ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    padding: 0.75rem 0 1rem;
    margin: 0 auto;
    width: var(--width-1);
}

.footer__site-link-wrapper li {
    font-size: var(--fs-200);
    font-weight: 500;
    line-height: 1.75;
    flex: 1 1 auto;
    text-align: center;
}

.footer__site-link-nav-list a,
.footer__site-link-nav-list a:active,
.footer__site-link-nav-list a:visited {
    text-decoration: none;
    color: var(--clr-blue-400);
    transition: color 0.3s;
}

.footer__site-link-nav-list li a:hover {
    color: var(--clr-gold-300);
}

.footer__social-link-wrapper {
    margin: 0 auto;
    width: var(--width-1);
}

.footer__social-link-wrapper ul {
    display: flex;
    flex-wrap: wrap;
}

.footer__social-link-wrapper li {
    flex: 1 1 auto;
    text-align: center;
}

.footer__social-icon svg {
    fill: var(--clr-blue-500);
    width: auto;
    height: auto;
    min-width: 2.5rem;
    min-height: 2.5rem;
    max-width: 3.25rem;
    max-height: 3.25rem;
    transition: transform 0.3s ease, fill 0.3s ease;
}

.footer__text-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-align: center;
}

.footer__copyright,
.footer__legal a,
.footer__getkirby a,
.footer__getkirby-text{
    font-weight: 500;
    color: var(--clr-blue-450);
    transition: color 0.3s;
}

.footer__copyright,
.footer__legal,
.footer__getkirby {
    font-family: var(--ff-serif-1);
    font-size: var(--fs-100);
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.footer__getkirby a,
.footer__legal a {
    display: flex;
    align-items: center;
    text-underline-offset: 2px;
}

.footer__getkirby-icon {
    width: 1rem;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.375rem 0 0.5rem;
}

.footer__getkirby-icon svg {
    width: 100%;
    height: auto;
    fill: var(--clr-blue-450);
    transition: fill 0.3s;
}

.footer__legal {
    margin-left: 0.5rem;
    margin-right: 0.25rem;
}

.footer__getkirby a:hover,
.footer__getkirby a:hover .footer__getkirby-text,
.footer__legal a:hover {
    color: var(--clr-gold-300);
    transition: color 0.3s;
}

.footer__getkirby a:hover .footer__getkirby-icon svg,
.footer__social-icon svg:hover {
    fill: var(--clr-gold-400);
    transition: fill 0.3s;
}

.footer__social-icon a:hover svg {
    transform: scale(1.05);
}


/*** Borders ***/

.border {
    border-width: 2px;
}

.border-sm {
    border-width: 1px;
}

.border__all {
    border-style: solid;
}

.border__top {
    border-style: solid none none;
}

.border__bottom {
    border-style: none none solid;
}

.border__top-bottom {
    border-style: solid none solid;
}

.border-black {
    border-color: var(--clr-black);
}

.border-blue {
    border-color: var(--clr-blue-500);
}

.border-blue-light {
    border-color: var(--clr-blue-200);
}

.border-gradient {
    box-sizing: border-box;
    position: relative;
    border-radius: var(--border-rad);
    z-index: 1;
    overflow: hidden;
    padding: 0 2rem;
}

.border-gradient::before {
    content: '';
    position: absolute;
    top: var(--border-offset);
    left: var(--border-offset);
    right: var(--border-offset);
    bottom: var(--border-offset);
    border-radius: var(--border-rad);
    background: linear-gradient(45deg,
            var(--clr-blue-500),
            var(--clr-blue-500),
            var(--clr-neutral-400),
            var(--clr-blue-500),
            var(--clr-blue-400));
    z-index: -1;
}

.border-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: inherit;
    margin: 2px;
    z-index: -1;
    color: transparent;
}

.border-gradient-lg {
    box-sizing: border-box;
    position: relative;
    border-radius: var(--border-rad-lg);
    z-index: 1;
    overflow: hidden;
    color: var(--clr-black);
}

.border-gradient-lg::before {
    content: '';
    position: absolute;
    top: var(--border-offset);
    left: var(--border-offset);
    right: var(--border-offset);
    bottom: var(--border-offset);
    border-radius: var(--border-rad-lg);
    background: linear-gradient(33deg,
            var(--clr-blue-500),
            var(--clr-blue-500),
            var(--clr-neutral-400),
            var(--clr-blue-500),
            var(--clr-blue-400));
    z-index: -1;
}

.border-gradient-lg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: inherit;
    margin: 2px;
    z-index: -1;
    color: transparent;
}

.border-gradient__bottom,
.border-gradient__top,
.border-gradient__top-bottom {
    position: relative;
    background-color: inherit;
    border: 2px solid transparent;
    border-image: linear-gradient(to right, var(--clr-neutral-400), var(--clr-blue-400)) 1;
}

.border-gradient__bottom {
    border-width: 0 0 2px 0;
}

.border-gradient__top {
    border-width: 2px 0 0 0;
}

.border-gradient__top-bottom {
    border-width: 2px 0;
}

.border-gradient-sm__bottom,
.border-gradient-sm__top,
.border-gradient-sm__top-bottom {
    position: relative;
    background-color: inherit;
    border: 1px solid transparent;
    border-image: linear-gradient(to right, var(--clr-neutral-500), var(--clr-blue-500)) 1;
}

.border-gradient-sm__bottom {
    border-width: 0 0 1px 0;
}

.border-gradient-sm__top {
    border-width: 1px 0 0 0;
}

.border-gradient-sm__top-bottom {
    border-width: 2px 0;
}


/*** Container Colors ***/

.bg-blue {
    background-color: var(--clr-blue-500);
    background: linear-gradient(33deg, 
        var(--clr-blue-600) 0%, 
        var(--clr-blue-500) 33.3%,
        var(--clr-blue-500) 66.7%,
        var(--clr-blue-400) 100%) ;
}

.bg-black {
    background-color: var(--clr-black);
}

.bg-blue h1,
.bg-blue h2,
.bg-blue h3,
.bg-blue h4,
.bg-blue p {
    color: var(--clr-white);
}

.bg-clear {
    background-color: transparent;
}

.bg-clear h2,
.bg-clear h3,
.bg-clear h4,
.bg-clear h5,
.bg-clear h6 {
    color: var(--clr-gold-400);
}


/****** Buttons ******/

.btn {
    text-decoration: none;
    display: inline-block;
    font-family: var(--ff-sans-1);
    font-size: var(--fs-450);
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s, transform 0.3s, font-weight 0.3s;
    padding: 0.5em 1em;
    margin: 1rem auto 2rem;
    border-radius: var(--border-rad-sm);
    border: 2px solid var(--clr-white);
    color: var(--clr-white) ;
    background-color: transparent;
}

.btn-lg {
    font-size: var(--fs-600);
    font-weight: 800;
    border-width: 3px;
    border-radius: var(--border-rad);
}

.btn-sm {
    font-size: var(--fs-200);
    font-weight: 700;
    margin-bottom: 1rem;
}

.btn-gold {
    background-color: var(--clr-gold-400);
    color: var(--clr-black) ;
    border-color: var(--clr-gold-400);
}

.btn-gold-outline {
    color: var(--clr-gold-400);
    border-color: var(--clr-400);
}

.btn-black {
    background-color: var(--clr-black);
    color: var(--clr-gold-300);
    border-color: var(--clr-black);
}

.btn-black-outline {
    color: var(--clr-black);
    border-color: var(--clr-black);
}

.btn-blue {
    background-color: var(--clr-blue-400);
    color: var(--clr-black);
    border-color: var(--clr-blue-400);
}

.btn-blue-outline {
    color: var(--clr-blue-400);
    border-color: var(--clr-blue-400);
}

.btn-wht-blk {
    background-color: var(--clr-blue-700);
    color: var(--clr-white);
    border-color: var(--clr-white);
}

.btn-blk-bg {
    background-color: var(--clr-black);
}

.btn:hover {
    transform: scale(1.05);
    background-color: var(--clr-gold-400);
    color: var(--clr-black);
    border-color: var(--clr-gold-400);
}

.btn-gold:hover {
    background-color: var(--clr-black);
    color: var(--clr-gold-400);
    border-color: var(--clr-gold-400);
}

.btn-center {
    margin-left: auto;
    margin-right: auto;
}


/****** Homepage ******/

/** Homepage Hero Image **/

.container__hero {
    width: var(--width-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    gap: 2rem; /* Adds spacing between child elements */
}

.hero-title {
    flex: 1 1 300px; /* Ensures it takes up at least 300px, adjusts flexibly */
    max-width: 600px; /* Matches your `--width-0` variable */
    text-align: left;
}

.hero-title h1 {
    font-family: var(--ff-serif-1);
    font-size: var(--fs-900);
    font-weight: 800;
    color: var(--clr-gold-400);
    line-height: 1.1;
    white-space: wrap;
    width: 100%; /* Ensures full width for content */
    padding-top: 1.5rem;
}

.hero-image {
    flex: 1 1 300px; /* Ensures a responsive minimum size */
    max-width: 500px;
    margin: 0 auto;
}

.hero-image img {
    display: block;
    max-width: 100%;
    filter: grayscale(100%);
    aspect-ratio: 1/1;
    margin: 0 auto;
}

.hero-name {
    line-height: 1.5;
}

.hero-subtitle {
    font-family: var(--ff-serif-1);
    font-size: var(--fs-800);
    font-weight: 700;
    color: var(--clr-neutral-300);
    letter-spacing: -0.25px;
    white-space: normal;
}

.hero-title .btn-wrapper {
    width: 100%;
    text-align: center;
}

.hero-title .btn-wrapper .btn {
    margin-top: 0.5rem;
}

/****** Experience ******/

.experience-overview {
    margin-top: 3rem;
    margin-bottom: 0;
    padding-bottom: 0;
}

.experience-btn-container {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
}

.experience-btn-container .btn-wrapper a {
    margin-bottom: 0;
    min-width: 11rem;
}

.container__experience h2 {
    color: var(--clr-gold-400);
}


/****** Projects ******/

/*** Projects Category Page ***/

.projects-overview {
    width: var(--width-1);
    margin-bottom: 3rem;
}

.subcontainer__category-list {
    display: grid;
    padding: 1rem;
    margin: 0 auto;
    width: var(--width-2);
}

.projects__menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 0;
}

.projects__category-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.75rem;
    font-weight: 700;
}

.projects__category-list a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--fs-100);
    letter-spacing: 0.75px;
    border: 2px solid var(--clr-blue-400);
    border-radius: var(--border-rad);
    background-color: transparent;
    color: var(--clr-neutral-200);
    transition: background-color 0.3s, color 0.3s, transform 0.3s, font-weight 0.3s;
    height: 2rem;
    padding: 0.25rem 0.5rem;
    max-width: var(--width-2);
}

.projects__category-list a.active {
    background-color: var(--clr-blue-400);
    border-color: var(--clr-blue-400);
    color: var(--clr-black);
    font-weight: 700;
}

.projects__category-list a:hover {
    transform: scale(1.05);
    background-color: var(--clr-gold-400);
    color: var(--clr-black) ;
    border-color: var(--clr-gold-400);
}

.container__category-dropdown {
    display: none;
    padding: 0;
    margin-top: 1rem;
    width: 100%;
}

.projects__category-dropdown {
    display: block;
    font-weight: 500;
    font-size: var(--fs-400);
    color: var(--clr-black);
    background-color: var(--clr-blue-200);
    background-image: linear-gradient(to top, 
        var(--clr-gold-500), 
        var(--clr-gold-400) 15%,
        var(--clr-gold-400) 85%,
        var(--clr-gold-500) 100%);
    border: 2px solid var(--clr-black);
    border-radius: var(--border-rad);
    padding: 0.5rem 1rem;
    width: auto;
    max-width: 80vw;
    margin: 2rem auto 0;
}

.project-gallery {
    min-width: var(--width-2);
    padding: 0;
    margin-bottom: 0;
}

#additional-projects,
#featured-projects {
    margin-bottom: 3.5rem;
}

#additional-projects h2,
#featured-projects h2 {
    margin-bottom: 2rem;
}


/*** Project Gallery Snippet ***/

.container__project-card-gallery {
    margin: 0 auto 0;
    display: flex;
    justify-content: center;
    width: var(--width-2);
}

.project-card__list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    margin-bottom: 0;
}

.project-card__list-item {
    flex: 1 1 calc(33.333% - 1rem); 
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 4rem;
}

.project-card__container {
    background-color: var(--clr-black);
}

.project-card {
    border: 3px solid transparent;
    border-radius: var(--border-rad-lg);
    overflow: hidden;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    width: min(260px, 32vw);
    aspect-ratio: 1/2;
}

.project-card__image-wrapper {
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    width: auto;
    border-bottom: 3px solid var(--clr-blue-500);
}

.project-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: sepia(100%) hue-rotate(-10deg) contrast(115%);
}

.project-card__text-wrapper {
    text-align: center;
    flex-grow: 1;
    min-width: 100%;
    padding: 0 1.5rem 2rem;
    margin: 0 auto;
}

.project-card__title {
    font-family: var(--ff-sans-1);
    font-size: var(--fs-450);
    color: var(--clr-gold-400);
    margin: 0.5em auto;
}

.project-card__tag-wrapper {
    list-style: none;
    padding: 0;
    margin: auto 0;
    text-align: center;
}

.project-card__tag {
    display: block;
    font-family: var(--ff-sans-1);
    font-size: var(--fs-300);
    font-weight: 500;
    line-height: 1.25;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    color: var(--clr-neutral-300);
    margin: 0 auto;
    padding: 0.75em 0;
    width: auto;
}

.project-card__list-item a {
    text-decoration: none;
}

.project-card__tag-wrapper .project-card__tag:first-child {
    border-top: 1px solid var(--clr-blue-500);
} 

.project-card__list-item a:hover .project-card,
.project-card__list-item a:hover .project-card__image-wrapper {
    border-color: var(--clr-gold-400);
}

.project-card__list-item a:hover .project-card__image {
    filter: none;
}


/*** Projects Pagination ***/

.container__pagination {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto 4rem;
    gap: 1rem;
}

.pagination-nav {
    display: contents;
    min-height: 3rem;
}

.pagination-text {
    font-size: var(--fs-400);
    color: var(--clr-neutral-200);
    text-align: center;
    word-wrap: normal;
    white-space: nowrap;
    margin: 0 0.5em;
}

.pagination-text__page-current,
.pagination-text__page-total {
    font-weight: bold;
}

.pagination-icon {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--clr-black);
    stroke: var(--clr-black);
    stroke-width: 1rem;
    z-index: 1;
}

.pagination-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--clr-blue-400);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 0.5;
    transition: transform 0.3s ease;
}

.pagination-icon:hover::before,
.pagination-icon:hover svg {
    background-color: var(--clr-gold-400);
    fill: var(--clr-black);
    stroke: var(--clr-black);
}

.pagination-icon__disabled svg,
.pagination-icon__disabled svg:hover,
.pagination-icon__disabled::before,
.pagination-icon__disabled:hover::before,
.pagination-icon__disabled:hover svg {
    background-color: var(--clr-neutral-500);
    fill: var(--clr-black);
    stroke: var(--clr-black);
}


/****** Project (Article) Page ******/

.project-title,
.project-heading {
    text-align: center;
}

.project-title,
.project-heading {
    color: var(--clr-gold-400);
}

.project-title {
    margin: 3rem auto 0;
}

.project-subheading {
    text-align: left;
}

.project-hero-image__wrapper {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: auto;
    margin: 2.5rem auto 2rem;
    padding: 0;
    align-items: center;
}

.project-hero-image {
    border-radius: var(--border-rad);
    border: 3px solid var(--clr-gold-400);
    max-width: 100%;
    max-height: 50vh;
    margin: 0 auto;
}

.project-overview-caption p {
    font-family: var(--ff-serif-1);
    font-size: var(--fs-450);
    font-style: italic;
    line-height: 2;
    color: var(--clr-gold-400);
    text-align: center;
    margin: 1rem auto 2rem;
}


/*** Project Expenses Table Snippet ***/

.container__expenses-table {
    font-size: var(--fs-200);
    margin-bottom: 2rem;
}

.expenses-table {
    width: var(--width-0);
    margin: 0;
    border-collapse: collapse;
    color: var(--clr-white);
}

.expenses-table thead tr {
    background-color: var(--clr-black);
    font-family: var(--ff-sans-1);
    text-transform: uppercase;
    color: var(--clr-blue-400);
    border-bottom: 2px solid var(--clr-blue-500);
}

.expenses-table thead th {
    font-size: var(--fs-400);
    font-weight: bold;
    padding: 0.5em;
    text-align: center;
    border-top: 2px solid var(--clr-blue-500);
}

.expenses-table thead th:nth-child(3),
.expenses-table thead th:nth-child(4) {
    text-align: right;
    padding-right: 1rem;
}

.expenses-table thead th:first-child {
    text-align: left;
    padding-left: 1rem;
}

.expenses-table tbody tr {
    border-bottom: 2px solid var(--clr-blue-500);
}

.expenses-table tbody td {
    padding: 0.5em;
    font-family: var(--ff-serif-1);
    line-height: 2;
    color: var(--clr-neutral-200);
}

.expenses-table tbody td:first-child {
    text-align: left;
    padding-left: 1rem;
}

.expenses-table tbody td:nth-child(2) {
    text-align: center;
}

.expenses-table tbody td:nth-child(3),
.expenses-table tbody td:nth-child(4) {
    text-align: right;
    padding-right: 1rem;
}

.expenses-table tbody tr:last-child td {
    font-weight: bolder;
    color: var(--clr-gold-300);
}

.expenses-table tbody tr:last-child td:last-child {
    text-align: right;
    padding-right: 1rem;
}

.expense-total-cost__value {
    text-align: right;
    padding-right: 1rem;
}

.expense-table__caption {
    font-size: var(--fs-200);
    font-style: italic;
    color: var(--clr-neutral-400);
    margin: 0.5em auto;
    padding-left: 1rem;
}


/*** Video Embed Workaround ***/

.video-project-1 iframe {
    border: 2px solid transparent;
    border-radius: var(--border-rad);
    width: 941px !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 7/4;
}


/****** Contact ******/

.contact-social-icon:nth-child(1) svg {animation-delay: -4s;}
.contact-social-icon:nth-child(2) svg {animation-delay: -2s;}
.contact-social-icon:nth-child(3) svg {animation-delay:  0s;}
.contact-social-icon:nth-child(4) svg {animation-delay:  2s;}
.contact-social-icon:nth-child(5) svg {animation-delay:  4s;}
.contact-social-icon:nth-child(6) svg {animation-delay:  6s;}

@keyframes iconPulse {
    0%    {fill: var(--clr-blue-500)}
    12.5% {fill: var(--clr-blue-200)}
    25%   {fill: var(--clr-blue-500)}
    100%  {fill: var(--clr-blue-500)}
}

.contact-social-icon svg {
    animation: iconPulse 12s infinite;
    animation-play-state: running;
    filter: none;
}

.contact-social-icon svg:hover {
    filter: saturate(0%) brightness(400%) brightness(70%) sepia(100%) hue-rotate(-10deg) saturate(500%);
}

/*** Contact Form Snippet ***/

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: var(--fs-200);
    font-weight: bolder;
    color: var(--clr-blue-100);
    margin: 0 auto;
    padding: 2rem;
    width: var(--width-0);
    background-image: radial-gradient(farthest-corner at 80% 20%, 
        var(--clr-blue-600), 
        var(--clr-blue-700), 
        var(--clr-black));
}

.contact-form__success-message,
.contact-form__error-message {
    width: 100%;
    padding-bottom: 2rem;
}

.contact-form input,
.contact-form textarea {
    font-family: var(--ff-serif-2);
    font-size: var(--fs-200);
    color: var(--clr-white);
    background-color: var(--clr-black);
    width: 100%;
    padding: 0.5rem;
    border: 2px solid var(--clr-blue-500);
    border-radius: var(--border-rad-sm);
    margin: 1em 0 2em;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--clr-gold-300);
    border-color: transparent; 
}

.contact-form__button {
    align-self: flex-start;
    background-color: var(--clr-black);
    border-color: var(--clr-blue-100);
    color: var(--clr-blue-100);
    margin-top: 0;
    margin-bottom: 0;
}

.contact-form__error-message,
.contact-form__success-message {
    font-size: var(--fs-400);
    text-align: center;
    margin: 1rem auto 2rem;
    width: 100%;
}

.contact-form__error-message {
    color: var(--clr-red-400);
}

.contact-form__success-message {
    color: var(--clr-green-400);
}


/****** HTML Sitemap ******/

.sitemap-section {
    max-width: var(--width-0);
}


/****** Mobile Breakpoint ******/

@media (max-width: 768px) { 

    /*** Global ***/

    :root {
        --width-0: 100%;
        --width-1: 100%;
        --width-2: 100%;
    }

    .subcontainer__full-width,
    .subcontainer__main {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .header__logo,
    .header__nav-list li {
        text-align: center;
    }
    
    .btn-wrapper {
        width: 100%;
        text-align: center;
    }

    .btn {
        margin-left: auto;
        margin-right: auto;
    }

    h1 {
        margin-top: 0.5rem;
    }

    h2 {
        text-align: center;
    }

    /*** Experience Page (Mobile) ***/

    .experience-btn-container {
        flex-direction: column;
    }

    .container__experience h3 {
        text-align: center;
    }


    /*** Projects Category Page (Mobile) ***/

    .projects-overview {
        margin-bottom: 0;
    }

    .container__category-list {
        display: none;
    }

    .container__category-dropdown,
    .project-card__list {
        display: block;
    }

    /*** Project Gallery Snippet (Mobile) ***/

    .project-card__list-item {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 16rem;
    }

    .project-card {
        width: 100%;
        aspect-ratio: 1/2;
    }

    /*** Legal Page (Mobile) ***/

    .container__legal h2,
    .container__legal h3 {
        text-align: left;
    }
}