@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
    padding: 0px;
    margin: 0px;
}

html {
    color: var(--tx);
    font-family: 'PT Serif', serif;
    background: var(--bg);
    font-size: 18px;
    line-height: 28px;
    padding: 0px 20px;
}

body {
    margin: 140px auto 0px auto;
    max-width: 468px;
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

h1,
h2,
h3 {
    /* font-family: "Nunito", sans-serif; */
    /* font-family: "PT Sans Narrow", sans-serif; */
    font-family: 'EB Garamond', serif;
    font-weight: 450;
}

a {
    text-decoration: underline;
    color: var(--tx);
    transition: transform 0.1s ease;
    text-decoration-color: var(--tx-2);
}

a:hover {
    text-decoration: underline;
    text-decoration-color: var(--tx-2);
    color: var(--tx-2);
}

a:active {
    transform: translateY(1px);
}

.content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

article {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.post-content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.short-post {
    gap: 1rem;
}

.short-post .post-content {
    gap: 2rem;
}

article h1 {
    line-height: 2.4rem;
    text-align: center;
    /* text-wrap: balance; */
    text-wrap: pretty;
    /* font-size: 1.6rem !important; */
    font-size: 35px !important;
}

article video {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

article figure iframe {
    width: 100% !important; /* Full width */
    height: 340px; /* Adjust based on the width of the container and desired aspect ratio */
    border-radius: 12px;
}

.short-post p {
    font-size: 1.3rem;
    line-height: 1.8rem;
    margin-top: -12px;
    font-weight: 500;
}

article .date {
    color: var(--decoration-secondary);
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
}

article figure figcaption {
    color: var(--tx-2);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    font-style: italic;
}

article h2 {
    font-size: 1.4rem;
}

article .post-content > h2:not(:first-child) {
    margin-top: 1.5rem;
}

article .post-content p + figure {
    margin-top: 20px;
}

article .post-content figure img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

article a {
    text-decoration: none;
}

article a:hover {
    text-decoration: none;
}

article .post-content a {
    text-decoration: none;
}

article .post-content p a {
    color: var(--decoration);
}

article .post-content p a:hover {
    text-decoration: underline;
}

article .edit-link {
    font-size: 0.8rem;
    color: var(--tx-2);
}

article p code,
li code {
    background-color: var(--bg-2);
    border: 1px solid var(--bg-3);
    color: var(--tx-2);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8rem;
}

.button {
    font-family: 'Nunito', sans-serif;
    width: fit-content;
    background-color: var(--bg-2);
    color: var(--decoration);
    font-size: 0.8rem;
    padding: 4px 16px;
    border-radius: 12px;
}

.button:hover {
    color: var(--tx);
    background-color: var(--bg-3);
}

.content h1 {
    font-size: 1.6rem;
}

.content img {
    width: 100%;
    border-radius: 0.5rem;
}

mark {
    background-color: #fff5c3;
    color: #634700;
    padding: 0px 0px;
}

blockquote {
    border-left: 3px solid var(--ui);
    padding-left: 1rem;
    margin-left: 1rem;
    max-width: 70%;
}

.badge {
    line-height: 1;
    background-color: var(--bg-2);
    color: var(--decoration-secondary);
    font-weight: 700;
    padding: 4px 6px 3px 6px;
    font-size: 0.6rem;
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
}

.star-rating .active {
    color: var(--tx);
}

.star-rating .gold {
    color: gold !important;
}

.star-rating .inactive {
    color: var(--bg-3);
}

.title-subtitle {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 20px;
}

.title-subtitle span {
    font-size: 1.2rem;
    color: var(--tx-2);
}

/* Lists */
ul,
ol {
    padding-left: 0; /* Removes the default padding */
    margin-left: 0; /* Removes the default margin */
    /* list-style-position: inside; */
    margin-left: 2rem;
}

ul li::marker,
ol li::marker {
    display: inline-block;
    color: var(--decoration-secondary);
}

ul li,
ol li {
    margin-bottom: 0.4rem;
}

ul li:last-child,
ol li:last-child {
    margin-bottom: 0rem;
}

pre {
    padding: 1.5rem;
    border-radius: 16px;
    overflow: scroll;
    font-size: 0.8rem;
    line-height: 1.5;
}

:root {
    --bg: rgb(255, 252, 240);
    --bg-2: rgb(247, 243, 227);
    --bg-3: rgb(232, 228, 210);

    --decoration: #c25400;
    --decoration-secondary: #a6988b;

    /* --bg: rgb(255, 255, 255);
  --bg-2: rgb(245, 245, 245);
  --bg-3: rgb(235, 235, 235); */

    /* --ui: rgb(230, 228, 217);
  --ui-2: rgb(218, 216, 206);
  --ui-3: rgb(206, 205, 195); */

    --ui: rgb(230, 230, 230);
    --ui-2: rgb(216, 216, 216);
    --ui-3: rgb(206, 206, 206);

    /* --tx: rgb(16, 15, 15);
  --tx-2: rgb(111, 110, 105);
  --tx-3: rgb(183, 181, 172); */

    --tx: rgb(16, 15, 15);
    --tx-2: rgb(111, 111, 111);
    --tx-3: rgb(183, 183, 183);

    --blue-2: rgb(225, 239, 247);
    --blue-3: rgb(194, 205, 220);
    --blue-6: rgb(9, 44, 92);

    --shadow-color: 0deg 0% 72%;
    --shadow-elevation-low: 0.3px 0.4px 0.5px hsl(var(--shadow-color) / 0.37),
        0.5px 0.6px 0.7px -1.8px hsl(var(--shadow-color) / 0.29),
        1.1px 1.5px 1.8px -3.7px hsl(var(--shadow-color) / 0.21);
    --shadow-elevation-medium: 0.3px 0.4px 0.5px hsl(var(--shadow-color) / 0.39),
        0.7px 1px 1.2px -1.2px hsl(var(--shadow-color) / 0.32),
        2.1px 2.7px 3.2px -2.5px hsl(var(--shadow-color) / 0.26),
        5.5px 7.3px 8.6px -3.7px hsl(var(--shadow-color) / 0.2);
    --shadow-elevation-high: 0.3px 0.4px 0.5px hsl(var(--shadow-color) / 0.36),
        0.9px 1.2px 1.4px -0.5px hsl(var(--shadow-color) / 0.33),
        1.8px 2.3px 2.8px -1.1px hsl(var(--shadow-color) / 0.3),
        3.2px 4.2px 5px -1.6px hsl(var(--shadow-color) / 0.27),
        5.7px 7.5px 8.9px -2.1px hsl(var(--shadow-color) / 0.24),
        9.6px 12.6px 15px -2.6px hsl(var(--shadow-color) / 0.21),
        15.3px 20.2px 23.9px -3.2px hsl(var(--shadow-color) / 0.18),
        23.2px 30.6px 36.3px -3.7px hsl(var(--shadow-color) / 0.15);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: rgb(16, 15, 15);
        --bg-2: rgb(30, 30, 29);
        --bg-3: rgb(52, 52, 48);

        --ui: rgb(40, 39, 38);
        --ui-2: rgb(52, 51, 49);
        --ui-3: rgb(64, 62, 60);

        --tx: rgb(185, 183, 164);
        --tx-2: rgb(135, 133, 128);
        --tx-3: rgb(87, 86, 83);

        --decoration: #a74800;
        --decoration-secondary: #7d7165;

        --blue-2: rgb(9, 24, 40);
        --blue-3: rgb(32, 51, 77);
        --blue-6: rgb(164, 184, 209);

        --shadow-color: 0deg 0% 1%;
        --shadow-elevation-low: 0.5px 0.7px 1.1px hsl(var(--shadow-color) / 0.2),
            0.6px 0.9px 1.3px -1.2px hsl(var(--shadow-color) / 0.2),
            1px 1.8px 2.6px -2.5px hsl(var(--shadow-color) / 0.2);
        --shadow-elevation-medium: 0.3px 0.5px 0.7px
                hsl(var(--shadow-color) / 0.21),
            0.7px 1.4px 1.8px -0.8px hsl(var(--shadow-color) / 0.21),
            1.7px 3.3px 4.2px -1.7px hsl(var(--shadow-color) / 0.21),
            4px 8px 10.1px -2.5px hsl(var(--shadow-color) / 0.21);
        --shadow-elevation-high: 0.3px 0.5px 0.7px
                hsl(var(--shadow-color) / 0.2),
            1px 1.9px 2.4px -0.4px hsl(var(--shadow-color) / 0.2),
            1.7px 3.4px 4.3px -0.7px hsl(var(--shadow-color) / 0.2),
            2.8px 5.5px 6.9px -1.1px hsl(var(--shadow-color) / 0.2),
            4.4px 8.7px 11px -1.4px hsl(var(--shadow-color) / 0.2),
            6.8px 13.5px 17px -1.8px hsl(var(--shadow-color) / 0.2),
            10.2px 20.4px 25.7px -2.1px hsl(var(--shadow-color) / 0.2),
            15px 30px 37.7px -2.5px hsl(var(--shadow-color) / 0.2);
    }

    mark {
        background-color: #2a2300;
        color: #fff5c3;
        padding: 0px 0px;
    }
}

@media screen and (max-width: 480px) {
    article h1 {
        font-size: 28px !important;
        line-height: 34px;
    }
}