/* Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables */

:root {
    /* Colors */
    --white: #ffffff;
    --black: #000000;

    --gray-100: #eaeaea;
    --gray-200: #dbdbdb;
    --gray-300: #bbbbbb;
    --gray-400: #979797;
    --gray-500: #808080;
    --gray-600: #5c5c5c;
    --gray-800: #262626;

    --gray-100: oklch(95% 0.01 248);
    --gray-200: oklch(87% 0.01 248);
    --gray-300: oklch(85% 0.01 248);
    --gray-400: oklch(75% 0.01 248);
    --gray-500: oklch(60% 0.01 248);
    --gray-600: oklch(45% 0.03 248);
    --gray-700: oklch(35% 0.03 248);
    --gray-800: oklch(25% 0.03 248);

    --blue-200: #93ecfb;
    --blue-300: #60d5e8;
    --blue-400: #30aabd;
    --blue-700: #054d59;
    --blue-800: #001c2f;
    --blue-900: #000f1e;

    --blue-200: oklch(85% 0.13 248);
    --blue-300: oklch(75% 0.15 248);
    --blue-400: oklch(70% 0.15 248);
    --blue-700: oklch(40% 0.15 248);
    --blue-800: oklch(30% 0.08 248);
    --blue-900: oklch(20% 0.08 248);
    --blue-950: oklch(12% 0.05 248);

    --yellow-200: #fff169;
    --yellow-300: #ffeb26;
    --yellow-400: #dfcd0e;
    --yellow-800: #444014;

    --green-300: #8bf94e;
    --green-800: #3e4b00;

    --purple-100: #da93ff;
    --purple-200: #b262db;
    --purple-300: #914fb3;
    --purple-800: #20173a;

    --yellow-300-rgb: 255, 235, 38;
    --blue-200-rgb: 147, 236, 251;
    --blue-300-rgb: 93, 196, 213;

    /* Opacity */
    --opacity-100: 1;
    --opacity-200: 0.85;
    --opacity-300: 0.75;

    /* Text */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;
    --font-4xl: 2.25rem;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;

    /* Borders */
    --box-radius: 0.25rem;

    --radius-base: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;

    /* Screens */
    --screen-sm: 640px;
    --screen-md: 768px;
    --screen-lg: 1024px;
    --screen-xl: 1280px;
    --screen-2xl: 1536px;
}

body {
    --content-width: var(--screen-md);
}

/* Icons */

.icon-solid {
    width: 1.2rem;
    height: 1.2rem;
}
.icon-mini {
    width: 1rem;
    height: 1rem;
}

/* Layout */

/* Nav */

.nav {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);

    display: flex;
}

.nav-content {
    padding: 0 1rem;
    flex-grow: 1;
    margin: 0 auto;
    max-width: var(--content-width);

    display: flex;
    align-items: center;
}

.logo, .logo:visited {
    color: var(--gray-100);
    font-size: var(--font-xl);
    font-weight: 800;
    text-decoration: none;

    transition: color 100ms;
}
.logo:hover, .logo:visited:hover {
    color: var(--blue-300);
}

.nav-link-container {
    margin-left: 1.5rem;

    display: flex;
    align-items: center;
}

.nav-link, .nav-link:visited {
    color: var(--gray-200);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;

    transition: color 100ms;
}
.nav-link:hover, .nav-link:visited:hover {
    color: var(--blue-300);
}

/* Content */

body {
    /* Text */
    color: var(--gray-200);
    font-family: system-ui;

    font-size: 1rem;
    line-height: 1.6;

    /* Background */
    background: var(--blue-950);

    /* Needed for pages smaller than viewport height to have viewport-sized gradient */
    min-height: 100vh; 

    /* Needed for .grain div to have 100% height */
    position: relative; 
}

main {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 4rem 1rem;
}

@media (max-width: 640px) {
    main {
        padding: 2rem 1rem;
    }
}

footer {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 1rem 4rem;

    color: var(--gray-500);
    font-size: var(--font-xs);

    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

footer .bull {
    margin: 0 0.5rem;
    color: var(--gray-600);
    font-size: var(--font-base);
}

::selection {
    color: black;
    background-color: var(--blue-300);
}

/* Blog Background */

.grain {
    --noise-image-size: 200px;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: max(100%, 100vh);
    z-index: 1;
    pointer-events: none;

    background: url(/images/noise-716c7cdd36b384cc1d5b67fa2b0770ec.svg?vsn=d) 0 0 / var(--noise-image-size) var(--noise-image-size) repeat;
    opacity: 6%;
}

/* Sign Effect */

.sign-header {
    --font-size: 1.75rem;
    --border-width: 0.4rem;
    --border-radius: 0.5rem;
    --transition-time: 300ms;
}
.sign-header.base {
}
.sign-header.lg {
    --font-size: 2.5rem;
    --border-width: 0.4rem;
}

@media (min-width: 640px) {
    .sign-header {
        --font-size: 3rem;
        --border-width: 0.5rem;
        --border-radius: 1rem;
    }
    .sign-header.lg {
        --font-size: 4rem;
        --border-width: 0.6rem;
    }
}

.sign-header {
    padding: var(--border-width);
    display: inline-block;
    position: relative;
}
.sign-header.yellow {
    --heading-color-100: var(--yellow-300);
    --heading-color-50: rgba(var(--yellow-300-rgb), 0.5);
    --heading-color-30: rgba(var(--yellow-300-rgb), 0.3);
    --heading-color-off: var(--yellow-800);
    --line-color: var(--green-800);
}
.sign-header.blue {
    --heading-color-100: var(--blue-200);
    --heading-color-50: rgba(var(--blue-200-rgb), 0.5);
    --heading-color-30: rgba(var(--blue-200-rgb), 0.3);
    --heading-color-off: var(--blue-700);
    --line-color: var(--purple-800);
}

.sign-header h1 {
    padding: 0 1rem 0.375rem;
    display: inline-block;

    color: var(--heading-color-100);
    font-size: var(--font-size);
    font-weight: 900;
    text-wrap: balance;

    box-shadow: 0 0 0 var(--border-width);
    border-radius: var(--border-radius);

    filter: drop-shadow(0 0 0.10rem);
    transition: filter var(--transition-time),
                color var(--transition-time);
}
.sign-header:hover h1 {
    filter: drop-shadow(0 0 0.15rem)
            drop-shadow(0 0 0.5rem var(--heading-color-50))
            drop-shadow(0 0 10rem var(--heading-color-30));
}
.sign-header.off h1 {
    --heading-color-100: var(--heading-color-off);
    filter: none;
}

.header-glow {
    --height: 72rem;
    --width: max(100vw, 96rem);

    position: absolute;
    top: calc(50% - (var(--height) / 2));
    left: calc(50% - (var(--width) / 2));
    width: var(--width);
    height: var(--height);
    z-index: -1;

    background: radial-gradient(at center, var(--heading-color-100) 0, transparent 70%);

    opacity: 0.1;
    transition: opacity var(--transition-time);
}

.sign-header:hover:not(.off) .header-glow {
    opacity: 0.25;
}
.sign-header.off .header-glow {
    opacity: 0;
}

/* Blog Index */

.blog-index-header {
    text-align: center;
}

.rss-link, .rss-link:visited {
    padding: 0 0.5rem;
    margin-top: 0.5rem;

    color: var(--blue-300);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;

    border-radius: var(--box-radius);

    display: inline-flex;
    align-items: center;

    transition: background-color 100ms;
}
.rss-link:hover, .rss-link:visited:hover {
    color: var(--black);
    background-color: var(--blue-300);
}
.rss-link:active, .rss-link:visited:active {
    background-color: var(--blue-400);
}
.rss-link svg {
    margin-right: 0.25rem;
}

.article-list-container {
    margin-top: 4rem;

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.article-list-item, .article-list-item:visited, .article-list-item:visited:hover {
    padding: 1rem;

    color: var(--gray-200);
    line-height: 1.3;
    text-decoration: none;

    border: 1px solid transparent;
    border: 1px solid var(--gray-800);
    border-radius: 0.25rem;

    display: flex;
    flex-direction: column;
    gap: 0.125rem;

    transition-property: border color background-color;
    transition-duration: 100ms;
}
.article-list-item:hover, .article-list-item:visited:hover {
    color: black;
    background-color: var(--blue-400);
    border: 1px solid var(--blue-400);
}

.article-list-item .title {
    font-size: var(--font-2xl);
    font-weight: var(--weight-bold);
}
.article-list-item .subtitle {
    opacity: var(--opacity-200);
}
.article-list-item .date {
    opacity: var(--opacity-200);
    font-size: var(--font-xs);
    font-weight: var(--weight-medium);
}

@media (max-width: 640px) {
    .article-list-container {
        margin-top: 2rem;
    }
    .article-list-item .title {
        font-size: var(--font-lg);
        font-weight: var(--weight-semibold);
    }
}


/* Blog Article */

.article-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.article-header .title-container {
    margin-bottom: 0.5rem;
}

.article-metadata {
    margin-top: 0.5rem;

    font-size: var(--font-base);
    text-align: center;
    text-wrap: balance;
}

.article-metadata h2 {
    font-size: var(--font-xl);
}

.article-metadata > div {
    margin-top: 0.25rem;
}

.article-metadata span {
    opacity: var(--opacity-300);
}

@media (max-width: 640px) {
    .article-metadata h2  {
        font-size: var(--font-lg);
        font-weight: var(--weight-medium);
    }
    .article-metadata div { font-size: var(--font-sm); }
}

.article-body {
    margin-top: 3rem;
}

@media (max-width: 640px) {
    .article-body {
        margin-top: 2rem;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gray-100);
    font-weight: 600;
    line-height: 1.2;
}

h1 {
    font-size: 3rem;
    font-weight: 600;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
}

:is(h1, h2, h3, h4, h5, h6) > a,
:is(h1, h2, h3, h4, h5, h6) > a:visited {
    color: inherit;
    text-decoration: none;
}
:is(h1, h2, h3, h4, h5, h6) > a:hover,
:is(h1, h2, h3, h4, h5, h6) > a:hover:visited {
    color: inherit;
    text-decoration: underline;
}

.article-body :is(h1, h2):not(:first-child) {
    margin-top: 3rem;
    margin-bottom: 1.25rem;
}

.article-body :is(h3, h4):not(:first-child) {
    margin-top: 2rem;
}

.article-body :is(ul, ol, blockquote, .code-block-container, p):not(:first-child) {
    margin-top: 1rem;
}

.article-body li {
    margin-top: 0.5rem;
}

p {
    text-align: justify;
    hyphens: auto;
}

ul, ol {
    /* TODO: Lists with wider markers (e.g. 100.) are off the screen */
    padding-left: 1rem;
}

@media(min-width: 640px) {
    ul, ol {
        padding-left: 2rem;
    }
}

li::marker {
    color: var(--gray-400);
}

li {
    padding-left: 0.25rem;
}

blockquote {
    color: var(--gray-300);

    --border-color: var(--blue-300);
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 0.25rem solid var(--border-color);

    border-radius: 0 var(--box-radius) var(--box-radius) 0;

    transition: background-color 100ms;
}

blockquote:hover {
    background-color: rgb(0, 0, 0, 0.4);
}

.code-block-container {
    overflow: hidden;

    background-color: var(--blue-950);
    border-radius: var(--box-radius);
    border: 1px solid var(--gray-800);
}

.code-block-body {
    padding: 0.375rem 0.75rem;

    font-size: var(--font-xs);
    line-height: 1.4;

    overflow-x: auto;
}

@media (min-width: 640px) {
    .code-block-body {
        font-size: var(--font-sm);
    }
}

code.code-span {
    color: var(--yellow-200);
    font-size: var(--font-sm);

    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    background-color: rgb(0, 0, 0, 0.5);
    border: 1px solid var(--gray-800);

    transition: background-color 100ms;
}

code.code-span:hover {
    background-color: rgb(0, 0, 0, 0.3);
}

a {
    color: var(--blue-200);
}

a:hover {
    color: var(--blue-300);
}

a:visited {
    color: var(--purple-100);
}

a:visited:hover {
    color: var(--purple-200);
}