@import url("https://trisua.com/public/style.css");
@import url("https://trisua.com/public/util.css");

:root {
    --base-hue: 240;
    --base-sat: 14%;

    /*--purple-1: hsl(341, 100%, 76%);
    --purple-2: hsl(341, 100%, 72%);
    --purple-0: hsl(341, 100%, 66%);
    --purple-1: hsl(341, 100%, 62%);
    --purple-2: hsl(341, 100%, 56%);
    --purple-2-5: hsl(341, 100%, 52%);
    --purple-2-75: hsl(341, 100%, 48%);
    --purple-3: hsl(341, 100%, 69%);
    --purple-4: hsl(341, 100%, 79%);
    --contrast-color-purple: hsl(0, 0%, 5%);*/
}

input,
.button {
    --h: 38px;
    height: var(--h);
}

@media screen and (max-width: 900px) {
    .desktop {
        display: none;
    }
}

#upload_button {
    --h: 80px;
    width: 35rem;
    max-width: 60dvw;
    color: hsl(100, 86%, 14%);
    border: solid 1px hsla(100, 75%, 37%, 50%);
    background: hsla(100, 75%, 37%, 25%);
    font-size: 1.5em;

    &:hover {
        border: solid 1px hsla(100, 75%, 37%, 60%);
        background: hsla(100, 75%, 37%, 30%);
    }

    &:is([data-theme="dark"] *) {
        color: hsl(100, 86%, 80%);
        border: solid 1px oklch(72.3% 0.219 149.579 / 50%);
        background: oklch(79.2% 0.209 151.711 / 25%);

        &:hover {
            border: solid 1px oklch(72.3% 0.219 149.579 / 60%);
            background: oklch(79.2% 0.209 151.711 / 30%);
        }
    }
}

.card:not(.no_shadow, .indent) {
    box-shadow: 0 0 4px 1px hsla(0, 0%, 0%, 50%);
}

nav {
    &:first-of-type {
        margin-top: var(--pad-4);
    }

    & ul.nav-list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        border-bottom: solid 2px var(--color-1-5);

        & .nav-item {
            background: transparent;
            color: inherit !important;
            width: max-content;
            padding: var(--pad-2) var(--pad-3);
            height: 28px;
            font-size: 14px;
            display: flex;
            align-items: center;
            font-weight: 600;

            &.active,
            &:hover {
                background: var(--color-1-5);
                color: var(--purple-3) !important;

                &:not([data-theme="dark"] *) {
                    color: var(--purple-2) !important;
                }
            }

            &::after {
                display: none;
            }
        }
    }
}

nav.secondary {
    & ul.nav-list {
        background: var(--color-1-5);
    }
}

.hidden {
    display: none !important;
}