/* Color Variables */ 

:root {
    --primary-text: oklch(0.35 0.005 235);
    --secondary-text: oklch(0.65 0.005 235);
    --tertiary-text: oklch(0.85 0.005 235);
    
    --background: oklch(0.95 0.005 235);
    
    --ruby: oklch(0.5469 0.2448 24.35);
    --sapphire: oklch(0.6411 0.2103 247.76);
    --emerald: oklch(0.5969 0.2424 144);
    --amethyst: oklch(0.4675 0.2794 283.76);
    --topaz: oklch(0.7146 0.2276 44.47);
    --black: oklch(0.05 0.005 235);
    --white: oklch(0.95 0.005 235);
}


/* Fonts */ 

@font-face {
    font-family: "Prelude";
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Prelude/Prelude-Medium.ttf');
}

@font-face {
    font-family: "Prelude";
    font-style: italic;
    font-weight: normal;
    src: url('../fonts/Prelude/Prelude-MediumOblique.ttf');
}

@font-face {
    font-family: "Prelude";
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/Prelude/Prelude-Bold.ttf');
}

@font-face {
    font-family: "Prelude";
    font-style: italic;
    font-weight: bold;
    src: url('../fonts/Prelude/Prelude-BoldOblique.ttf');
}

/* Colors */
.sapphire {
    color: var(--sapphire);
}

.ruby {
    color: var(--ruby);
}

.emerald {
    color: var(--emerald);
}

.amethyst {
    color: var(--amethyst);
}

.topaz {
    color: var(--topaz);
}

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

/* Base Styles */

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    background-color: var(--background);
    color: var(--primary-text);
    min-height: 100%;
    margin: 0 auto;
    padding: 1.25em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Prelude", sans-serif;
    max-width: 42em;
}

a {
    color: var(--amethyst);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
}

a:hover {
    text-decoration-color: color-mix(in oklab, currentColor 75%, transparent);
}

/* Sections */

section {
    padding: 1.5em 0;
    border-bottom: 1px var(--secondary-text) solid;
}

section > p {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.5em;
}

section > h1 {
    font-size: 2.0em;
    font-weight: bold;
    margin-bottom: 0.75em;
}

section > h2 {
    font-size: 1.75em;
    font-weight: bold;
    margin-bottom: 0.75em;
}

section > ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.5em;
}

section > ul > li {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5em;
}

section > ul > li:last-child {
    margin-bottom: 0;
}

section > ul > li > img {
    width: 3em;
    height: 3em;
    border-radius: 0.0em;
}

section > ul > li > h3 {
    font-size: 1.25em;
    margin: 0 0 0 0;
    width: 100%;
}

section > ul > li > h3 > small {
    font-size: 0.6em;
    font-weight: bold;
    background-color: var(--tertiary-text);
    color: var(--primary-text);
    padding: 0.125em 0.5em;
    border-radius: 0.75em;
    margin-left: 0.25em;
    vertical-align: 0.2em;
}

section > ul > li > p {
    margin: 0;
    width: 100%;
}

/* Mastodon Post Styling */

mastodon-post {
    font-family: sans-serif;
    padding: 0.5em;
    background-color: color-mix(in oklab, var(--amethyst) 10%, var(--background) 100%);
    border-radius: 1em;
    margin-bottom: 1.5em;
}

mastodon-post:not(:defined) figure,
mastodon-post:defined > a {
    display: none;
}

mastodon-post {
    display: block;
    max-inline-size: max-content;
}

mastodon-post blockquote {
    margin: 0;
    border-inline-start: 2px solid currentColor;
    padding-inline-start: 1rem;
}

mastodon-post figure {
    margin: 0;
}

mastodon-post figcaption,
mastodon-post dl {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
}

mastodon-post dl {
    justify-content: end;
    gap: 0.25rem;
    margin-inline-start: auto;
}

mastodon-post dt {
    margin-inline-start: 1rem;
}

mastodon-post dd {
    margin-inline-start: 0;
}

/* Bluesky Post Styling */

bluesky-post {
    font-family: sans-serif;
    padding: 0.5em;
    background-color: color-mix(in oklab, var(--sapphire) 10%, var(--background) 100%);
    border-radius: 1em;
    margin-bottom: 1.5em;
}

bluesky-post:not(:defined) figure,
bluesky-post:defined > a {
    display: none;
}

bluesky-post {
    display: block;
    max-inline-size: max-content;
}

bluesky-post blockquote {
    margin: 0 0 1rem;
    border-inline-start: 2px solid currentColor;
    padding-inline-start: 1rem;
}

bluesky-post figure {
    margin: 0;
}

bluesky-post figcaption,
bluesky-post dl {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
}

bluesky-post dl {
    justify-content: end;
    gap: 0.25rem;
    margin-inline-start: auto;
}

bluesky-post dt {
    margin-inline-start: 1rem;
}

bluesky-post dd {
    margin-inline-start: 0;
}