body {
    background: #0f121d;
    color: #fff;
    font-family: "Fredoka", sans-serif;
}

:root {
    /* user-controlled scale for article text */
    --article-scale: 1;
    /* base responsive sizes for article content */
    --article-h1: clamp(1rem, 3.6vw, 2.5rem);
    --article-h2: clamp(0.925rem, 2.7vw, 1.4rem);
    --article-h3: clamp(0.9rem, 2.6vw, 1.6rem);
    --article-h4: clamp(0.95rem, 2.8vw, 1.2rem);
    --article-h5: clamp(0.7rem, 1.8vw, 1.0rem);
    --article-p: clamp(0.75rem, 2.2vw, 0.95rem);
}

img {
    max-width: 50vw;
    width: 50vw;
    margin-left: 2vw;
}

.round {
    border-radius: 8px;
}

.mochaaaadotdev {
    max-width: 6%;
    position: absolute;
    left: 10px;
    top: 30px;
    border: none;
}

.uh {
    padding-top: 2rem;
    background: linear-gradient(to bottom, #8fdbf9, #fccbd5, #fff, #fccbd5, #8fdbf9);
    background-clip: text;
    background-size: 100% 50%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h1,
h2,
h3,
h5,
p {
    /* center headings and paragraphs and make them responsive */
    margin-left: auto;
    margin-right: auto;
    word-wrap: normal;
    width: clamp(280px, 60vw, 900px);
}

.article {
    /* center the article card and make it responsive */
    margin: 8vh auto -10vh auto;
    position: relative;
    border-radius: 16px;
    /* responsive width with sensible min/max */
    width: clamp(300px, 55vw, 900px);
    height: 10;
    background-color: #ffffff06;
    padding: 0.4rem 1.6rem;
    box-sizing: border-box;
    transition: transform 240ms ease, box-shadow 240ms ease, background-color 240ms ease;
    will-change: transform;
    text-align: center;
}

.article h3 {
    font-weight: lighter;
}

.article:hover {
    transform: scale(1.02);
    background-color: #ffffff0e;
}

.intro {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -10vh;
    margin-top: 15vh;
    text-align: center;
}

.articleText {
    /* let the article internal padding control flow */
    margin-left: 0;
    width: 100%;
}

/* article text sizing using CSS variables so it can be scaled */
.article .articleText h1,
.article h1.articleText {
    font-size: calc(var(--article-h1) * var(--article-scale));
}

.article h3.articleText,
.article .articleText h3 {
    font-size: calc(var(--article-h3) * var(--article-scale));
}

.article p {
    /* make paragraphs more prominent, similar to an h4 */
    font-size: calc(var(--article-h4) * var(--article-scale));
    font-weight: 500;
    line-height: 1.35;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

.article h5 {
    font-size: calc(var(--article-h5) * var(--article-scale));
}

/* global heading and paragraph sizing */
h1 {
    font-weight: 500;
    font-size: calc(var(--article-h1) * var(--article-scale));
    margin-bottom: 0;
}

h2 {
    font-weight: 500;
    font-size: calc(var(--article-h2) * var(--article-scale));
    padding-top: 0rem;
}

h3 {
    font-weight: 500;
    font-size: calc(var(--article-h3) * var(--article-scale));
    padding-top: 0rem;
}

h5 {
    font-weight: lighter;
    font-style: italic;
    font-size: calc(var(--article-h5) * var(--article-scale));
    margin-top: 8px;
}

p {
    /* paragraphs styled more like an h4 */
    font-size: calc(var(--article-h4) * var(--article-scale));
}

/* small UI for font controls */
.font-controls {
    display: inline-flex;
    gap: 0.5rem;
    position: fixed;
    right: 14px;
    top: 14px;
    background: rgba(255,255,255,0.04);
    padding: 6px 8px;
    border-radius: 8px;
    backdrop-filter: blur(6px);
    z-index: 9999;
}

.font-controls button {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 160ms ease, transform 120ms ease;
}

.font-controls button:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-1px);
}

/* zoom percentage label */
.font-controls .zoom-label {
    align-self: center;
    padding-left: 6px;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    border-left: 1px solid rgba(255,255,255,0.06);
    margin-left: 4px;
    padding-left: 8px;
}

/* date badge inside article cards */
.article .date-badge {
    position: relative;
    left: -21.75rem;
    top: 10px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: calc(0.75rem * var(--article-scale));
    box-shadow: 0 2px 2px #000000;
}

a {
    text-decoration: none;
    transition: 1200ms ease;
}