header {
    filter: invert();
}

header,
ul#items li b,
#thebest[open].sold::after {
    color: #000;
    mix-blend-mode: exclusion;
}

header select,
ul#items li b,
#thebest[open].sold::after {
    background: #fff;
}

#thebest #size {
    background: #000;
    color: #fff;
}

#edit li button {
    border: none;
    outline: none;
}

#thebest[open].sold::after {
    content: "Sold Out";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

input[type="radio"],
#thebest #pre[hidden],
#thebest #next[hidden],
#items h2[hidden],
#items li[hidden] {
    display: none;
}

#items ol li p strong,
#items ol img,
#items details summary span,
#all a {
    display: block;
}

#org,
#thebest[open],
#thebest nav,
#secret,
#items h2,
#items ruby,
#items ol li,
#edit li,
footer nav {
    display: flex;
}

header,
#org,
#thebest[open],
footer nav {
    flex-wrap: wrap;
}

#secret {
    flex-flow: column;
    justify-content: space-between;
}

#items ruby {
    flex-flow: column-reverse;
}

#edit li {
    align-items: baseline;
}

#items h2 {
    align-items: end;
}

#items h2 time {
    align-self: anchor-center;
}

#items h2,
#thebest[open],
#items details summary span {
    justify-content: space-between;
}

#items ol li,
#edit li {
    gap: 1rem;
}

#org {
    gap: 0.5rem;
    place-items: end;
}

footer nav {
    gap: 0.25rem;
}

ul#items li,
ul#items li p,
#thebest #pre,
#thebest #next,
#thebest #close {
    display: grid;
    place-content: center;
}

#secret a,
#thebest #size {
    display: inline;
}

#back,
#thebest button {
    border: none;
    outline: none;
}

#secret a,
#edit li button {
    border-bottom: 0.1rem solid;
}

#thebest article,
#thebest nav,
#thebest #close {
    color: #000;
    filter: invert(1);
    mix-blend-mode: difference;
}

#secret h3,
#secret p {
    text-shadow:
        0.11rem 0.11rem 0 #111,
        0.22rem 0.22rem 0 #111;
}

#price,
#pre,
#next,
#close {
    text-shadow:
        0.11rem 0.11rem 0 #ccc,
        0.22rem 0.22rem 0 #ccc;
}

#thebest #text,
#items details summary span {
    float: right;
}

#items details ol {
    clear: both;
}

#thebest #addtocart {
    text-align: left;
}

#all,
#items ruby b,
#items ruby rt {
    text-align: center;
}

#all a,
#items h2 b {
    text-align: justify;
}

#all a,
#items h2 b,
#items ruby b,
#items ruby rt {
    text-align-last: justify;
}

#items h2 strong,
#secret strong,
#all a code {
    display: inline-block;
    transform: scale(1, 1.23);
}

#thebest[open] {
    align-content: space-between;
    border-radius: 1rem;
    background-position: center;
    background-size: contain;
    width: calc(100% - 1rem);
    height: calc(100dvh - 1rem);
}

ul#items li.sold,
#items ol input[type='checkbox'] {
    user-select: none;
    pointer-events: none;
}

#items ol input[type='checkbox'] {
    width: 1.23rem;
    height: 1.23rem;
    margin: 0.5rem 0 0 auto;
}

#thebest #addtocart img {
    width: auto;
    height: 1.75rem;
}

#edit li input[type="text"] {
    width: 5rem;
}

#thebest #pre,
#thebest #next,
#thebest #close {
    width: 4.5rem;
    height: 4.5rem;
}

#back,
#items,
#items ol,
#items ol img,
#edit,
#edit li button,
#news,
#thebest button {
    padding: 0;
}

#items h2,
#items ruby rt {
    padding: 0.25rem 0.5rem;
}

#edit li input[type="date"] {
    padding: 0.25rem;
    width: 7.5rem;
}

#edit li {
    padding: 0.25rem 0;
}

#org,
#thebest,
#thebest article,
#secret h3 {
    padding: 0.5rem;
}

#items ol li p strong {
    padding: 0.5rem 0;
}

#all a {
    border-bottom: dotted 0.25rem;
    padding-top: 0.5rem;
    width: 100%;
}

ul#items li b,
#thebest[open].sold::after {
    padding: 0 0.25rem;
}

#all,
#secret {
    padding: 2.25rem 0.5rem 1rem;
}

#back,
#items,
#items ol,
ul#items li,
#items h2,
#items ol img,
#items ol li p,
#secret h3,
#edit,
#edit li button,
#edit li input[type="date"],
#news,
#thebest #text {
    margin: 0;
}

#news li {
    margin: 0.5rem;
}

#thebest #text,
#thebest h2 {
    margin: 0 0 1rem;
}

#addtocart {
    margin-top: 1.5rem;
}

#thebest button {
    margin-top: 2rem;
}

#items ol li {
    margin: 0 0.5rem 0.5rem;
}

#secret a,
#secret b,
#secret strong {
    margin: 0.25rem;
}

#secret {
    margin: auto;
}

#secret p {
    margin: 1rem auto;
}

#edit li button {
    margin-left: auto;
}

#thebest article h2,
#thebest article form {
    margin: 0 auto 1rem;
    max-width: calc(100vh - 5rem);
}

#items,
#items ol,
#items ruby,
#edit,
#org,
#all,
#secret,
#thebest article {
    width: 100%;
}

#items h2 img {
    width: auto;
    height: 2.22rem;
}

#items h2 b {
    min-width: calc(100% - 17.5rem);
}

#all a img {
    height: 2.5rem;
}

#secret img {
    filter: brightness(1) invert(1);
    height: 1.75rem;
}

#secret {
    max-width: 100vh;
    height: 100svh;
}

#news {
    overflow: auto;
    height: calc(100svh - 10rem);
}

#secret p {
    width: max-content;
}

ul#items li,
#items h2 strong,
#thebest #addtocart,
#thebest[open].sold::after {
    font-family: 'New York', Times, serif;
}

#edit li input[type="date"] {
    font-family: inherit;
}

#thebest #pre,
#thebest #next,
#thebest #close {
    font-size: 321%;
}

#all,
#items details summary,
#secret h3,
#addtocart,
#remove,
#thebest[open].sold::after {
    font-size: 200%;
}

#items h2,
input[type="radio"]:checked+label {
    font-size: 150%;
}

ul#items li,
#all rt b,
#secret a,
#addtocart b,
#remove b {
    font-size: 123%;
}

#edit li button,
#back,
#secret summary {
    font-size: 111%;
}

#thebest #addtocart rt {
    font-size: 75%;
    text-align: left;
}

#items h2 time,
#price s {
    font-size: 55%;
}

#thebest #addtocart {
    font-weight: 900;
}

#thebest #text {
    font-weight: 600;
}

#items h2,
#items h2 b,
#items ol li p strong,
#secret h3 {
    font-weight: 500;
}

ul#items,
ol#items,
#items ol,
#news {
    list-style: inside none;
}

#items ol {
    columns: 30rem auto;
}

#items ol li {
    break-inside: avoid;
}

#items ol img {
    width: calc(50% - 1rem);
}

#instagram form,
ul#items li,
ol#items li {
    background-position: center;
    background-repeat: no-repeat;
}

#instagram form {
    background-size: contain;
}

#instagram form details {
    mix-blend-mode: exclusion;
}

ul#items li,
ol#items li {
    background-size: cover;
    background-color: #111;
}

ul#items li,
ol#items li {
    aspect-ratio: 1 / 1;
    float: left;
}

ul#items li:hover {
    cursor: pointer;
}

ul#items li {
    width: calc(100% / 5);
}

@media screen and (min-width: 1250px) {
    ul#items li:nth-of-type(5n) {
        float: left;
        width: calc(100% / 5 * 2);
    }

    ul#items li:nth-of-type(5n + 2) {
        float: right;
        width: calc(100% / 5 * 2);
    }
}

@media screen and (max-width: 1250px) {
    ul#items li {
        width: calc(100% / 4);
    }

    ul#items li:nth-of-type(5n) {
        float: left;
        width: calc(100% / 4 * 2);
    }

    ul#items li:nth-of-type(5n + 2) {
        float: right;
        width: calc(100% / 4 * 2);
    }
}

@media screen and (max-width: 1000px) {

    ul#items li,
    ul#items li:nth-of-type(5n),
    ul#items li:nth-of-type(5n + 2) {
        width: calc(100% / 3);
    }

    ul#items li:nth-of-type(6n) {
        float: left;
        width: calc(100% / 3 * 2);
    }

    ul#items li:nth-of-type(6n + 3) {
        float: right;
        width: calc(100% / 3 * 2);
    }
}

@media screen and (max-width: 750px) {
    #thebest #text {
        float: none;
        clear: both;
    }

    #thebest article {
        height: calc(100% - 7.5rem);
    }

    #thebest article form {
        position: relative;
        height: 100%;
    }

    #thebest #addtocart {
        position: absolute;
        bottom: 1rem;
    }
}

@media (orientation: portrait) {
    #secret {
        max-height: calc(100vw * 1.55);
    }

    #news {
        overflow: auto;
        max-height: calc(100vw * 1.55 - 11.111rem);
    }
}

#secret {
    color: #fff;
    position: relative;
    z-index: 1;
}