:root {
    --sky-color: oklch(0.842 0.079 245.947); /* #a1d1fc */
    --sky-color-light: oklch(0.9 0.05 245.947);
    --grass-color: oklch(0.727 0.175 131.283); /* #7ebc35 */
    --grass-color-dark: oklch(0.6 0.175 131.283);
    --grass-color-darker: oklch(0.5 0.175 131.283);
    /* Complementary color of --sky-color */
    --earth-color: oklch(0.28 0.06 71.491); /* #3b2300 */
    /* triadic paletton */
    --white: oklch(1 0 0);
    --pink: oklch(0.863 0.109 334.691); /* #ffb7ef */
    --yellow: oklch(0.961 0.138 105.627);
    --green: oklch(0.92 0.177 136.335);

    --text-color: var(--earth-color);
    --player-btn-bg: var(--sky-color-light);
}

@font-face {
    font-family: aoharu;
    src: url("./aoharu-marker-mini.ttf") format("truetype"),
         url("./aoharu-marker-mini.woff") format("woff");
}

@font-face {
    font-family: Feltpen;
    src: url("./Feltpen.ttf") format("truetype"),
         url("./Feltpen.woff") format("woff"),
         url("./Feltpen.woff2") format("woff2");
}

body {
    --font: "aoharu", Feltpen, cursive;

    background: linear-gradient(to bottom, #fff, var(--sky-color) 15%, var(--sky-color) 80%, var(--sky-color-light) 90%);
    font-family: var(--font);
    font-weight: 400;
    color: var(--text-color);
    display: grid;
    grid-template-columns: auto 66vw auto;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;

    & > * {
        grid-column: span 3;
    }

    main {
        grid-column: 2;
        display: grid;
        place-items: center;
        text-align: center;


    }
}

footer {
    color: var(--white);
    display: grid;
    text-align: center;
    align-items: end;
    padding: 1rem;
}

h1 {
    font-family: var(--font);
    font-size: 1.5rem;
    color: var(--white);
    text-shadow: 0 1px 5px var(--white);
    letter-spacing: -0.08em;
    font-weight: 400;
}

a {
    text-decoration-thickness: 1px;
    text-decoration-style: dotted;
    text-decoration-skip-ink: all;
    text-underline-offset: 2px;
}

#logo {
    padding-block-start: 5vh;
    grid-column: span 3;
    width: 85vw;
    max-width: 960px;
    place-self: center;
    margin: 0 auto;
}

.grass {
    clip-path: url(#clip-grass);
    background: linear-gradient(to bottom, var(--grass-color), var(--grass-color-dark));
    height: 15vh;

    @media (max-width: 400px) {
        clip-path: none;
    }
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.player {
    width: clamp(220px, 50vw, 600px);
    display: flex;
    flex-direction: column;
    align-items: center;
    place-self: center;
    justify-content: center;
    gap: 1rem;
    padding: 16px;
    border: 6px solid var(--white);
    outline: 1px solid var(--sky-color);
    border-radius: 2px;
    box-shadow: 6px 6px 0 var(--pink);

    .file {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
}

.player svg {
    filter: drop-shadow(2px 2px 0 var(--white));
}

.player p {
    font-family: 'Zen Loop', sans-serif;
    font-weight: bold;
    font-size: clamp(21px, 19.5px + 0.4688vw, 27px);
    text-align: center;
    opacity: 0.7;
    color: var(--grass-color-darker);
}

.player-ctrls {
    display: flex;
    align-items: center;
    gap: 1rem;

    button {
        aspect-ratio: 1 / 1;
        background: var(--player-btn-bg);
        border: 1px solid var(--white);
        border-radius: 2px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;

        &:hover {
            box-shadow: 3px 2px 0 var(--white);
        }

    }

    .download-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        aspect-ratio: 1 / 1;
        background: var(--player-btn-bg);
        padding-inline: 6px;
        border: 1px solid var(--white);
        border-radius: 2px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;

        &:hover {
            box-shadow: 3px 2px 0 var(--white);
        }
    }
}

[data-hover-popover="play-pause-popover"] {
    anchor-name: --playpause;
}
#play-pause-popover {
    position-anchor: --playpause;
}

[data-hover-popover="download-popover"] {
    anchor-name: --download;
}
#download-popover {
    position-anchor: --download;
}

[data-download-confirm="download-confirm"] {
    anchor-name: --download-confirm;
}
#download-confirm {
    position-anchor: --download-confirm;
}

.tooltip,
.dialog {
    inset: auto;
    position-area: block-start;
    position-try-fallbacks: flip-block;
    margin-block: 0.5rem;
    font-family: "Zen Loop", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    border: 1px solid var(--white);
    background-color: var(--sky-color-light);
    color: var(--earth-color);
    border-radius: 8px;
    box-shadow: 2px 2px 0 var(--pink);
    opacity: 0;
    translate: 0 -30px;

    transition-property: display, overlay, opacity, translate;
    transition-behavior: allow-discrete;
    transition-duration: 0.5s;

    &:popover-open {
        opacity: 1;
        translate: 0 0;

        @starting-style {
            opacity: 0;
            translate: 0 30px;
        }
    }
}

@keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}

.animated {
    width: clamp(220px, 33vw, 600px);
    margin-block: auto;
    animation: squiggly-anim 0.5s linear infinite;
    /*filter: drop-shadow(2px);*/
    img {
        filter: drop-shadow(1px 1px 4px var(--white));
    }
}