@import url("../fonts/inter/inter.css");

:root {
    color-scheme: light dark;
    --f-mono:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    --f-sans: "Inter";
    @supports (font-variation-settings: normal) {
        --f-sans: "InterVariable";
        font-optical-sizing: auto;
    }
    --f-heading: var(--f-sans);
    --f-body: var(--f-sans);
    --f-supporting: var(--f-mono);

    --c-bg: light-dark(rgb(255, 252, 240), rgb(16, 15, 15));
    --c-bg-sec: light-dark(rgb(242, 240, 229), rgb(28, 27, 26));
    --c-fg: light-dark(rgb(16, 15, 15), rgb(206, 205, 195));
    --c-outline: light-dark(rgb(230, 228, 217), rgb(40, 39, 38));
    --c-outline-hover: light-dark(rgb(218, 216, 206), rgb(52, 51, 49));
    --c-emphasis: light-dark(rgb(160, 47, 111), rgb(206, 93, 151));
    --c-faint: light-dark(rgb(183, 181, 172), rgb(135, 133, 128));

    scrollbar-gutter: stable;
}

body {
    margin-block: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 100vh;
    display: grid;
    grid-template-areas: ". content .";
    grid-template-columns: 1fr 70ch 1fr;

    padding-bottom: 1.5rem;

    background-color: var(--c-bg);
    color: var(--c-fg);
    font-family: var(--f-body), sans-serif;
}

p {
    text-wrap: pretty;
    font-family: var(--f-body), sans-serif;
}

main {
    z-index: 2;
    grid-area: content;
    max-width: min(60ch, 100vw);
}

ul {
    padding-left: 1rem;
}

h1 {
    font-weight: 800;
    font-family: var(--f-heading), sans-serif;
}

a {
    color: var(--c-emphasis);

    & h3 {
        color: var(--c-fg);
    }
}

div#atproto-leaflet {
    display: flex;
    flex-direction: column;
    container-type: inline-size;

    @container (width < 600px) {
        .entry {
            max-width: calc(100vw - 2rem);
        }
    }
}

.entry {
    transition: width 0.1s linear;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
    background-color: var(--c-bg-sec);

    padding: 0.5rem 0.7rem;
    outline: 2px solid var(--c-outline);

    &:hover {
        outline-color: var(--c-outline-hover);
    }

    &:not(:first-child) {
        margin-top: 1rem;
    }

    & .base-anchor {
        position: static;
        text-decoration: none;

        &::before {
            content: "";
            position: absolute;
            display: block;

            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    & .title {
        margin-top: 5px;
        font-family: var(--f-heading), sans-serif;
    }
}

@media screen and (width > 500px) {
    .wave-on-desktop::before {
        content: "👋 ";
    }
}

@media screen and (width < 800px) {
    body {
        padding-inline: 0;
        margin-inline: 1rem;
        display: block;
        width: 100vw;
    }
}

time {
    font-family: var(--f-supporting), monospace;
}

/* hide elements that are interactively shown */
.hidden {
    display: none;
}