html {
    background: #e8eef5;
}

body {
    font-family: 'Manrope', sans-serif;
    background: #e8eef5 !important;
}
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Glass card utility used on the homepage and recruitment pages */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.job-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    flex: 0 0 auto;
    min-height: 1.75rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: #eef4ff;
    color: #0f3f95;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.job-chip--level {
    background: #f1f5f9;
    color: #334155;
}

.job-chip--remote {
    background: #ecfdf5;
    color: #047857;
    border-color: rgba(5, 150, 105, 0.22);
}

.job-chip--category {
    background: #fff7ed;
    color: #9a3412;
    border-color: rgba(234, 88, 12, 0.22);
}

.auth-shell {
    width: min(100%, var(--pn-box-max));
    min-height: 100vh;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    border-left: 1px solid rgba(148, 163, 184, 0.28);
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.auth-card-shell {
    width: min(calc(100% - 2rem), 32rem);
    margin: 3rem auto;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 0.75rem;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

:root {
    --pn-box-max: 1280px;
    --pn-sidebar-width: 16rem;
    --pn-box-offset: max(0px, calc((100vw - var(--pn-box-max)) / 2));
}

body > nav,
body > header,
body > section,
body > footer,
body > main:not(.ml-64) {
    max-width: var(--pn-box-max);
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid rgba(148, 163, 184, 0.28);
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

body > nav {
    left: 0;
    right: 0;
}

body > aside.fixed {
    left: var(--pn-box-offset);
}

main.ml-64 {
    width: calc(min(100vw, var(--pn-box-max)) - var(--pn-sidebar-width));
    margin-left: calc(var(--pn-box-offset) + var(--pn-sidebar-width));
    margin-right: auto;
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    overflow-x: clip;
}

@media (max-width: 900px) {
    body > nav,
    body > header,
    body > section,
    body > footer,
    body > main:not(.ml-64) {
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    body > aside.fixed {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        max-width: var(--pn-box-max);
        height: auto;
        margin-left: auto;
        margin-right: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    }

    body > aside.fixed nav {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        gap: 0.25rem;
    }

    body > aside.fixed nav + div {
        margin-top: 1rem;
    }

    main.ml-64 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }
}