@layer base {
    html {
        background: white;
    }

    body {
        font-family: var(--font-sans);
        color: var(--color-fg);
        font-size: var(--font-size);
        display: flex;
        flex-direction: column;
        min-width: fit-content;
        min-height: 100vh;
        font-weight: var(--font-weight-semibold);
    }

    @keyframes valueGlare {
        0% {
            /* transform: translateX(-100%); */
            background-position: 100%;
        }
        100% {
            background-position: -100%;
            /* transform: translateX(100%); */
        }
    }

    .progress {
        appearance: none;
        width: 100%;
        height: 1em;
        overflow: hidden;
        display: grid;

        border-radius: calc(infinity * 1px);
        border: var(--panel-border);
    }
    .progress::before {
        content: '';
        grid-column: 1/-1;
        grid-row: 1;
        height: 100%;
        width: 100%;
        background-size: 200%;
        background-image: linear-gradient(135deg, #4facfe 0%, #4facfe 47%, #4facfe80 50%, #4facfe80 53%, #4facfe 56%, #4facfe 100%);
        background-position: -100%;
        animation: valueGlare 2s linear infinite;
    }
    .progress::after {
        content: '';
        grid-column: 1/-1;
        grid-row: 1;
        width: calc((1 - var(--progress)) * 100%);
        transition: width 1s ease;
        height: 100%;
        margin-left: auto;
        background: white;
        /* z-index: 1; */
    }
    progress::-webkit-progress-bar {
        background: transparent;
        min-height: 100%;
        display: block;
        /* display: block; */
        /* border-radius: calc(infinity * 1px); */
        /* border: 1px solid var(--color-border); */
        /* overflow: hidden; */
        /* height: .5em; */
        /**/
    }
    progress::-webkit-progress-value {
        /* background: red; */
        appearance: none;
        transition: width 0.3s ease;
        min-height: 100%;
        display: block;
        background: linear-gradient(90deg, #4facfe 0%, #4facfe 49%, black 50%, black 51%, #4facfe 52%, #4facfe 100%);
        background-size: 300% 300%;
        /* background-position: -100% 0; */
        background-repeat: no-repeat;
        /**/
    }

    body:has(dialog[open]:modal) {
      filter: blur(4px);
    }

    main:not(.undecorate) {
        margin-block: var(--space-xxx-large);
        margin-inline: auto;
        --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
        padding-inline: var(--main-padding);
    }

    h1 {
        font-size: var(--font-size-xxx-large);
        font-weight: var(--font-weight-bolder);
    }

    h2 {
        font-size: var(--font-size-xx-large);
        font-weight: var(--font-weight-bolder);
        line-height: 120%;
    }

    * {
        line-height: normal;
    }

    p {
        line-height: 1.3em;
    }

    ::selection {
      /* background: var(--color-golden); */
    }

    a:not(.undecorate) {
      color: var(--color-blue);
      font-weight: var(--font-weight-bolder);
      text-decoration: underline;
      text-decoration-thickness: from-font;
      transition: color var(--transition);
    }

    b,
    strong {
      font-weight: var(--font-weight-bolder);
    }

    i,
    em {
      font-style: italic;
    }

    img,
    source,
    video {
      height: auto;
      max-width: 100%;
      width: 100%;
    }

    input, textarea {
        color: var(--color-fg);
    }

    hr {
        border-bottom: 1px solid var(--color-border);
    }
    code {
        font-family: monospace;
    }

    @media(hover: hover) {
      a:not(.undecorate) {
          transition: color var(--transition);
          &:focus,
          &:hover {
            color: var(--color-blue-hover);
          }
      }
    }
}