@import url('min.css');

:root {
    --background-image-url: url(/assets/ui/bg/perlin.webp);
    --background-blend-mode: darken;
}

@media (prefers-color-scheme: light) {
    :root {
        --background-image-url: url(/assets/ui/bg/perlin_inv.webp);
        --background-blend-mode: lighten;
    }
}

body {
    background-image: var(--background-image-url);
    background-blend-mode: normal;

    & hr {
        box-sizing: border-box;
        filter: var(--random-paper-seed);
        background: var(--foreground-color);
        height: 5px;
    }
}

header {
    & #logo {
        color: var(--foreground-color);
    }

    & .paper:hover {
        color: var(--foreground-color);

        & .paper {
            background-color: transparent;
        }

        & .paper::before {
            background-color: var(--hover-color);
            color: var(--foreground-color);
            transition: all 0.1s ease-in;
        }
    }

}

    /* & h1 {
        color: var(--black-color);
        margin: 0;

        & a, & a:link, & a:visited {
            color: var(--black-color);
        }
    } */

main {
    background-color: var(--background-color);
    box-shadow: 0rem 0rem 5rem var(--background-color);
}

footer {
    footer.paper.compact {
        margin-inline: auto;
    }
}

a:visited {
    background-color: transparent;
}

a:hover {
    color: var(--black-color);
    background-color: var(--link-color);
    transition: all 0.1s ease-in;

    &:visited {
        background-color: var(--visited-color);
    }
}

.image-display {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;

    & img {
        width: calc((100% / 3) - 1%);
    }
}

nav#top-icons {
    width: calc(200% / 3);
    z-index: 200;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-inline: auto 0;
    padding: 0;

    & a.icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: fit-content;

        &:hover {
            background-color: transparent;
            color: var(--hover-color);

            & .paper::before {
                background-color: var(--hover-color);
                color: var(--foreground-color);
                transition: all 0.1s ease-in;
            }
        }

        & .icon-button.paper {
            margin: 0rem;
            /* padding: 0rem; */
            /* margin-inline: auto; */
            aspect-ratio: 1 / 1;
            min-width: fit-content;

            &::before {
                padding: 0rem;
                /* margin: 0rem; */
                /* margin-inline: auto; */
            }

            & img.icon-image {
                padding: 0.5rem;
                margin: 0 0.5rem;
                min-width: 100%;
            }
        }

        & p.icon-name {
            font-size: 80%;
            text-align: center;
            /* margin: 1rem 0 0 0; */
        }
    }
}

#daily-drawings {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    & img {
        width: 100%;
        background-color: var(--white-color);
    }
}

#daily-drawing {
    display: flex;
    width: min(640px, 100%);
    margin-inline: auto;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-inline: var(--double-margin-width);

    & img {
        background-color: var(--white-color);
        /* margin-inline: auto; */
        width: 100%;
        image-rendering: optimizequality;
        image-rendering: high-quality;
        transform: rotate(var(--slight-rotation));
    }

    & #daily-info {
        width: 100%;
        display: flex;
        margin-block: 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;

        & h1 {
            margin: 0;
        }

        & .paper {
            margin: -1rem -1rem 0 0;
            text-align: center;


            & p {
                margin: 0;
                align-self: center;
                padding-inline: 0.5rem;
                /* alignment is okay for three characters but more or less will break it; somehow the solution is to have # symbol in front? */
            }
        }
    }
}

#daily-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 50%;

    & a, & a:link, & a:visited {
        text-decoration: none;
        color: var(--foreground-color);
        font-size: 200%;
    }
}


.paper {
    --background-color: var(--white-color);
    --foreground-color: var(--black-color);
    --paper-seed: var(--random-paper-seed);
    margin: 0 -1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: calc(100% + var(--double-margin-width));
    /* width: fit-content; */
    z-index: 10;
    background: transparent;
    color: var(--foreground-color);
    padding: var(--margin-width);

    & > * {
        margin: var(--margin-width);
        /* border: red 1px solid; */
    }

    &::before {
        --border-color: var(--foreground-color);
        --shadow-color: var(--foreground-color);
        filter: var(--paper-seed);
        content: '';
        z-index: -10;
        position: absolute;
        padding: var(--margin-width);
        box-sizing: border-box;
        box-shadow: var(--shadow-color) 5px 5px;
        border: 3px solid var(--border-color);
        background-color: var(--background-color);
        width: calc(100% - var(--double-margin-width));
        height: calc(100% - var(--double-margin-width));
        /* border-radius: 5px; */
    }

    /* the lead class makes paper elements look like lead pencil */
    &.lead {
        --foreground-color: var(--gray-color);
    }

    &.lead::before {
        --border-color: var(--gray-color);
        --background-color: transparent;
        --shadow-color: var(--gray-color);
    }

    /* the black class turns the paper elements into white on black */
    &.black {
       --foreground-color: var(--white-color);
    }

    &.black::before {
        --border-color: var(--white-color);
        --background-color: var(--black-color);
        box-shadow: unset;
    }

    /* the compact class tells the paper element to fit to content */
    &.compact {
        width: fit-content;
    }

    /* the circle class tells the paper element to act as a circle instead of a box (this isn't really working yet) */
    &.circle {
        width: fit-content;
        padding-inline: var(--margin-width);
    }

    &.circle::before {
        margin: 0;
        padding: 1.5rem;
        border-radius: 100%;
        top: 0.1rem;
    }

    /* the overflow class tells the paper element to resize by margins that let the text inside stay aligned to the other text on the page at full width */
    &.overflow {
        width: calc(100% + var(--double-margin-width));
        padding: unset;
    }

    &.overflow::before {
        width: calc(100% + var(--double-margin-width));
        padding: unset;
    }

    /* the centered class tells the paper element to center itself by margin-inline auto; useful for compact */
    &.centered {
        margin-inline: auto;
    }

    &.seed-1 {
        --paper-seed: url(#turb_1);
    }

    &.seed-2 {
        --paper-seed: url(#turb_2);
    }

    &.seed-3 {
        --paper-seed: url(#turb_3);
    }

    &.seed-4 {
        --paper-seed: url(#turb_4);
    }

    &.seed-5 {
        --paper-seed: url(#turb_5);
    }

    &.seed-6 {
        --paper-seed: url(#turb_6);
    }

    &.seed-7 {
        --paper-seed: url(#turb_7);
    }

    &.seed-8 {
        --paper-seed: url(#turb_8);
    }

    &.seed-9 {
        --paper-seed: url(#turb_9);
    }

    &.seed-10 {
        --paper-seed: url(#turb_10);
    }

}