/* Loading my own fonts */

/* nunito-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/nunito-v26-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/nunito-v26-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* 1. Modern CSS Reset by Andy Bell */
*,
*::before,
*::after {
    box-sizing: border-box
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0
}

ul[role="list"],
ol[role="list"] {
    list-style: none
}

html:focus-within {
    scroll-behavior: smooth
}

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5
}

a:not([class]) {
    text-decoration-skip-ink: auto
}

img,
picture {
    max-width: 100%;
    display: block
}

input,
button,
textarea,
select {
    font: inherit
}

@media(prefers-reduced-motion:reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

/* 2. Design Tokens */
:root {

    /* 2.1 Responsive Spacing */
    --space-3xs: clamp(0.31rem, calc(0.29rem + 0.10vw), 0.38rem);
    --space-2xs: clamp(0.56rem, calc(0.52rem + 0.19vw), 0.69rem);
    --space-xs: clamp(0.88rem, calc(0.82rem + 0.29vw), 1.06rem);
    --space-s: clamp(1.13rem, calc(1.05rem + 0.38vw), 1.38rem);
    --space-m: clamp(1.69rem, calc(1.57rem + 0.57vw), 2.06rem);
    --space-l: clamp(2.25rem, calc(2.10rem + 0.77vw), 2.75rem);
    --space-xl: clamp(3.38rem, calc(3.15rem + 1.15vw), 4.13rem);
    --space-2xl: clamp(4.50rem, calc(4.19rem + 1.53vw), 5.50rem);
    --space-3xl: clamp(6.75rem, calc(6.29rem + 2.30vw), 8.25rem);

    /* 2.2 Fluid One-up Pairs */
    --space-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.57vw), 0.69rem);
    --space-2xs-xs: clamp(0.56rem, calc(0.41rem + 0.77vw), 1.06rem);
    --space-xs-s: clamp(0.88rem, calc(0.72rem + 0.77vw), 1.38rem);
    --space-s-m: clamp(1.13rem, calc(0.84rem + 1.44vw), 2.06rem);
    --space-m-l: clamp(1.69rem, calc(1.36rem + 1.63vw), 2.75rem);
    --space-l-xl: clamp(2.25rem, calc(1.68rem + 2.87vw), 4.13rem);
    --space-xl-2xl: clamp(3.38rem, calc(2.72rem + 3.26vw), 5.50rem);
    --space-2xl-3xl: clamp(4.50rem, calc(3.35rem + 5.75vw), 8.25rem);

    /* 2.3 Responsive Typography */
    --step--2: clamp(0.69rem, calc(0.65rem + 0.23vw), 0.84rem);
    /* Step -2: 11.11px → 13.51px */
    --step--1: clamp(0.83rem, calc(0.74rem + 0.45vw), 1.13rem);
    /* Step -1: 13.33px → 18.00px */
    --step-0: clamp(1.00rem, calc(0.85rem + 0.77vw), 1.50rem);
    /* Step 0: 16.00px → 24.00px */
    --step-1: clamp(1.20rem, calc(0.95rem + 1.23vw), 2.00rem);
    /* Step 1: 19.20px → 31.99px */
    --step-2: clamp(1.44rem, calc(1.06rem + 1.88vw), 2.67rem);
    /* Step 2: 23.04px → 42.65px */
    --step-3: clamp(1.73rem, calc(1.17rem + 2.80vw), 3.55rem);
    /* Step 3: 27.65px → 56.85px */
    --step-4: clamp(2.07rem, calc(1.26rem + 4.08vw), 4.74rem);
    /* Step 4: 33.18px → 75.78px */
    --step-5: clamp(2.49rem, calc(1.32rem + 5.86vw), 6.31rem);
    /* Step 5: 39.81px → 101.01px */

    --font-style: 'Nunito', verdana, arial;

    --font-not-bold: 300;
    --font-normal: 400;
    --font-bolder: 500;
    --font-bold: 700;

    --line-narrow: 1.2;
    --line-standard: 1.5;
    --line-spacious: 2;

    --main-header-width: 30ch;
    --sub-header-wdith: 20ch;
    --paragraph-width: 60ch;

    /* 2.4 Colors */

    --white: #ffffff;
    --black: #000000;

    --color-core-primary: #d4af37;
    --color-core-complementary: #9EB0EB;
    --color-core-secondary: #5A39D0;
    --color-core-tertiary: #5FBBDD;
    --color-core-quaternary: #FF9429;

    --color-bg-primary: #242424;
    --color-bg-secondary: #383838;
    --color-bg-tertiary: #4b4b4b;
    --color-bg-quaternary: #7c7c7c;

    --color-link: #28a745;
    --color-attention: #ff0000;
    --color-highlight: #FF8FA2;

    --color-shade-dark: #191919;
    --color-shade-dim: #202124;
    --color-shade-charcoal: #303136;
    --color-shade-gray: #585b63;
    --color-shade-graybright: #a5a7af;
    --color-shade-grayglare: #d2d3d7;
    --color-shade-light: #f8f9fa;
    --color-shade-lightbright: #ffffff;

    /* 2.5 grid stuff */
    --grid-max-width: 85.25rem;
    --grid-gutter: var(--space-xs-s, clamp(1.13rem, calc(0.63rem + 2.49vw), 2.75rem));
    --grid-columns: 12;
}

/* 3. Global Styles */

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

html {
    text-size-adjust: none;
    -webkit-text-size-adjust: none
}

img,
picture {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit
}

blockquote,
body,
dd,
/* description details element */
dl,
/* description list element */
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0
}

body {
    position: relative;
    font-family: var(--font-style);
    line-height: 1.5;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    display: flex;
    flex-direction: column;
    color: var(--color-shade-dark);
}

body {
    background: var(--color-shade-lightbright);
}


hr {
    margin-top: var(--space-s-m);
    margin-bottom: var(--space-m);
    width: 75%;
    border: 0;
    height: 3px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

a {
    position: relative;
    color: currentColor;
    text-decoration: none;
    font-weight: var(--font-bold);
}

blockquote {
    position: relative;
    max-width: 65ch;
    margin-top: var(--space-s);
    margin-bottom: var(--space-xl);
    border-top: 3px solid var(--color-core-secondary);
    border-bottom: 3px solid var(--color-core-secondary);
    padding: var(--space-s);
}

blockquote:after {
    position: absolute;
    content: "🔖";
    font-size: 4rem;
    line-height: 0;
    bottom: -22px;
    right: 50px;
}

ol[role="list"],
ul[role="list"] {
    padding: 0px;
    list-style: none;
}

kbd {
    display: inline-block;
    padding-block: 5px;
    padding-inline: 8px;
    background-color: #333;
    color: #fff;
    font-family: 'Arial', sans-serif;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.4), 2px 2px 2px #fff;
}


@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
    }
}


/* 4. Layout Techniques (much inspiration comes from purchasing the book at 'every-layout.dev' Give it a try!) */

/* For defining `--flow-space` in combination with `class="flow"` as utility class*/

.flow-space-2xs {
    --flow-space: var(--space-3xs-2xs);
}

.flow-space-xs {
    --flow-space: var(--space-2xs-xs);
}

.flow-space-s {
    --flow-space: var(--space-xs-s);
}

.flow-space-m {
    --flow-space: var(--space-s-m);
} 

.flow-space-l {
    --flow-space: var(--space-m-l);
}

.flow-space-xl {
    --flow-space: var(--space-l-xl);
}

.flow-space-2xl {
    --flow-space: var(--space-xl-2xl);
}

.flow-space-3xl {
    --flow-space: var(--space-2xl-3xl);
}

.flow>*+* {
    margin-top: var(--flow-space, 1em);
}


/* 4.1 Grid */

/* Grids are to be placed within a grid container */
.wisp-grid-container {
    max-width: var(--grid-max-width);
    margin-inline: auto;
}

.wisp-grid {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
}

.wisp-grid[data-layout="12.5%"] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(6rem, 12.5%, 7rem);
}

.wisp-grid[data-layout="25%"] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem, 25%, 17rem);
}

.wisp-grid[data-layout="33%"] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem, 33%, 18rem);
}

.wisp-grid[data-layout="50%"] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem, 50vw, 26rem);
}

/* true horizontal centering with vertical alignment */
.center {
    box-sizing: content-box;
    max-inline-size: 70ch;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* true vertical centering */
.h-center {
    box-sizing: content-box;
    max-block-size: 100%;
    margin-block: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* true intrinsic centering. Works best as direct child of a .hero */
.true-center-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.true-center {
    text-align: center;
    max-width: 80ch;
    box-sizing: border-box;
    margin: auto;
}

/* wrapper */
.restrict {
    margin-inline: auto;
    max-width: clamp(16rem, var(--restrict-max-width, 100vw), 80rem);
    padding-left: var(--space-s);
    padding-right: var(--space-s);
    position: relative;
}

/* for clustered content such as tag clouds and menu items */
.collection {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 1rem);
    justify-content: center;
    align-items: center;
}

/* As name implies, awesome for stacking stuff. Such as forms or content blocks */
.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stack>* {
    margin-block: 0;
}

.stack>*+* {
    margin-block-start: var(--space, 1.5rem);
}

/* as name implies, sidebar width is fixed so that the adjacent element takes up the rest of the available space. Useful for an image or figure */

.sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter, var(--space-s-m));
}

.sidebar> :first-child {
    /* ↓ The width when the sidebar _is_ a sidebar */
    flex-basis: var(--sidebar-width, 27rem);
    flex-grow: 1;
}

.sidebar> :last-child {
    /* ↓ Grow from nothing */
    flex-basis: 0;
    flex-grow: 999;
    /* ↓ Wrap when the elements are of equal width */
    min-inline-size: var(--sidebar-content-width, 50%);
}

/* for stacking images on top of a layer */
.breakout {
    margin-left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2
}

/* This CSS rule allows the element to extend seamlessly across the entire width of the viewport */
.full-bleed {
    margin-left: calc(50% - 50vw);
    max-width: none;
    width: 100vw;
}

.icon {
    /* If not supported, 0.75 em is the fallback */
    height: 0.75em;
    height: 1cap;
    width: 0.75em;
    width: 1cap;
}

.with-icon {
    display: inline-flex;
    align-items: baseline;
    opacity: 0;
    transition: opacity 0.3s ease;
}

h2:hover .with-icon {
    opacity: 1;
}

.with-icon .icon {
    /* ↓ Use the logical margin property
    and a --space variable with a fallback */
    margin-inline-end: var(--space, 0.5em);
}

.featured-posts .icon {
    vertical-align: -0.125em;
}

.header {
    width: 100%;
    /* Initial styles without background */
    background-color: transparent;
    backdrop-filter: none;
    transition: background-color 0.3s, backdrop-filter 0.3s;
}

.header span {
    color: var(--color-core-secondary);
}

/* nice for accessibility */
.visually-hidden {
    clip: rect(0 0 0 0);
    border: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.featured-posts {
    --grid-max-width: 70rem;
    --grid-gutter: 3rem;
}

.techstack {
    --grid-gutter: 1rem;
}

.techstack span {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.techstack svg {
    height: 6cap;
    height: 6em;
    width: 6cap;
    width: 6em;
}

/* 5. Content Block Classes */
/* Basic styles for common content components. Can be adjusted based on the projects need */

/* 5.1 Button-basic */

.button-basic {
    display: inline-block;
    text-align: center;
    font-weight: var(--font-less);
    min-inline-size: 14rem;
    font-size: var(--step-0);
    padding: var(--space-xs-s) var(--space-2xs-xs);
    color: var(--color-shade-light);
    background-color: var(--color-shade-gray);
    border-radius: 10px;
    box-shadow: 4px 4px 3px var(--color-bg-quaternary);
    text-decoration: none;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.button-basic:hover {
    color: white;
    transform: translateY(5px);
    box-shadow: 0 5px 3px var(--color-bg-quaternary);
}

.info .button-basic {
    font-size: var(--step--1);
    color: var(--color-core-secondary);
}


/* 5.2 Header Items */
/* Use my noted standard header with navigation menu for below */
/* To be adjusted based on project needs */

.brand {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gutter, var(--space-l-xl));
    justify-content: space-between;
}

.branding {
    font-size: var(--step-2);
}

.primary-nav a {
    font-size: var(--step-1);
    font-weight: var(--font-bold);
    letter-spacing: .20ch;
    text-decoration: none;
}

.primary-nav a:hover {
    transition: 1s ease;
    color: var(--color-core-secondary);

}

.primary-nav ul {
    color: var(--color-shade-dim);
    margin: 0;
}

[aria-current="page"] {
    color: var(--color-core-secondary);
}

.accessibility-wrapper {
    align-items: flex-start;
    display: flex;
}

.accessibility-wrapper:hover .accessible-heading [hidden] {
    display: block;
    position: absolute;
    margin-left: 0.5em;     
}   


/* 5.3 Footer Items */

/* 5.4 Cards */
.card {
    background-color: var(--color-shade-);
    position: relative;
    --stacker-gap: var(--space-xs);
    border-radius: 15px;
}

.card-header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.card img, .card picture {
    width: 100%;
    border-radius: 15px;
    height: 200px;
    object-fit: cover;
    object-position: center;
    filter: brightness(90%);
    transition: transform 0.8s ease;
}

.card p {
    word-wrap: break-word;
}

.featured.posts {
    --grid-gutter: 0px;
}

.button-readmore {
    display: inline-block;
    font-size: var(--step--1);
    color: var(--color-shade-lightbright);
    background-color: var(--color-shade-charcoal);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    border: 1px solid black;
}

.button-readmore:hover {
    color: var(--color-core-secondary)
}

/* 5.5 card-pills */
/* Can be modified into any other type of pill with utilities */

.card-pill {
    min-width: 10ch;
    text-align: center;
    display: inline-block;
    padding: var(--space-3xs) var(--space-2xs);
    font-size: var(--step--2);
    font-weight: var(--font-bold);
    color: var(--color-shade-charcoal);
    border: 1px solid var(--color-shade-charcoal);
    border-radius: 50px;
    /* This gives the pill shape */
}

.card-pill:hover {
    color: var(--color-core-secondary);
    transition: color 0.5s ease-in-out;
}

/* 5.7 post rotation */

.article-rotation {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.article-rotation-continue {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.article-rotation strong {
    color: var(--color-core-quaternary);
}

/* 5.8 post header */

.post-header>.sidebar> :first-child {
    --sidebar-width: 30rem;
    flex-grow: 999;
}

.post-header>.sidebar> :last-child {
    --sidebar-content-width: 30%;
    flex-grow: 1;
} 

.post-header img {
    border-radius: 5% 10%;
}

.post-content >.sidebar> :first-child {
    --sidebar-width: 45rem;
}

.post-content >.sidebar> :last-child {
    --sidebar-content-width: 25%;
    flex-grow: 1;
}

.sidebar>.posts-grid {
    --sidebar-width: 60ch;
    flex-grow: 999;
}

.sidebar>.category-menu {
    --sidebar-content-width: 20%;
    flex-grow: 1;
}

/* 5.9 Wiki ToC */

.wiki-toc {
    height: 100%; 
    position: sticky;
    top: 25px;
}

.wiki-toc summary,
.wiki-toc ul a {
    transition: color 0.7s ease;
    cursor: pointer;
}

.wiki-toc summary:hover,
.wiki-toc ul a:hover {
    color: var(--color-core-secondary);
}

.wiki-toc ul {
    padding-left: 0;
}

.wiki-toc [role="toc-item"] {
    list-style: none;
}

.wiki-toc .level-1 {
    font-size: var(--step-0);
    padding-left: 0;
}

.wiki-toc .level-2 {
    font-size: var(--step--1);
    display: block;
    padding-left: 1rem;
}

.wiki-toc .level-3 {
    font-size: var(--step--2);
    padding-left: 3rem;
}

.toc-highlight {
    color: blue;
}

/* 5.10 Wiki/Post definitions */

.prose {
    max-width: 85ch;
}

.prose p {
    font-size: var(--step--1);
    max-width: 80ch;
}

/* below link styling idea received from https://benmyers.dev/ */
.prose a::before, .category-link::before {
    content: '';
    background-color: var(--color-core-secondary);
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    z-index: -1;
    transition: all .3s ease-in-out;
}

.prose a:hover, .category-link:hover {
    padding: 0.2em;
    transition: all .5s ease-in-out;
    color: var(--color-shade-lightbright);
}

.prose a:hover::before, .category-link:hover::before {
    bottom: 0;
    height: 100%;
}


/* 6. Utility Classes */
/* Stuff that does one thing, but does it extremely well */
/* Can be used in combination with other classes to create a desired effect */
/* Will be extended based on specific requirements. I've attempted to include as much as possible on composition level */

/* 6.1 Containers */

.wisp {
    /* equivalent to container */
    width: 100%;
}

/* 6.2 Specific padding and margin spacing */

.mtb-3xs {
    margin-block: var(--space-3xs);
}

.mtb-2xs {
    margin-block: var(--space-2xs);
}

.mtb-xs {
    margin-block: var(--space-xs);
}

.mtb-s {
    margin-block: var(--space-s);
}

.mtb-m {
    margin-block: var(--space-m);
}

.mtb-l {
    margin-block: var(--space-l);
}

.mtb-xl {
    margin-block: var(--space-xl);
}

.mtb-2xl {
    margin-block: var(--space-2xl);
}

.mtb-3xl {
    margin-block: var(--space-3xl);
}

.mlr-3xs {
    margin-inline: var(--space-3xs);
}

.mlr-2xs {
    margin-inline: var(--space-2xs);
}

.mlr-xs {
    margin-inline: var(--space-xs);
}

.mlr-s {
    margin-inline: var(--space-s);
}

.mlr-m {
    margin-inline: var(--space-m);
}

.mlr-l {
    margin-inline: var(--space-l);
}

.mlr-xl {
    margin-inline: var(--space-xl);
}

.mlr-2xl {
    margin-inline: var(--space-2xl);
}

.mlr-3xl {
    margin-inline: var(--space-3xl);
}

.mt-3xs {
    margin-block-start: var(--space-3xs);
}

.mt-2xs {
    margin-block-start: var(--space-2xs);
}

.mt-xs {
    margin-block-start: var(--space-xs);
}

.mt-s {
    margin-block-start: var(--space-s);
}

.mt-m {
    margin-block-start: var(--space-m);
}

.mt-l {
    margin-block-start: var(--space-l);
}

.mt-xl {
    margin-block-start: var(--space-xl);
}

.mt-2xl {
    margin-block-start: var(--space-2xl);
}

.mt-3xl {
    margin-block-start: var(--space-3xl);
}

.mr-3xs {
    margin-inline-end: var(--space-3xs);
}

.mr-2xs {
    margin-inline-end: var(--space-2xs);
}

.mr-xs {
    margin-inline-end: var(--space-xs);
}

.mr-s {
    margin-inline-end: var(--space-s);
}

.mr-m {
    margin-inline-end: var(--space-m);
}

.mr-l {
    margin-inline-end: var(--space-l);
}

.mr-xl {
    margin-inline-end: var(--space-xl);
}

.mr-2xl {
    margin-inline-end: var(--space-2xl);
}

.mr-3xl {
    margin-inline-end: var(--space-3xl);
}

.mb-3xs {
    margin-block-end: var(--space-3xs);
}

.mb-2xs {
    margin-block-end: var(--space-2xs);
}

.mb-xs {
    margin-block-end: var(--space-xs);
}

.mb-s {
    margin-block-end: var(--space-s);
}

.mb-m {
    margin-block-end: var(--space-m);
}

.mb-l {
    margin-block-end: var(--space-l);
}

.mb-xl {
    margin-block-end: var(--space-xl);
}

.mb-2xl {
    margin-block-end: var(--space-2xl);
}

.mb-3xl {
    margin-block-end: var(--space-3xl);
}

.ml-3xs {
    margin-inline-start: var(--space-3xs);
}

.ml-2xs {
    margin-inline-start: var(--space-2xs);
}

.ml-xs {
    margin-inline-start: var(--space-xs);
}

.ml-s {
    margin-inline-start: var(--space-s);
}

.ml-m {
    margin-inline-start: var(--space-m);
}

.ml-l {
    margin-inline-start: var(--space-l);
}

.ml-xl {
    margin-inline-start: var(--space-xl);
}

.ml-2xl {
    margin-inline-start: var(--space-2xl);
}

.ml-3xl {
    margin-inline-start: var(--space-3xl);
}

.ptb-3xs {
    padding-block: var(--space-3xs);
}

.ptb-2xs {
    padding-block: var(--space-2xs);
}

.ptb-xs {
    padding-block: var(--space-xs);
}

.ptb-s {
    padding-block: var(--space-s);
}

.ptb-m {
    padding-block: var(--space-m);
}

.ptb-l {
    padding-block: var(--space-l);
}

.ptb-xl {
    padding-block: var(--space-xl);
}

.ptb-2xl {
    padding-block: var(--space-2xl);
}

.ptb-3xl {
    padding-block: var(--space-3xl);
}

.plr-3xs {
    padding-inline: var(--space-3xs);
}

.plr-2xs {
    padding-inline: var(--space-2xs);
}

.plr-xs {
    padding-inline: var(--space-xs);
}

.plr-s {
    padding-inline: var(--space-s);
}

.plr-m {
    padding-inline: var(--space-m);
}

.plr-l {
    padding-inline: var(--space-l);
}

.plr-xl {
    padding-inline: var(--space-xl);
}

.plr-2xl {
    padding-inline: var(--space-2xl);
}

.plr-3xl {
    padding-inline: var(--space-3xl);
}

.pt-3xs {
    padding-block-start: var(--space-3xs);
}

.pt-2xs {
    padding-block-start: var(--space-2xs);
}

.pt-xs {
    padding-block-start: var(--space-xs);
}

.pt-s {
    padding-block-start: var(--space-s);
}

.pt-m {
    padding-block-start: var(--space-m);
}

.pt-l {
    padding-block-start: var(--space-l);
}

.pt-xl {
    padding-block-start: var(--space-xl);
}

.pt-2xl {
    padding-block-start: var(--space-2xl);
}

.pt-3xl {
    padding-block-start: var(--space-3xl);
}

.pr-3xs {
    padding-inline-end: var(--space-3xs);
}

.pr-2xs {
    padding-inline-end: var(--space-2xs);
}

.pr-xs {
    padding-inline-end: var(--space-xs);
}

.pr-s {
    padding-inline-end: var(--space-s);
}

.pr-m {
    padding-inline-end: var(--space-m);
}

.pr-l {
    padding-inline-end: var(--space-l);
}

.pr-xl {
    padding-inline-end: var(--space-xl);
}

.pr-2xl {
    padding-inline-end: var(--space-2xl);
}

.pr-3xl {
    padding-inline-end: var(--space-3xl);
}

.pb-3xs {
    padding-block-end: var(--space-3xs);
}

.pb-2xs {
    padding-block-end: var(--space-2xs);
}

.pb-xs {
    padding-block-end: var(--space-xs);
}

.pb-s {
    padding-block-end: var(--space-s);
}

.pb-m {
    padding-block-end: var(--space-m);
}

.pb-l {
    padding-block-end: var(--space-l);
}

.pb-xl {
    padding-block-end: var(--space-xl);
}

.pb-2xl {
    padding-block-end: var(--space-2xl);
}

.pb-3xl {
    padding-block-end: var(--space-3xl);
}

.pl-3xs {
    padding-inline-start: var(--space-3xs);
}

.pl-2xs {
    padding-inline-start: var(--space-2xs);
}

.pl-xs {
    padding-inline-start: var(--space-xs);
}

.pl-s {
    padding-inline-start: var(--space-s);
}

.pl-m {
    padding-inline-start: var(--space-m);
}

.pl-l {
    padding-inline-start: var(--space-l);
}

.pl-xl {
    padding-inline-start: var(--space-xl);
}

.pl-2xl {
    padding-inline-start: var(--space-2xl);
}

.pl-3xl {
    padding-inline-start: var(--space-3xl);
}

.font-step--2 {
    font-size: var(--step--2);
}

.font-step--1 {
    font-size: var(--step--1);
}

.font-step-0 {
    font-size: var(--step-0);
}

.font-step-1 {
    font-size: var(--step-1);
}

.font-step-2 {
    font-size: var(--step-2);
}

.font-step-3 {
    font-size: var(--step-3);
}

.font-step-4 {
    font-size: var(--step-4);
}

.font-step-5 {
    font-size: var(--step-5);
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.flex-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-horizontal {
    justify-content: center;
}

.centeredtext {
    text-align: center;
}

.offset {
    position: relative;
}

.absolute {
    position: absolute;
}

.no-overflow {
    overflow: hidden;
}

.overflow {
    overflow: visible;
}

.shadow {
    box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.5);
    /* Adjust color and opacity for a softer shadow */
}

.staybelow {
    margin-top: auto;
}

.z-index {
    z-index: 10;
}

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

.text-secondary {
    color: var(--color-core-secondary);
}

.text-tertiary {
    color: var(--color-core-tertiary)
}

.text-quaternary {
    color: var(--color-core-quaternary)
}

.test {
    color: red;
    border: 1px solid red;
}

@media (max-width: 1040px) {
    .post-content > .sidebar {
        display: flex;
        flex-direction: column-reverse;
    }

    .wiki-toc {
        position: static;
        top: auto;
        height: auto;
    }
}


@media (min-width: 761px) {
    .author-bottom {
        display: none;
    }
}

@media (max-width: 760px) {
    .post-header > .sidebar > :last-child {
        display: none;
    }
}