:root {
    /* BORDERS */
    --border-thin-white: var(--white) solid 2px;

    /* COLORS */
    --aquatic-gray: #dce4f4;
    --avocado-mint: #f0f4dc;
    --blue-dream: #a2b7e2;
    --puffy-cloud: #eff3fa;
    --matterhorn: #483a3d;
    --thunder: #37292c;

    /* COLORS WITH OPACITY */
    --whisper: rgba(255, 255, 255, 0.3);
    --white: rgba(255, 255, 255, 0.5);

    /* FONT NAMES */
    --poppins-font: Poppins;
    --source-code-pro-font: "Source Code Pro";

    /* FONT WEIGHTS */
    --weight-400: 400;
    --weight-600: 600;
    --weight-800: 800;

    /* GRID */
    --post-summaries-grid: repeat(auto-fit, minmax(35ch, 1fr)) !important;

    /* LINE HEIGHT */
    --one-point-two: 1.2;

    /* SIZES PX */
    --one-px: 1px;

    /* SIZES REM */
    --half-rem: 0.5rem;
    --one-rem: 1rem;
    --two-rem: 2rem;
    --three-rem: 3rem;

    --size-300: 0.75rem;
    --size-400: 1rem;
    --size-500: 1.33rem;
    --size-600: 1.77rem;
    --size-700: 2.36rem;
    --size-800: 3.15rem;
    --size-900: 4.2rem;

    --bulma-is-size-5: 1.25rem;

    /* PERCENTAGE */
    --fifty-percent: 50%;
    --one-hundred-percent: 100%;
}

html {
    min-height: var(--one-hundred-percent);
}

/* BEGIN -- these 2 are together */
/* THIS IS HOW TO GET A STICKY FOOTER */
html,
body {
    height: var(--one-hundred-percent);
    background-color: var(--aquatic-gray) !important;
}

body > footer {
    position: sticky;
    top: 100vh;
}
/* END -- these 2 are together */

body {
    color: var(--thunder);
    font-family: var(--poppins-font);
}

hr {
    border: var(--one-px) solid var(--matterhorn);
    margin: var(--one-rem) auto;
    width: var(--fifty-percent);
}

/* NAVBAR */
.navbar {
    background-color: var(--aquatic-gray);
    color: var(--thunder);
}

a.x-navbar-links {
    color: var(--thunder);
}

a.x-navbar-links:hover {
    background-color: var(--blue-dream);
}

/* BLOG SUMMARY */
h1.x-summary-headline {
    font-size: var(--size-800) !important;
    font-weight: var(--weight-800) !important;
}

/* POST SUMMARIES */
li.x-post-summary {
    background-color: var(--whisper);
    border: var(--border-thin-white);
}

.x-post-summaries {
    display: grid !important;
    grid-gap: var(--size-600) !important;
    grid-template-columns: var(--post-summaries-grid);
}

.x-post-summary-tag {
    border: var(--border-thin-white);
    font-size: var(--size-300) !important;
    text-transform: uppercase;
}

.x-created-at {
    font-size: var(--size-300) !important;
}

/* POST */
.x-post-content {
    background-color: var(--aquatic-gray);
    display: flex;
    flex-direction: column;
    margin-top: var(--size-800);
}

.x-post-content > h1 {
    font-weight: var(--weight-800) !important;
    font-size: var(--size-800) !important;
    margin-bottom: var(--size-400);
}

.x-post-content > h2 {
    font-size: var(--size-600) !important;
    font-weight: var(--weight-600) !important;
    margin-bottom: var(--size-400);
}

.x-post-content p {
    font-size: var(--bulma-is-size-5);
    margin-bottom: var(--half-rem) !important;
    margin-top: var(--half-rem) !important;
}

.x-post-content p code {
    border-radius: var(--half-rem);
    margin-right: var(--half-rem);
}

.x-post-content ul {
    font-size: var(--bulma-is-size-5);
    list-style-type: disc;
    margin-bottom: var(--half-rem) !important;
    margin-top: 0 !important;
}

.x-post-content li {
    display: list-item;
    font-weight: var(--weight-400) !important;
}

.x-post-content pre {
    background-color: var(--puffy-cloud) !important;
    border: var(--border-thin-white);
    border-radius: var(--half-rem);
    margin: var(--three-rem);
    padding: 0 var(--two-rem);
}

.x-post-content pre code {
    background-color: var(--puffy-cloud) !important;
    font-family: var(--source-code-pro-font);
    font-size: var(--size-400) !important;
    font-weight: var(--weight-400) !important;
}

h2.x-post-title {
    line-height: var(--one-point-two);
    font-size: var(--size-600) !important;
    font-weight: var(--weight-800) !important;
}

p.x-inline-code > code,
ul.x-inline-code > li > code {
    border-radius: var(--half-rem);
    background-color: var(--avocado-mint);
}

/* FOOTER */
.x-footer-links,
.x-footer-text {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.x-small-uppercase {
    font-variant: small-caps;
}

.x-uppercase {
    text-transform: uppercase;
}

/* BESPOKE FIXES */
/* NAVBAR, I BELIEVE */
.box:not(:last-child) {
    margin-bottom: 0;
}

body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background-color: var(--aquatic-gray);
}