/* Derived from new.css */
:root {
     color-scheme: dark light;

	--nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
    --nc-tx-1: #ffffff;
    --nc-tx-2: #eeeeee;
    --nc-bg-1: #000000;
    --nc-bg-2: #111111;
    --nc-bg-3: #222222;
    --nc-bg-4: #333333;
    --nc-lk-1: #3291FF;
    --nc-lk-2: #0070F3;
    --nc-lk-tx: #FFFFFF;
    --nc-ac-1: #7928CA;
    --nc-ac-tx: #FFFFFF;

    --yellow: #b58900;
    --orange: #cb4b16;
    --red: #dc322f;
    --magenta: #d33682;
    --violet: #6c71c4;
    --blue: #268bd2;
    --cyan: #2aa198;
    --green: #859900;

    --red-1: #ff584d;
    --red-2: #ff291a;
    --red-3: #ff291a;
    --red-4: #cc0e00;
    --red-5: #990a00;

    --green-1: #4dff4d;
    --green-2: #4dff4d;
    --green-3: #084408;
    --green-4: #264408;
    --green-5: #031703;

    --blue-1: #92d3ed;
    --blue-2: #51b8e1;
    --blue-3: #2196c4;
    --blue-4: #166483;
    --blue-5: #3D4FA5;
    --blue-6: #1B314D;

    --purple-1: #AF9AB9;
    --purple-2: #855C99;
    --purple-3: #5E2977;
    --purple-4: #400C59;
    --purple-5: #260137;

    --primary-color: var(--nc-ac-1);
    --secondary-color: var(--nc-lk-2);
    --like-color: gold;
    --boost-color: green;
    --reply-color: skyblue;
    --bookmark-color: steelblue;
    --recipe-color: var(--red-5);

    --border-radius: 4px;
    --fab-right: 2.5rem;
    --fab-bottom: 2.5rem;
    --fab-bg: var(--primary-color, #0069d9);
    --fab-color: white;
    --fab-highlight: var(--nc-bg-1);
    --highlight-color: var(--primary-color);
    --progress-highlight-color: var(--highlight-color, var(--secondary-color));

    scroll-behavior: smooth;
}

@media (prefers-color-scheme: light) {
	:root {
        --nc-tx-1: #000000;
        --nc-tx-2: #1A1A1A;
        --nc-bg-1: #FFFFFF;
        --nc-bg-2: #F6F8FA;
        --nc-bg-3: #E5E7EB;
        --nc-lk-1: #0070F3;
        --nc-lk-2: #0366D6;
        --nc-lk-tx: #FFFFFF;
        --nc-ac-1: #79FFE1;
        --nc-ac-tx: #0C4047;
	}
}

@media (prefers-reduced-motion: reduce) {
    :root {
        scroll-behavior: auto;
    }

    *, ::after, ::before {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0ms !important;
        transition-delay: 0ms !important;
    }
}

::selection {
    background-color: var(--nc-ac-1);
    color: var(--nc-ac-tx);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
}

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

* {
	/* Reset margins and padding */
	margin: 0;
	padding: 0;
    box-sizing: border-box;
}

html {
    font-family: var(--nc-font-sans);
    height: 100vh;
    font-size: clamp(100%, 0.666vw, 150%);
    line-height: 1.2;
}

body {
	padding: 1rem;
	border-radius: var(--border-radius);
	overflow-x: hidden;
	word-break: break-word;
	overflow-wrap: break-word;
	background: var(--nc-bg-1);

	/* Main body text */
	color: var(--nc-tx-2);
    line-height: 1.5;

    display: flex;
    flex-flow: column;
    height: 100%;

	/* Center body in page */
	margin: 0 auto;
	max-width: 1500px;
    flex: 1 0 auto;
}

.main-header {
    h1, h2, h3 {
        font-size: 1.3rem;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    & > *:first-child {
        margin-top: 0;
        padding-top: 0;
    }

    & > *:last-child {
        margin-bottom: 0;
    }
}

figure > *, picture > *, img, video {
    max-width: 100%;
    height: auto;
}

figure {
    padding: 1rem 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1;
    color: var(--nc-tx-1);
    font-weight: 300;
    margin: 1rem 0 1.5rem;
}

h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.4rem;
    letter-spacing: -.08rem;
}

h4 {
    font-size: 1.2rem;
    letter-spacing: -.05rem;
}

h5 {
    font-size: 1rem;
    letter-spacing: 0;
}

h6 {
    font-size: 0.875rem;
    letter-spacing: 0;
}

a {
    color: var(--nc-lk-1);
    stroke: currentColor;
}

a:focus {
    color: #C0E2F7;
}

a:hover {
    color: var(--nc-lk-2);
    text-decoration: underline currentColor;
}

blockquote {
    font-style: italic;
    border-left: 0.3rem solid currentColor;
    color: #bbc1ec;
    margin-left: 0;
    margin-right: 0;
    padding: 1rem 1.5rem;
}

blockquote *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

abbr, abbr:hover {
    /** Set the '?' cursor while hovering on abbreviation */
    cursor: help;
}

/** code styles */
code, pre, kbd, samp, blockquote {
    font-family: var(--nc-font-mono)
}

code, pre, kbd, samp {
    font-size: 0.9rem;
    /* The main preformatted style. This is changed slightly across different cases */
    background: var(--nc-bg-2);
    border: 1px solid var(--nc-bg-3);
    border-radius: var(--border-radius);
    padding: 3px 6px;
}

kbd {
    /* Makes the kbd element look like a keyboard key */
    border-bottom: 3px solid var(--nc-bg-3);
}

code {
    background: #373737;
    color: #f4f5f6;
    border-radius: .4rem;
    font-size: 86%;
    margin: 0.2rem;
    padding: .2rem .5rem;
    white-space: nowrap;
}

pre {
    background: #373737;
    border-left: 0.3rem solid #0069d9;
    overflow: auto;
    padding: 1rem 1.4rem;
    max-width: 100%;
}

pre code {
    /* When <code> is in a <pre>, reset its formatting to blend in */
    background: inherit;
    font-size: inherit;
    color: inherit;
    border: 0;
    padding: 0;
    margin: 0;
}

code pre {
    /* When <pre> is in a <code>, reset its formatting to blend in */
    display: inline;
    background: inherit;
    font-size: inherit;
    color: inherit;
    border: 0;
    padding: 0;
    margin: 0;
}

pre a > code {
    border-radius: 0;
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
}

hr {
	/* Reset the border of the <hr> separator, then set a better line */
	border: 0;
	border-bottom: 1px solid var(--nc-bg-3);
	margin: 1rem auto;
}

details {
    /* Make the <details> look more 'clickable' */
    padding: .6rem 1rem;
    border: 1px solid var(--nc-bg-3);
    border-radius: 4px;
}

summary {
    /* Makes the <summary> look more like a 'clickable' link with the pointer cursor */
    cursor: pointer;
    font-weight: bold;
}

details[open] {
    /* Adjust the <details> padding while open */
    padding-bottom: 0.75rem;
}

details[open] summary {
    /* Adjust the <details> padding while open */
    margin-bottom: 6px;
}

details[open] > *:last-child {
    /* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */
    margin-bottom: 0;
}

/* list styles */
dl, ol, ul {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
}

dl dl, dl ol, dl ul, ol dl, ol ol, ol ul, ul dl, ul ol, ul ul {
    font-size: 90%;
    margin: 1.5rem 0 1.5rem 2.0rem;
}

ol, ul {
    padding-left: 2rem;
}

ol {
    list-style: decimal inside;
}

ul {
    list-style: circle inside;
}

li {
    margin-top: 0.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
    margin-bottom: 0;
}

dt {
    font-weight: bold;
}

dd::before {
    /* Add an arrow to data table definitions */
	content: '→ ';
}

mark {
    padding: 3px 6px;
    background: var(--nc-ac-1);
    color: var(--nc-ac-tx);
}

/** Main styles */
#top {
    position: absolute;
    top: 0;
    left: 0;
}

.card {
    background: var(--nc-bg-3);
    border-radius: var(--border-radius, 0.3rem);
    padding: 1rem;
    border: 1px solid var(--highlight-color, var(--primary-color));
    box-shadow: 2px 2px 10px var(--nc-bg-4);
}

.main-header {
    background: var(--nc-bg-2);
    border-bottom: 1px solid var(--nc-bg-3);
    padding: 2rem calc(50vw - 50%);

	/* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */
    margin: -1rem calc(0px - (50vw - 50%)) 2rem;
}

.skip-link {
    position: absolute;
    top: 2rem;
    /* pseudo-center the link by subtracting 2rem for padding and an estimation of 4rem for content */
    left: calc(50% - 6rem);
    padding: 1rem;
    z-index: 99;
    border: 1px solid var(--highlight-color);
    transform: translateY(-7rem);
    transition: transform 300ms ease-in;
}

.skip-link:focus {
    transform: none;
}

.fab {
    display: flex;
    position: fixed;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-decoration: none;
    bottom: var(--fab-bottom);
    right: var(--fab-right);
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.22),
                0 9px 38px 0 rgba(0, 0, 0, 0.30);
    justify-content: center;
    align-items: center;
    background: var(--fab-bg);
    color: white;
    font-size: 2rem;
    border: none;
}

.fab:hover {
    background: #606c76;
    color: white;
    cursor: pointer;
}