@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.woff2") format("woff2"),
       url("fonts/Inter-Regular.woff") format("woff");
}
@font-face {
    font-family: "Inter";
    src: url("fonts/Inter18pt-Bold.woff") format("woff"),
       url("fonts/Inter18pt-Bold.woff2") format("woff2");
    font-weight: 900;
}
@font-face {
    font-family: "Space Grotesk";
    src: url("fonts/SpaceGrotesk-Bold.woff") format("woff2"),
         url("fonts/SpaceGrotesk-Bold.woff2") format("woff");
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"),
         url("fonts/JetBrainsMono-Regular.woff") format("woff");
}

:root {
    --bg: #F5F3EF;
    --panel: #FFFFFF;
    --panel-hover: #FBFAF8;
    --alt-bg: #dddad5;
    --text: #1E2328;
    --text-dim: #6B7378;
    --accent: #2F8F80;
    --accent-2: #2F8F80;
    --accent-3: #2E5C8A;
    --accent-4: #A8641F;
    --accent-dim: #2F8F80;
    --mobile-bg: #2F8f80;
    --mobile-hover: rgba(0, 0, 0, .30);
    --text-hover: #7FD4C8;
    --bg-hover: #2E5C8A;
    --tag-cms: #A8641F;
    --tag-mvc: #2E5C8A;
    --border: #E3DFD8;
    --error: #fc657e;
    --shadow: 0 1px 2px rgba(30,35,40,0.04), 0 8px 20px rgba(30,35,40,0.05);
    --logo-filter: grayscale(1) opacity(0.4);
    --logo-filter-hover: grayscale(0) opacity(1);
    --heading-font: "Space Grotesk", "Inter", sans-serif;
    --sans-serif-font: "Inter", system-ui, -apple-system, sans-serif;
    --monospaced-font: "JetBrains Mono", monospace;
    --white: #FFFFFF;
    --profile-bg: rgba(127, 212, 200, .80);
    --backdrop: rgba(127, 212, 200, .80);
    --illustration-bg: #6bada8;
    --shape-opacity: 0.28;

  @media (prefers-color-scheme: dark) {
    --bg: #141A21;
    --panel: #1D262F;
    --panel-hover: #232E38;
    --alt-bg: #242e39;
    --text: #E7EAEC;
    --text-dim: #94A3AD;
    --accent: #5FBDB0;
    --accent-2: #5FBDB0;
    --accent-3: #6FA8DC;
    --accent-4: #D9A05B;
    --accent-dim: #3E7A72;
    --accent-filter: brightness(0) invert(1);
    --mobile-bg: #000000;
    --mobile-hover: rgba(255,255,255, .10);
    --tag-cms: #D9A05B;
    --tag-mvc: #6FA8DC;
    --border: #2A343E;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(30,35,40,0.05);
    --shape-opacity: 0.5;
    --logo-filter: grayscale(1) invert(1) opacity(0.4);
    --logo-filter-hover: grayscale(0) invert(1) opacity(1);
    --backdrop: rgba(0, 0, 0, .80);
  }
}

/* -- Body Styles -- */
#mk-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background: var(--bg);
    margin: 0;
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    transition: background 0.3s ease, color 0.3s ease;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    position: relative;
}

#mk-page[data-theme="light"] {
    --bg: #F5F3EF;
    --panel: #FFFFFF;
    --panel-hover: #FBFAF8;
    --alt-bg: #dddad5;
    --text: #1E2328;
    --text-dim: #6B7378;
    --accent: #2F8F80;
    --accent-2: #2F8F80;
    --accent-3: #2E5C8A;
    --accent-4: #A8641F;
    --accent-dim: #2F8F80;
    --mobile-bg: #2F8f80;
    --mobile-hover: rgba(0, 0, 0, .30);
    --tag-cms: #A8641F;
    --tag-mvc: #2E5C8A;
    --border: #E3DFD8;
    --shadow: 0 1px 2px rgba(30,35,40,0.04), 0 8px 20px rgba(30,35,40,0.05);
    --shape-opacity: 0.28;
    --logo-filter: grayscale(1) opacity(0.4);
    --logo-filter-hover: grayscale(0) opacity(1);
    --backdrop: rgba(127, 212, 200, .80);
}

#mk-page[data-theme="dark"] {
    --bg: #141A21;
    --panel: #1D262F;
    --panel-hover: #232E38;
    --alt-bg: #000000;
    --text: #E7EAEC;
    --text-dim: #94A3AD;
    --accent: #5FBDB0;
    --accent-2: #5FBDB0;
    --accent-3: #6FA8DC;
    --accent-4: #D9A05B;
    --accent-dim: #3E7A72;
    --accent-filter: brightness(0) invert(1);
    --mobile-bg: #000000;
    --mobile-hover: rgba(255,255,255, .10);
    --tag-cms: #D9A05B;
    --tag-mvc: #6FA8DC;
    --border: #43576b;
    --shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
    --shape-opacity: 0.5;
    --logo-filter: grayscale(1) invert(1) opacity(0.4);
    --logo-filter-hover: grayscale(0) invert(1) opacity(1);
    --backdrop: rgba(0, 0, 0, .80);

    background: var(--bg);
    color: var(--text);
}

/* -- Global Styles -- */
.mk-display-none { display: none; }

.mk-link, a {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
    &:hover { color: var(--text-hover); }
}

h1, h2 {
    font-family: var(--heading-font);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

h3 {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.mk-eyebrow {
    font-family: var(--monospaced-font);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin: 0 0 12px;
    text-transform: uppercase;
    &::before { content: "// "; color: var(--text-dim); }
}

address, dl, fieldset, figure, ol, p, pre, ul {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-dim);
    margin: 0;
}
.mk-disclaimer::before,
.mk-disclaimer::after {
    content: "*";
    color: var(--error);
    font-weight: 900 !important;
    font-family: var(--sans-serif-font) !important;
    font-size: 18px;
}
.mk-disclaimer {
    &.front { &::after { display: none; } }
    &.back { &::before { display: none; } }
}

.mk-button,
.mk-button-primary {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    outline: none;
    text-transform: uppercase;
    font-family: var(--monospaced-font);
    font-size: 12px;
    cursor: pointer;
    border-image: none;
    border-radius: 999px;
    padding: 6px 14px;
    margin-top: 8px;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--border);
    transition: background 0.2s, color 0.2s;
    &.mk-large { 
        font-size: 14px; 
        padding: 16px 24px; 
        border-radius: 12px;
        @media screen and (max-width: 768px) { padding: 8px 16px; border-radius: 8px; }
    }
    &:hover {
        border-color: var(--accent-dim);
        transform: translateY(-4px);
        background: var(--panel-hover);
        box-shadow: var(--shadow), 0 12px 28px rgba(0,0,0,0.06);
    }
    &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }   
}
.mk-button {
    color: var(--text-dim);
    background: var(--panel);
    &:hover { color: var(--text); }
}
.mk-button-primary {
    color: var(--white);
    background: var(--accent-dim);
    border-width: medium;
    border-style: none;
    border-color: var(--accent-dim);
    &:hover { color: var(--white); background: var(--bg-hover); }
}
.mk-icon-button,
.mk-modal__close {
    padding: 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    cursor: pointer;
    text-decoration: none;
    outline: none;
    display: inline-block;
    height: auto;
    width: auto;
    margin-top: 8px;
    margin-bottom: 8px;
    &:not(:last-child) { margin-right: 4px; }
    & > div { width: 24px; height: 24px; }
    img {
        width: 100%;
        height: 100%;
        fill: var(--text-dim);
        transition: fill 0.2s ease;
        filter: var(--logo-filter);
    }
    &:hover {
        border-color: var(--accent-dim);
        transform: translateY(-4px);
        background: var(--panel-hover);
        box-shadow: var(--shadow), 0 12px 28px rgba(0,0,0,0.06);
        img { filter: var(--logo-filter-hover); }
    }
    &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }   
}
/*============= Tags ===============*/
.mk-tag {
    font-family: var(--monospaced-font);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.03em;
    color: var(--white);
    fill: var(--white);
    background-color: var(--tag-mvc);
    &.cms, &.quote { color: var(--tag-cms); background: rgba(217, 160, 91, 0.12); }
    &.mvc, &.sub { color: var(--tag-mvc); background: rgba(111, 168, 220, 0.12); }
}
/*=============== Containers ==============*/
main { display: block; }
section { 
    position: relative; 
    padding: 96px 24px 112px;
    & * { box-sizing: border-box; }
    @media screen and (max-width: 768px) { padding: 56px 24px 52px; }
}
.mk-container {
    display: flow root;
    box-sizing: content-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    @media screen and (min-width: 640px) { padding-left: 30px; padding-right: 30px; }
    @media screen and (min-width: 960px) { padding-left: 40px; padding-right: 40px; }
}
.mk-inner { max-width: 1080px; margin: 0 auto; }
.mk-alt-section { background-color: var(--alt-bg); }
.mk-row-container { 
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .mk-row-img { width: 40%; display: inline; img { width: 100%; } }
    .mk-row-text {
        display: inline-flex;
        flex-direction: column;
        padding: 20px;
        width: 50%;
    }
    @media screen and (max-width: 768px) {
        flex-direction: column;
        text-align: center;
        .mk-row-img { width: 100%; max-width: 280px; }
        .mk-row-text { width: 100%; }
    }
}
.mk-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 48px;
}
.mk-width-1-2 {
    box-sizing: border-box;
    width: 50%;
    max-width: 100%;
}
/*============== Utilities ==============*/
.mk-text-center { text-align: center; }
.mk-text-left { text-align: left; }
.mk-background-primary { background-color: var(--background-color) !important; }
.mk-background-contain { background-size: contain; }
.mk-background-norepeat { background-repeat: no-repeat; }
.mk-flex { display: flex; }
.mk-flex-column { flex-direction: column; }
.mk-flex-row { flex-direction: row; }
.mk-flex-center { justify-content: center; }
.mk-flex-middle { align-items: center; }
.mk-position-relative { position: relative;}

/*=============== Navbar Styles ==============*/
.mk-navbar {
    display: flex;
    position: relative;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    z-index: 4;
    &.scroll-bg { background-color: var(--bg); box-shadow: var(--shadow); }
}
.mk-navbar-left,
.mk-navbar-center,
.mk-navbar-right {
    display: flex;
    gap: 30px;
    align-items: stretch;
    height: 60px;
    @media screen and (max-width: 960px) { gap: 15px; }
}
.mk-navbar-left,
.mk-navbar-right { width: 140px; }
.mk-navbar-right { text-align: right; }
.mk-navbar-left,
.mk-navbar-center:only-child,
.mk-navbar-right { flex-wrap: wrap; }
.mk-navbar-nav {
    display: flex;
    gap: 15px;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    @media screen and (min-width: 960px) { gap: 30px; }
}
.mk-navbar-item, 
.mk-navbar-nav > li > a, 
.mk-navbar-toggle {
    font-family: var(--sans-serif-font);
    text-transform: uppercase;
    font-size: 14px;
    color: var(--text-dim);
    transition: color 0.2s ease, color 0.2s ease;
    height: 100%;
    padding: 20px 8px;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    &:hover { color: var(--text-hover) !important; background-color: var(--border); }
}
.mk-navbar-nav > li { display: flex; }
.mk-navbar-center .mk-navbar-nav {
    height: 60px;
    /*============ Mobile menu ================*/
    @media screen and (max-width: 768px) { 
        display: none; 
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 2;
        width: 100%;
        background-color: var(--mobile-bg);
        & > li {
            & > a {
                color: var(--white);
                padding: 0 24px;
                letter-spacing: 0;
                line-height: 40px;
                margin-top: 0;
                opacity: 1;
                transform: scaleY(1);
                transition: 0.5s, opacity 0.1s;
                &:hover { background-color: var(--mobile-hover); }
            }
        }
        & > li, & > li & a { height: 40px; }
        &.mk-menu-open { display: inline-flex; }
    }
    @media screen and (max-width: 500px) { 
        &.mk-menu-open  { height: 110px; flex-wrap: wrap; } 
    }
}
/*============ Logo =============*/
.mk-navbar-brand {
    width: 70px;
    img { 
        box-sizing: border-box; 
        padding: 8px; 
        height: 100%; 
        width: auto; 
    }
    &:hover { img { background-color: var(--border); } }
}
/*============= Light/Dark Mode toggle ==================*/
.mk-mode { 
    padding-top: 20px; 
    @media screen and (max-width: 480px) { font-size: 12px; }
}
#theme-toggle { margin: 16px 8px; }
/*============= Hamburger Menu button ===================*/
#hamburger {
    overflow: hidden;
    width: 60px;
    outline: none;
    background-color: transparent;
    border: none;
    &:before { transform: translateY(-50%) rotate(45deg) scale(0); }
    &:after { transform: translateY(50%) rotate(-45deg) scale(0); }
    &:hover { background-color: var(--border); }
    .hamburger {
        width: 100%;
        height: 100%;
        transition: translate 1s, rotate 1s;
        cursor: pointer;
        .line { transition: 1s; stroke-dasharray: 60 31 60 300; }
    }
    &[aria-expanded="true"] {
        .hamburger {
            translate: 4px -4px;
            rotate: 0.125turn;
            .line { stroke-dasharray: 60 105 60 300; stroke-dashoffset: -90; }
        }
    }
    @media screen and (min-width: 769px) { display: none; }
}

/*=============== Hero Section Styles ==============*/
#home {
    position: relative;
    background: var(--bg);
    color: var(--text);
    padding: 140px 24px 120px;
    overflow: hidden;
    font-family: var(--sans-serif-font);
    transition: background 0.3s ease, color 0.3s ease;
    & * { box-sizing: border-box; }
    .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: var(--shape-opacity);
        transition: opacity 0.3s ease;
        svg { width: 100%; height: 100%; }
    }
    .hero-inner {
        position: relative;
        z-index: 3;
        max-width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    h1 {
        font-family: var(--sans-serif-font);
        font-weight: 900;
        font-size: clamp(38px, 6vw, 64px);
        line-height: 1.08;
        letter-spacing: -0.01em;
        margin: 0 0 24px;
        .accent { color: var(--accent); }
    }
    p.sub {
      font-size: 18px;
      line-height: 1.6;
      color: var(--text-dim);
      max-width: 560px;
      margin: 0 auto 36px;
      @media screen and (max-width: 768px ) { margin: 0 auto 18px; }
    }
    @media screen and (max-width: 768px) { padding: 100px 0 50px; }
}
/*================ About Styles ==================*/
.mk-profile-img-contain {
    position: relative;
    img { 
        border-radius: 999px; 
        background-color: var(--profile-bg); 
        border: 4px solid var(--accent);
        width: 100%;
    }
}
#home-location {
    position: absolute;
    bottom: 8px;
    right: 50%;
    z-index: 2;
    transform: translateX(50%);
    white-space: nowrap;
    svg {
        height: 18px;
        margin-top: -4px;
        width: auto;
        fill: currentColor;
    }
}
/*=============== Tech Marquee Styles ==================*/
#tech-marquee {
    position: relative;
    background: var(--bg);
    color: var(--text);
    padding: 56px 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow: hidden;
    transition: background 0.3s ease, color 0.3s ease;
    & * { box-sizing: border-box; }
    .marquee-label {
        font-family: 'JetBrains Mono', 'Courier New', monospace;
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-dim);
        text-align: center;
        margin: 0 0 28px;
        &::before { content: "// "; color: var(--accent); }
    }
    .marquee-mask {
        position: relative;
        width: 100%;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
    .marquee-track {
        display: flex;
        align-items: center;
        width: max-content;
        gap: 72px;
        animation: tech-scroll 22s linear infinite;
        &:hover { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) { 
            animation: none;
            flex-wrap: wrap;
            justify-content: center;
        }
    }
    .logo-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        flex-shrink: 0;
        img {
            height: 100%;
            width: auto;
            filter: var(--logo-filter);
            transition: filter 0.25s ease;
        }
        &:hover { img { filter: var(--logo-filter-hover); } }
    }
}
@keyframes tech-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
/*========== Theme Toggle ============*/
.theme-toggle {
    position: absolute;
    top: 0;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--monospaced-font);
    font-size: 12px;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    margin-top: 24px;
    &:hover { color: var(--text); }
    &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
/*============= Filter Buttons ================*/
.filters {
    display: flex;
    gap: 8px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
}
.filter-btn {
    font-family: var(--monospaced-font);
    font-size: 13px;
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 8px 16px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    &:hover { color: var(--text); }
    &.active { background: var(--accent-dim); color: #fff; }
    &focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;}
    @media screen and (max-width: 480px) { font-size: 12px; padding: 8px 10px; }
}
/*============== Grid/Card ===============*/
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 16px;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    img { width: 200px; margin-right: auto; margin-left: auto; }
    &:hover,
    &:focus-visible {
        transform: translateY(-4px);
        border-color: var(--accent-dim);
        background: var(--panel-hover);
        box-shadow: var(--shadow), 0 12px 28px rgba(0,0,0,0.06);
    }
    &:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    &.hidden { display: none; }
}
.stack-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.stack-pill {
    font-size: 12px;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
}
.card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    &.about { margin: 24px 0; }
    @media screen and (max-width: 768px) { &.about { margin: 12px 0; justify-content: center; } }
}
.card:hover .card-footer,
.card:focus-visible .card-footer { color: #7FD4C8; }
.card-footer svg {
    transition: transform 0.2s ease;
}
.card:hover .card-footer svg { transform: translate(2px, -2px); }
.placeholder-card {
    border-style: dashed;
    opacity: 0.55;
    cursor: default;
    &:hover { transform: none; background: var(--panel); border-color: var(--border); }
}
@media (prefers-reduced-motion: reduce) { .card, .card-footer svg { transition: none; } }
@media (max-width: 720px) {
    .grid { grid-template-columns: 1fr; }
    .work-header { flex-direction: column; align-items: flex-start; }
}

/*=============== Modal Styles ================*/ 
.mk-modal {
	display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    bottom: 0;
    right: 0;
    background-color: var(--backdrop);
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    transition: .64s ease-in-out;
	backdrop-filter: blur(5px);
    border-radius: 0;
    &.show-modal{ opacity: 1; visibility: visible; }
    .mk-modal-inner {
        background: var(--panel);
        border-radius: 16px;
        bottom: 0;
        right: 0;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        max-width: 800px;
        max-height: 600px;
        width: 60%;
        height: 80%;
        box-shadow: var(--shadow);
        transition: .64s ease-in-out;
    }
    .mk-modal__photo {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 40%;
        height: 100%;
        overflow: hidden;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
        img { width: auto; height: 100%; }
    }
  .mk-modal__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
    height: 100%;
    padding: 32px;
    h1 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 2rem;
      text-transform: uppercase;
      color: #0A0A0A;
    }
    p {
      font-size: .875rem;
      color: #686868;
      line-height: 1.5;
    }
  }
    &:target { 
        visibility: visible; 
        opacity: 1;
        .popup-inner {
            bottom: 0;
            right: 0;
            transform: rotate(0);
        }
    }
	.mk-modal__close {
        position: absolute;
        right: -1rem;
        top: -1rem;
        z-index: 4;
        cursor: pointer;
        text-decoration: none;
    }
    @media screen and (max-width: 768px) {
        .mk-modal-inner {
            flex-direction: column;
            width: 80%;
        }
        .mk-modal__photo { 
            width: 100%; 
            height: 160px; 
            border-bottom-left-radius: 0;
            border-top-right-radius: 16px;
            img { 
                width: auto;
                height: auto;
                max-width: 848px;
                object-fit: none;
                max-height: 1264px;
                object-position: 50% 540px;
            }
        }
        .mk-modal__text {
            width: 90%;
            height: auto;
            padding: 12px;
        }
    }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* -- Form Styles -- */
form {
    display: flex;
    flex-direction: column;
    .mk-error { margin-bottom: 12px; color: var(--tag-cms) !important; }
    .mk-field {
        display: flex;
        flex-direction: column;
        font-family: var(--monospaced-font);
        font-size: 12px;
        margin-bottom: 12px;
    }
    label { margin-bottom: 4px; }
    label[aria-required="true"]::after { content: "☀"; color: var(--error); margin-left: 4px; }
    input[type="text"],
    input[type="tel"],
    input[type="number"],
    input[type="email"],
    input[type="date"] {
        display: inline-block;
        font-family: var(--sans-serif-font);
        font-size: 12px;
        border-radius: 999px;
        padding: 6px 14px;
        color: var(--text-dim);
        background: var(--panel);
        border: 1px solid var(--border);
    }
    textarea {
        display: inline-block;
        font-family: var(--sans-serif-font);
        font-size: 12px;
        border-radius: 20px;
        padding: 6px 14px;
        color: var(--text-dim);
        background: var(--panel);
        border: 1px solid var(--border);
        min-height: 60px;
    }
}
/*=========== Accessible Recaptcha for Screen Readers =======*/
.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/*========= Cool Background section =============*/
.mk-cool-bg {
    color: #E7EAEC;
    background-image: linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ), url("img/casual-dev-at-night.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    h1, p { color: #E7EAEC; text-shadow: 2px 4px 10px #0a0a0a; }
}
/*========= Footer Styles ==========*/
#mk-footer {
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    right: 50%;
    transform: translateX(50%);
}