@font-face {
    font-family: Giphurs;
    src: url("/assets/Giphurs-342e58fc.woff2") format(woff2) tech(variations);
    font-weight: 100 1000;
}

@font-face {
    font-family: Podkova;
    src: url("/assets/Podkova-b55a7577.ttf") format(opentype) tech(variations);
    font-weight: 400 800;
}

@font-face {
    font-family: Playwrite;
    src: url("/assets/PlaywriteHR-9aee8bc7.ttf") format(opentype) tech(variations);
    font-weight: 100 400;
}


/* Root */

:root {
    font-family: Giphurs, sans-serif;
    font-size: clamp(1em, 2vw, 1.5em);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;

    background: var(--neutral-color-900);
    color: var(--neutral-color-100);

    & > header {
        width: 100%;
        padding: var(--length-100) var(--length-150);

        background: var(--neutral-color-800);

        display: flex;
        flex-flow: row wrap;
        align-items: baseline;
        gap: var(--length-50) var(--length-150);

        & nav {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--length-100);

            font-size: var(--font-size-1125);

            & a {
                text-decoration: none;
                color: var(--primary-color-100);

                @media (hover: hover) {
                    &:hover {
                        color: var(--primary-color-400);
                    }
                }
            }
        }

        & .account {
            margin-inline-start: auto;
        }
    }
}


/* Content sectioning */

h1, h2, h3, h4, h5, h6 {
    font-family: Podkova, serif;
    margin-block-end: var(--length-50);
}

h1 {
    font-size: var(--font-size-2250);
    font-weight: 800;
}

h2 {
    font-size: var(--font-size-1875);
    font-weight: 700;
}

h3 {
    font-size: var(--font-size-1500);
    font-weight: 625;
}

h4 {
    font-size: var(--font-size-1250);
    font-weight: 575;
}

h5 {
    font-size: var(--font-size-1125);
    font-weight: 550;
}

h6 {
    font-size: var(--font-size-1125);
    font-weight: 525;
}


hgroup {
    margin-block-end: var(--length-25);
}


main {
    width: 100%;
    max-width: var(--length-6000);
    padding: var(--length-100);
}


article {
    padding: var(--length-50) var(--length-75);
    border-radius: var(--length-25);

    background: var(--neutral-color-800);
    border-inline-start: var(--length-25) solid var(--primary-color-500);

    break-inside: avoid;

    h1, h2, h3, h4, h5, h6 {
        font-size: var(--font-size-1500);
        font-weight: 800;
    }
}


/* Text block content */

blockquote {
    font-style: italic;
}


/* Inline text semantics*/

a {
    text-decoration: none;
    color: currentColor;

    p & {
        &:any-link {
            font-weight: 550;
            color: var(--primary-color-300);
        }

        @media (hover: hover) {
            &:hover {
                color: var(--primary-color-400);
                text-decoration: underline;
            }
        }
    }
}


/* Embedded content */

svg {
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-linecap: round;
}


/* Forms */

    button {
        border: none;

    cursor: pointer;
}


/* Custom elements */

turbo-frame {
    display: contents;
}


/* Classes */

.logo {
    text-decoration: none;
    font-family: Playwrite, serif;
    font-size: var(--font-size-1500);
    white-space: nowrap;

    color: var(--primary-color-200)
}

.account {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--length-100);
    align-items: center;
}

.masonry {
    margin-block: var(--length-50);

    column-width: var(--length-2400);
    gap: var(--length-75);

    & > * ~ * {
        margin-block-start: var(--length-100);
    }
}

.caption {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.badge-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    gap: var(--length-50);
}

.badge {
    width: fit-content;
    padding-block: var(--length-50);
    padding-inline-start: var(--length-75);
    padding-inline-end: var(--length-75);
    border-radius: var(--length-1200);

    background: var(--neutral-color-700);
    color: var(--neutral-color-100);

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--length-50);

    &.heart {
        background: var(--accent-color-800);
        color: var(--accent-color-200);
    }

    a&,
    button& {
        text-decoration: none;

        @media (hover: hover) {
            &:hover {
                transform: translateY(calc(-1 * var(--length-10)));
            }
        }

        &:active {
            transform: translateY(var(--length-10));
        }
    }
}

.icon {
    height: var(--font-size-1125);
}