@font-face {
    font-family: 'Inter';
    src: url('./inter_variable.woff2') format('woff2');
    font-weight: normal bold;
    font-display: swap;
}

@font-face {
    font-family: "Plex";
    src: url('./ibm_plex_mono.ttf');
    font-weight: normal;
    font-display: swap;
}

:root {
    /* Base Colors */
    --realBlack: #000d1a;
    --realWhite: #f4f4f5;
    --black: var(--realBlack);
    --white: var(--realWhite);
    --bg: var(--white);

    /* Blues */
    --realBlue: #004e9b;
    --realBlueLight: #0065ca;
    --realBlueDark: #002447;
    --blue: var(--realBlue);
    --blueLight: var(--realBlueLight);
    --blueLight0: #5cadff;
    --blueLight2: #8ac4ff;
    --blueLight3: #b8dbff;
    --blueDark: var(--realBlueDark);
    --blueDark2: #0052a3;
    --blueDark3: #003b75;

    /* Accents (Orange) */
    --accent: #f26522;
    --accent2: #f37439;
    --accentDark: #d95a1e;
    --accentDark2: #c6460c;
    --accentDark3: #9a3709;

    /* Theme / Gradient Colors */
    --themeColor0: #ff962e;
    --themeColor: #ffb164;
    --themeColor2: #ffc482;
    --themeColor3: #ffdbb8;
    --color1a: var(--themeColor);
    --color1b: var(--themeColor2);

    /* Transparencies (Whites) */
    --almostWhite: rgba(255, 255, 255, 0.66);
    --almostWhite2: rgba(255, 255, 255, 0.6);
    --whiteTransparent: rgba(255, 255, 255, 0.5);
    --whiteTransparent2: rgba(255, 255, 255, 0.33);
    --realSoftWhite: rgba(255, 255, 255, 0.25);
    --softWhite: var(--realSoftWhite);
    --ghostWhite: rgba(255, 255, 255, 0.125);
    --softLight: rgba(255, 255, 255, 0.03125);

    /* Transparencies (Blue/Ghost) */
    --ghostBlueWhite0: rgba(208, 213, 255, 0.225);
    --ghostBlueWhite: rgba(208, 213, 255, 0.175);
    --ghostBlueWhite2: rgba(208, 213, 255, 0.125);
    --ghostBlueWhite3: rgba(208, 213, 255, 0.075);
    --ghostBlueWhite4: rgba(208, 213, 255, 0.05);
    --ghostBlueWhite5: rgba(208, 213, 255, 0.04);

    /* Shadows & Overlays */
    --softShadow0: rgba(1, 2, 24, 0.066);
    --softShadow: rgba(1, 2, 24, 0.05);
    --softShadow2: rgba(1, 2, 24, 0.033);
    --shadow: rgba(1, 2, 24, 0.125);
    --shadow2: rgba(1, 2, 24, 0.175);
    --silver: rgba(1, 2, 24, 0.33);
    --realSoftSilver: rgba(1, 2, 24, 0.25);
    --softSilver: var(--realSoftSilver);
    --softSilver2: rgba(1, 2, 24, 0.2);
    --realGray: rgba(1, 2, 24, 0.66);
    --gray: var(--realGray);
}

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

    scrollbar-color: var(--accentDark2) transparent;
    scrollbar-width: thin;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-size: inherit;
    word-spacing: 0.15rem;
    line-height: 1.25;
    accent-color: var(--accent);
    outline: 1px dashed transparent;
    color-scheme: light dark;
}

html, body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

body {
    display: flex;
    flex-flow: column;
    overflow-x: hidden;
    justify-content: flex-start;
    align-items: center;
    scroll-behavior: smooth;
    background-color: var(--bg);
}

ul, ol { list-style: none; }
address { font-style: normal; }
hr {
    border: 1px solid var(--shadow);
    margin: 1rem 0;
}

h1, h2, h3 {
    text-shadow: 0 0 0.25rem var(--whiteTransparent2), 0 0 0.5rem var(--whiteTransparent2);
    color: var(--blue);
}
h4 { color: var(--blueDark); }

::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
::-webkit-scrollbar-thumb { background: var(--accent); }
::-webkit-scrollbar-track { background: transparent; }

::selection {
    opacity: 1;
    background: var(--accentDark);
    color: var(--white);
}

::placeholder {
    color: var(--black);
    opacity: 0.5;
}

:active, :focus {
    outline: 1px dashed var(--softSilver2);
    -webkit-tap-highlight-color: transparent;
}

a:focus, button:focus, input:focus { outline-color: transparent; }

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--blueDark);
    outline-offset: 2px;
}

a *:not(.icon):focus, button *:not(.icon):focus,
a *:not(.icon):active, button *:not(.icon):active { outline: 1px dashed transparent; }

input, textarea, button {
    border: 1px solid var(--blue);
    border-radius: 1rem;
    padding: 0.5rem;
}
button, input[type="submit"] { cursor: pointer; }

.auto-x-padding { padding: 0 clamp(1rem, 1vw + 1rem, 3rem); font-style: normal; }
.auto-x-small-padding { padding: 0 clamp(0.5rem, 0.5vw + 0.5rem, 1.5rem); font-style: normal; }
.auto-x-tiny-padding { padding: 0 clamp(0.25rem, 0.25vw + 0.25rem, 0.75rem); font-style: normal; }

.auto-y-padding { padding: clamp(1rem, 1vw + 1rem, 3rem) 0; font-style: normal; }
.auto-y-small-padding { padding: clamp(0.5rem, 0.5vw + 0.5rem, 1.5rem) 0; font-style: normal; }
.auto-y-tiny-padding { padding: clamp(0.25rem, 0.25vw + 0.25rem, 0.75rem) 0; font-style: normal; }

.auto-padding { padding: clamp(1rem, 1vw + 1rem, 3rem); }
.auto-small-padding { padding: clamp(0.5rem, 0.5vw + 0.5rem, 1.5rem); }
.auto-tiny-padding { padding: clamp(0.25rem, 0.25vw + 0.25rem, 0.75rem); }

.auto-font-size { font-size: clamp(1.25rem, 1vw + 1.25rem, 2rem); }
.auto-font-size-2 { font-size: clamp(1.125rem, 1vw + 1.125rem, 1.5rem); }
.auto-font-size-3 { font-size: clamp(1rem, 1vw + 1rem, 1.25rem); }
.auto-font-size-4 { font-size: clamp(0.875rem, 1vw + 0.875rem, 1rem); }

.bg {
    animation: slide 3s ease-in-out infinite alternate;
    background: linear-gradient(-45deg, var(--themeColor) 49.9%, var(--themeColor2) 50.1%);
    bottom: 0; left: -50%; right: -50%; top: 0;
    opacity: 0.1;
    position: fixed;
    z-index: -1;
    will-change: transform;
    contain: content;
}
.bg-2 { animation-direction: alternate-reverse; animation-duration: 3.5s; }
.bg-3 { animation-duration: 7s; }

@keyframes slide {
    0% { transform: translateX(-25%); }
    100% { transform: translateX(25%); }
}

@media (prefers-reduced-motion: reduce) {
    .bg { animation-duration: 17.5s; }
    .bg-2 { animation-duration: 35s; }
    html { scroll-behavior: auto; }
}

a, code {
    color: var(--blue);
    user-select: none;
    text-decoration: none;
    display: inline-flex;
    background: var(--softShadow);
    border-radius: 1rem;
    padding: 0.5rem 0;
    justify-content: center;
}
code {
    font-family: "Plex";
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    color: var(--black);
    text-indent: 0;
    margin: 1px 0;
    display: inline-block;
}
a, input, textarea, button, input[type="submit"] {
    transition: all 0.25s;
}

a::before, a::after, button::before, button::after {
    align-self: center;
    content: '';
    border-left: 0.85rem solid var(--blue);
    border-top: 0.425rem solid transparent;
    border-bottom: 0.425rem solid transparent;
    border-right: 0;
    transition: all 0.25s;
}
a::before, button::before { margin-right: 1rem; }
a::after, button::after { border-left-color: transparent; }

.no-default, .no-default-arrow {
    background: none;
    padding: 0;
    display: inline-block;
}

.no-default-arrow::before, .no-default-arrow::after {
    display: none;
}

.no-arrow::before, .no-arrow::after {
    border: 0;
    margin: 0;
}

.no-arrow:hover::before, .no-arrow:hover::after,
.no-arrow:focus::before, .no-arrow:focus::after,
.no-arrow:active::before, .no-arrow:active::after {
    border: 0;
    margin: 0;
}

a:hover::before, a:active::before, a:focus::before,
button:hover::before, button:active::before, button:focus::before {
    border-left-color: transparent;
    margin-right: 0;
}
a:hover::after, a:active::after, a:focus::after,
button:hover::after, button:active::after, button:focus::after{
    border-left-color: var(--blue);
    margin-left: 1rem;
}

.arrow-reverse::before, .arrow-reverse::after {
    border-left: 0;
    border-right: 0.85rem solid var(--blue);
}
.arrow-reverse::before { margin-left: 1rem; }
.arrow-reverse::after { border-right-color: transparent; }

.arrow-reverse:hover::before, .arrow-reverse:active::before, .arrow-reverse:focus::before {
    border-right-color: transparent;
    margin-left: 0;
}

.arrow-reverse:hover::after, .arrow-reverse:active::after, .arrow-reverse:focus::after {
    border-right-color: var(--blue);
    margin-right: 1rem;
}


.cta-button,
.cta-blue-button,
button {
    font-size: 1.125rem;
    padding: 0.5rem 0;
    border-radius: 1.125rem;
    display: inline-flex;
    justify-content: center;
}

.cta-button::before,
.cta-blue-button::before,
button::before {
    margin-left: 1rem;
    border-left-color: var(--almostWhite);
}

.cta-button::after,
.cta-blue-button::after,
button::after { margin-right: 1rem; }

.cta-button {
    background: linear-gradient(to right, var(--accentDark2) 50%, var(--accentDark));
    color: var(--white);
    box-shadow: 0 0.125rem 0.25rem var(--shadow);
}

.cta-button:hover, .cta-button:focus, .cta-button:active {
    box-shadow: 0 0.25rem 0.5rem var(--shadow2), inset -2.75rem 0 0.25rem var(--accentDark);
    color: var(--white);
    background: linear-gradient(to right, var(--accentDark2), var(--accentDark2) 50%, var(--accentDark));
}

.cta-button:hover::after, .cta-button:focus::after, .cta-button:active::after,
.cta-blue-button:hover::after, .cta-blue-button:focus::after, .cta-blue-button:active::after,
button:hover::after, button:focus::after, button:active::after {
    border-left-color: var(--white);
}

.cta-blue-button, button { background: linear-gradient(to right, var(--blueDark3) 50%, var(--blue)); color: var(--white); }
.cta-blue-button:hover, .cta-blue-button:active, .cta-blue-button:focus,
button:hover, button:active, button:focus {
    box-shadow: 0 0.25rem 0.5rem var(--softSilver), inset -2.75rem 0 0.25rem var(--blue);
    background: linear-gradient(to right, var(--blueDark3) 50%, var(--blue));
}

@media screen and (max-width: 640px) {
    a.cta-button { border-radius: 1rem; font-size: 1rem; }
}

.card { width: 100%; background: var(--softWhite); border-radius: 1rem; contain: style; }
.card::before, .card::after { content: ''; width: 100%; display: block; height: 1rem; position: relative; border-radius: 1rem; z-index: 2; }
.card::before {
    background: linear-gradient(0deg, transparent, var(--ghostWhite)); box-shadow: 0 -0.25rem 0.25rem var(--softLight);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.card::after {
    background: linear-gradient(0deg, var(--softShadow2), transparent); box-shadow: 0 0.25rem 0.25rem var(--softShadow);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

header, footer, nav, .logo, .logo a, .slash {
    display: flex;
    justify-content: center;
    align-items: center;
}
header, nav, footer {
    width: 100%;
    height: 2.5rem;
    flex-shrink: 0;
}

header, nav {
    font-weight: bold;
    background-color: var(--softWhite);
    border-bottom: 1px solid var(--shadow);
}

header .logo, header .logo img {
    height: 100%;
}

header .logo a {
    height: 1.5rem;
}
nav { display: none; }
nav h2 {
    max-width: calc(100% - 2rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

footer {
    /*background-color: var(--softShadow2);
    border-top: 1px solid var(--shadow);*/
    font-size: 0.85rem;
    gap: 0.5rem;
}

footer, footer a {
    color: var(--gray);
}

footer a:hover, footer a:active, footer a:focus {
    color: var(--blue) !important;
}

.slash {  gap: 1rem; }

.slash, .slash a {
    color: var(--gray);
    line-height: 1;
}

.slash::before {
    content: '';
    height: 1.5rem;
    width: 0.125rem;
    background: var(--softSilver);
    transform: rotate(15deg)
}

main, .paragraphs {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}

.paragraphs p, .paragraphs p + div, .paragraphs div + div, .paragraphs div + p {
    margin-bottom: 1rem;
    line-height: 1.5;
}

.paragraphs h4, .paragraphs h5, .paragraphs h6 {
    display: block;
}

.lines {
    list-style: none;
}
.lines li ul {
    margin-top: 0.5rem;
    padding-left: 1rem !important;
}
.lines li {
    text-indent: 1rem;
    margin-bottom: 0.5rem;
}
.lines li:last-child {
    margin-bottom: 0;
}
.lines li:before {
    content: '';
    position: relative;
    display: inline-block;
    width: 1rem;
}
.lines li:before {
    height: 0.125rem;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
    background: var(--black);
    left: -1rem;
    overflow: hidden;
}
.lines li *:not(li) { text-indent: 0; }

.rounded-box {
    border: 1px solid var(--softShadow);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 1rem;
}

main {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

main .container {
    align-self: center;
    width: 60%;
    margin-bottom: 1rem;
}

#menu {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    background-color: var(--accentDark3);
    color: var(--white);
    outline: 2px solid var(--whiteTransparent);
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.5rem 1rem var(--shadow2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.125s;
    z-index: 99;
}
#menu::before, #menu::after {
    display: none;
}
#menu.show {
    opacity: 1;
    visibility: visible;
}
#menu:hover,
#menu:active,
#menu:focus {
    transform: translateY(-3px);
}
#menu:focus-visible { outline-color: var(--blueDark); }

@media screen and (max-width: 960px) {
    main .container {
        width: 80%;
    }
}
@media screen and (max-width: 640px) {
    main .container {
        width: 100%;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--black);
        --gray: var(--almostWhite);
        --black: var(--white);
        --blue: var(--blueLight3);
        --blueDark: var(--almostWhite);
        --whiteTransparent2: var(--ghostBlueWhite3);
        --softWhite: var(--ghostBlueWhite2);
        --ghostWhite: var(--ghostBlueWhite5);
        --softShadow2: var(--ghostBlueWhite3);
        --softSilver: var(--white);
        --shadow: var(--ghostBlueWhite2);
    }

    *, ::after, ::before { scrollbar-color: var(--realBlue) transparent; }
    ::-webkit-scrollbar-thumb { background: var(--realBlue); }
    ::-webkit-scrollbar-track { background: transparent; }

    :active, :focus { outline-color: var(--ghostBlueWhite); }
    a:focus-visible, button:focus-visible, input:focus-visible, #menu:focus-visible { outline-color: var(--white); }

    ::selection { background: var(--realBlue); color: var(--white); }
    ::placeholder { color: var(--white); opacity: 0.5; }

    body { background-color: var(--realBlack); }

    #menu {
        background-color: var(--blueDark3);
    }

    .bg {
        background: linear-gradient(-45deg, var(--realBlueDark) 49.9%, var(--realBlue) 50.1%);
        opacity: 0.03;
    }

    a, code { background: var(--softWhite); }

    .rounded-box { border-color: var(--softWhite); }

    .card::after { background: linear-gradient(0deg, var(--softShadow), transparent); }


    .cta-button { background: linear-gradient(to right, var(--accentDark3), var(--accentDark2)); }
    .cta-button:hover, .cta-button:focus, .cta-button:active { background: linear-gradient(to right, var(--accentDark3), var(--accentDark2) 50%, var(--accentDark)); }

    .cta-blue-button, button { background: linear-gradient(to right, var(--blueDark3), var(--blueDark2)) !important; }
    .cta-blue-button:hover, .cta-blue-button:active, .cta-blue-button:focus,
    button:hover, button:active, button:focus {
        background: linear-gradient(to right, var(--blueDark3), var(--blueDark2) 50%, var(--realBlueLight));
        box-shadow: 0 0.25rem 0.5rem var(--realSoftSilver), inset -2.75rem 0 0.25rem var(--realBlueLight);
    }

    header .logo img {
        filter: brightness(0) invert();
    }
}