.category-box {
    min-height: 70vh;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
}

@media screen and (max-width: 50rem) {
    .category-box {
        grid-template-columns: auto;
    }

    h1 {
        margin-top: 0.5rem;
        margin-bottom: 0.7rem;
    }
}

.category-sidebar {
    background-color: #e0f0f0;
    padding: 2rem;
}

#bad-id-message {
    margin: 1em 0;
}

#bad-id-message span {
    margin: 1em 0em;
    padding: 0.2em 0.4em;
    background-color: #a00010;
    border-radius: 0.15em;
    color: #dee;
    font-weight: 500;
}

.text-field {
    font-family: NotoSansMono;
    margin: .5em 0;
    border: 1px solid black;
}

.text-field:user-invalid {
    border: 2px solid red;
}

.lookup-button {
    font-family: "Roboto Condensed";
    font-weight: 500;
    color: #000;
    background-color: #fff;
    border: 2px solid black;
    margin-left: .3em;
}

.lookup-button:hover {
	box-shadow: 2.5px 2.5px var(--hover-shadow-color);
}

.lookup-button:active:hover {
	box-shadow: 2.5px 2.5px var(--click-shadow-color);
}

.category-content {
    display: grid;
    background-color: #e0f0f0;
    grid-template-columns: repeat(auto-fill, 14rem);
    padding: 2rem;
    gap: 2rem;
}

.content-item {
    display: block;
    background-color: #bacaca;
    aspect-ratio: 1;
    text-align: center;
    padding: 1rem;
    text-decoration: none;
	box-shadow: 0.2rem 0.2rem #899;
    color: var(--strong-link-color);
}

.content-item:hover {
	box-shadow: 0.4rem 0.4rem var(--hover-shadow-color);
}

.content-item:active {
    color: var(--strong-link-pressed-color);
}

.content-item:active:hover {
	box-shadow: 0.4rem 0.4rem var(--click-shadow-color);
}

.content-item .img-pad {
    display: flex;
    margin: auto;
    justify-content: center;
    background-color: #fff;
    aspect-ratio: 1;
    border: 3px solid black
}

.content-item img {
    margin: auto;
    height: auto;
    width: 100%;
}

.content-item .item-name {
    font-size: 1.4rem;
    text-decoration: underline;
    margin-top: 0.85rem;
    margin-bottom: 0.5em;
}

.content-item .price {
    font-size: 1.3rem;
    font-weight: 500;
}

@media screen and (max-width: 30rem) {
    font-size: 1.18rem;
}