@layer reset {
    /* Box sizing rules */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    /* Prevent font size inflation */
    html {
      -moz-text-size-adjust: none;
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
    }

    /* Remove default margin in favour of better control in authored CSS */
    body, h1, h2, h3, h4, p,
    figure, blockquote, dl, dd {
      margin-block-end: 0;
    }

    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role='list'],
    ol[role='list'] {
      list-style: none;
    }

    /* Set core body defaults */
    body {
      min-height: 100vh;
      line-height: 1.5;
    }

    /* Set shorter line heights on headings and interactive elements */
    h1, h2, h3, h4,
    button, input, label {
      line-height: 1.1;
    }

    /* Balance text wrapping on headings */
    h1, h2,
    h3, h4 {
      text-wrap: balance;
    }

    /* A elements that don't have a class get default styles */
    a:not([class]) {
      text-decoration-skip-ink: auto;
      color: currentColor;
    }

    /* Make images easier to work with */
    img,
    picture {
      max-width: 100%;
      display: block;
    }

    /* Inherit fonts for inputs and buttons */
    input, button,
    textarea, select {
      font-family: inherit;
      font-size: inherit;
    }

    /* Make sure textareas without a rows attribute are not tiny */
    textarea:not([rows]) {
      min-height: 10em;
    }

    /* Anything that has been anchored to should have extra scroll margin */
    :target {
      scroll-margin-block: 5ex;
    }
}

:root {
    --text: #D8DE9A;
    --background: #161A14;
    --surface-1: #3B5A10;
    --surface-2: #f9923b;
    --glassy: color-mix(in oklab, white 18%, transparent);
    --strong-contrast: color-mix(in oklab, var(--surface-2), #000000 25%);
    --accented-color: var(--surface-1);
    --shadow: color-mix(in oklab, var(--surface-1), #ffffff 40%);
}

@layer base {

    .glassy-background {
        background: var(--glassy);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
    }

    .ruler {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid var(--surface-1);
        margin: 0.5em 0;
        padding: 0;
        width: 100%;
    }

    .heading-font {
        font-family: "Press Start 2P", system-ui;
        font-weight: 400;
        font-style: normal
    }

    body {
        background: var(--background);
        color: var(--text);
        font-family: "Google Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        font-variation-settings:
                "GRAD" 0;
    }

    .header {
        height: fit-content;
        & a {
            color: var(--strong-contrast);
            text-decoration: none;
        }

        & section {
            margin: 2em 0;
        }
    }

    .footer {
        display: grid;
        place-items: center;
        margin: 1em 0;
        font-size: 0.8rem;
    }

    #top-posts {
        display: flex;
        flex-direction: column;
        margin: 1em 0 0 0;
        gap: 20px;
    }

    blog-link {
        & span {
            display: inline-block;
            color: var(--text);
            text-decoration: underline;
            text-decoration-style: dotted;
            text-underline-offset: 10px;
            text-decoration-skip-ink: auto;
        }

        & a {
            text-decoration: none;
        }
    }

    blog-button {
        display: block;
        width: fit-content;

        & div {
            width: fit-content;
        }

        & label {
            background: var(--accented-color);
            color: var(--text);
            padding: 5px;
            border-radius: 3px;
            pointer-events: auto;
        }

        & label:hover {
            cursor: pointer;
        }

        & input {
            display: none;
        }
    }

    blog-navbar {
        & nav.nav-container {
            display: grid;
            grid-template-areas:
                        "nav-logo"
                        "nav-links";
            grid-template-columns: auto;
            padding: 10px 10px 15px;
            border-radius: 10px;
            margin-top: 10px;

            & .nav-logo {
                grid-area: nav-logo;
                display: flex;
                justify-content: center;
                column-gap: 10px;

                & img {
                    mix-blend-mode: multiply;
                    align-self: center;
                }
            }

            & .nav-links {
                grid-area: nav-links;
                display: flex;
                justify-content: center;
                gap: 20px;
                margin-top: 5px;
            }
        }
    }

    blog-title {
        color: var(--strong-contrast);
        font-family: "Press Start 2P", system-ui;
        font-weight: 400;
        font-style: normal;
        word-wrap: anywhere;

        & h1 {
            margin-bottom: 10px;
        }
    }

    blog-heading {
        color: var(--strong-contrast);
        font-family: "Press Start 2P", system-ui;
        font-weight: 400;
        font-style: normal;
        word-wrap: anywhere;
    }

    blog-image {
        & figcaption {
            margin-top: 10px;
            word-wrap: break-word;
        }
    }

    blog-metadata {
        color: var(--text);
        font-size: 15px;

        & .tag {
            color: var(--strong-contrast);
        }
    }

    blog-tags {
        & div {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            column-gap: 10px;
        }

        & span {
            display: flex;
            width: fit-content;
            column-gap: 2px;
            align-items: center;
            cursor: pointer;
        }
    }

    blog-paragraph {
        & p {
            line-height: 1.75;
        }
    }

    blog-quote {

        & > div {
            display: grid;
            width: 100%;
            grid-template-areas: "quoteSvg quote"
                                 "quoteSvg author";
            grid-template-columns: auto 1fr;
            margin: 15px 0;
        }

        & .quoteSvg {
            grid-area: quoteSvg;
            margin-right: 10px;

            & svg {
                width: 100px;
                opacity: 0.3;
            }
        }

        & .quote {
            grid-area: quote;
            word-wrap: break-word;
        }

        & .author {
            grid-area: author;
            font-size: 14px;

            & .name {
                color: var(--strong-contrast);
            }
        }
    }

    .see-more {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .top-post-row {
        display: grid;
        grid-template-areas:
                    "date title"
                    "tags tags";
        grid-template-columns: 100px auto;
        column-gap: 10px;

        & .date {
            grid-area: date;
            color: var(--strong-contrast);
            max-width: fit-content;
        }

        & .title {
            grid-area: title;
        }

        & .tags {
            grid-area: tags;
            display: flex;
            margin-top: 10px;
        }
    }

    #search-form {
        margin: 2em 0;
        display: grid;
        grid-template-areas:
                "filter"
                "submit";
        grid-template-rows: auto auto;
        row-gap: 20px;

        & .filter {
            grid-area: filter;
            display: grid;
            grid-template-areas:
                    "filter-tag-label  divider  filter-search-label"
                    "filter-tags       .        filter-search";
            grid-template-columns: 40% 20% 40%;
            column-gap: 20px;
            row-gap: 10px;

            & .filter-tag-label {
                grid-area: filter-tag-label;
            }

            & .filter-search-label {
                grid-area: filter-search-label;
            }

            & .divider {
                grid-area: divider;
            }

            & .filter-tags {
                grid-area: filter-tags;

                & .filter-tags-list {
                    display: flex;
                    flex-wrap: wrap;
                    max-height: 100px;
                    overflow-y: scroll;
                    scrollbar-width: none;

                    & blog-checkbox {
                        padding: 0 10px 0 0;
                    }
                }
            }

            & .filter-search {
                grid-area: filter-search;
                display: flex;
                flex-direction: column;
            }
        }

        & .submit {
            grid-area: submit;
            display: flex;
            column-gap: 10px;
        }
    }

    .footer {
        padding-top: 10px;

        & > p {
            margin-top: 5px;
        }
    }

    #waves > canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -10; /* Sends the canvas behind other elements */
        pointer-events: none; /* Allows clicks to pass through to content */
    }

    body[data-layout-screen="desktop"] {
        display: flex;
        flex-direction: column;
        margin: 10px 350px;

        & .footer {
            margin-top: auto;
        }
    }

    body[data-layout-screen="tablet"] {
        display: flex;
        flex-direction: column;
        margin: 10px 200px;

        & .footer {
            margin-top: auto;
        }
    }

    body[data-layout-screen="mobile"] {
        display: flex;
        flex-direction: column;

        & .footer {
            margin-top: auto;
            font-size: 10px;
        }

         & .squiggly-line {
             text-decoration-thickness: 1px;
         }

        & blog-link {
            & span {
                text-underline-offset: 5px;
            }
        }

        & #search-form {
            & .filter {
                grid-template-areas:
                    "filter-tag-label"
                    "filter-tags"
                    "divider"
                    "filter-search-label"
                    "filter-search";
                grid-template-columns: auto;
            }
        }

        & blog-paragraph {
            & p {
                line-height: 1.5;
            }
        }
    }
}