.store-div {
    border: 3px solid gray;
    vertical-align: bottom;
    display: inline-block;
    margin: 1em 0 0 1em;
}

#the-store {
    margin-left: 0;
    padding-bottom: 1em;
}

.store-img {
    height: auto;
    display: block;
    border-top: 3px solid grey;
    aspect-ratio: 800 / 1280;
    object-fit: contain;
}

.store-display {
    display: grid;
    grid-template-columns: repeat(auto-fill, 20em);
    gap: 3ch;
}

.border {
    border: 3px solid gray;
}

form.border {
    padding: 0.5em 0.5em 0.5em 0;
    border-bottom: none;

    summary {
        padding-left: 0.5em;
    }
}

.filterOpts {
    padding-left: 0.5em;
    padding-top: 0.5em;
}

.altUniStyle {
    margin-bottom: 0;
    padding-left: 0.5em
}

.padleft {
    padding-left: 0.5em;
}

.alt-uni {
    padding: 0.5em 0.5em 0.5em 0;
    border-bottom: none;

    summary {
        padding-left: 0.5em;
    }

    .div {
        width: 10em;
    }
}

details[open] > summary {
    padding-bottom: 0.5em;
    border-bottom: 3px solid gray;
}

.charname {
    margin: 0;
    font-size: 1em;
    padding: 0.5em;
    overflow-x: scroll;
    font-weight: normal;
}

.FId {
    padding: 1ch;
    border-top: 3px solid #7c7c7c;
}

.table-center > table {
    width: 100%;
}

.hr-border {
    margin: 1em 0 calc(1em - 0.5em) 0;
}

.h2-border {
    padding-left: 0.5em;
    margin: 0.5em 0 0 0;
}

.h2-border:not(.h2-border:first-child) {
    border-top: 3px solid #7c7c7c;
    padding-top: 0.5em;
}

.margin-tb > li {
    margin: 1ch 0;
}

.grid-3x {
    display: inline-grid;
    grid-template-columns: auto;
}

body {
    /*default: 20em;*/
    --width: 10em;

    .store-div {
        margin: 0.5em 0 0 0.5em;
    }

    .store-big {
        width: 20em;
    }

    &.smallest {
        --width: 7em;

        img {
            border: none;
        }
    }

    &.toosmall {
        --width: 5em;
    }

    .smaller {
        --width: 10em;
    }

    .store-img {
        width: var(--width);
    }

    &.larger .store-img {
        width: 20em;
    }

    .charname {
        width: calc(var(--width) - 2ch);
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .store-div {
        vertical-align: bottom;
    }

    &.inverted {
        main img {
            filter: invert(100%);
        }
    }
}

.noborder {
    border: none;
}

.noborder-top {
    border-top: none;
}

.em10 {
    width: 10em;
}

.ShadowBoxedHover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /*noinspection CssInvalidFunction*/
    --box-color: attr(data-c type(<color>), #00a8f3);
}

/*noinspection CssInvalidPropertyValue, CssInvalidFunction*/
@supports not (x: attr(x type(*))) {
    .ShadowBoxedHover {
        --box-color: #00a8f3;
    }
}

.ShadowBoxedHover:hover {
    box-shadow: 5px 5px 4px var(--box-color);
    transform: translate(-4px, -4px);
}

.introImage.uni {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 84vh;
    box-sizing: border-box;
    aspect-ratio: 800 / 1280;
    border: 3px solid grey;
}

.center {
    text-align: center;
}