@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

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

img {
    display: block;
}

ul,
ol {
    margin-left: 1rem;
}

li {
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

html {
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    --clr: 275;
    --bg: hsl(var(--clr), 100%, 25%);
    --bgl: hsl(var(--clr), 100%, 98%);
    font-family: 'system-ui', sans-serif;
    font-size: 15px;
    color: #2a2b2c;
}

.container {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100dvh;
    max-width: 1200px;
    margin: auto;
}

header {
    background-color: white;
    padding: 0.5rem 1rem;
    position: sticky;
    display: flex;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 10;
}

main {
    flex: 1 0 0;
}

footer {
    padding: 1rem;
}

.posts {
    display: flex;
    flex-direction: column;
    gap:1rem;
}

.post {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* border-bottom: 1px solid var(--bg); */
    background-color: var(--bgl);
    padding-bottom: 1rem;
    margin-bottom: 1rem;

    &>* {
        padding-inline: 1rem;
    }

    & .title,
    & p,
    & b {
        line-height: 1.5;
    }

    & .by {
        margin-bottom: -1rem;
        background: linear-gradient(to right, hsl(var(--clr), 50%, 80%), transparent);
        padding: 0.5rem 1rem;
        display: flex;
        gap: 1rem;
        align-items: center;

        & img {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            box-shadow: 0 0 4px 4px white;
        }

        & .username {
            font-size: 12px;
        }
    }

    & .title {
        background-color: var(--bg);
        color: white;
        padding: 1rem;
        padding-block: 0.5rem;
        position: sticky;
        top: 48px;
        left: 0;
        z-index: 1;
        display: flex;
        gap: 1rem;
    }

    & ul {
        margin-left: 1.25rem;
        margin-block: unset;
    }

    & .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        row-gap: 0.5rem;
        color: #8a2be2cc
    }
}