.opLegend {
    background-image: url("/assets/marble.png");
    margin: 5px;
    padding: 5px;
    border: 5px outset gold;
}
.opLegend ol {
    padding: 0px;
    margin: 0px;
    display: grid;
    grid-template-columns: 50% 50%;
}

.opLegend ol li {
    box-shadow: 0px 0px 3px rgb(0, 0, 0) inset;
    background-color: rgba(0, 0, 0, 0.082);
    list-style-type: none;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(18, min-content);
    place-items: center;
    margin: 3px;
}

.opLegend ol li div {
    font-family: monospace;
    font-weight: bolder;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    text-shadow: 0px 2px 0px rgb(255, 185, 185), 2px 0px 0px rgb(255, 185, 185);
}

.opLegend ol li img {
    width: 100%;
    min-width: 50px;
    max-width: 75px;
    background-image: url("/assets/shrug.png");
    background-position: center;
    background-size: calc(100% - 12px) calc(100% - 12px);
    background-repeat: no-repeat;
}

.opimage {
    /* border: 25px solid transparent; */
    box-sizing: border-box;
    margin: 2px;
    flex-grow: 1;
    max-height: 75px;
    min-height: 25px;
    max-width: 75px;
    min-width: 25px;
    padding: 0px;
    display: grid;
}
.opimage > * {
    grid-area: 1/1;
}

.overlay{
    max-height: 75px;
    min-height: 25px;
    max-width: 75px;
    min-width: 25px;
}

.opimage > img {
    background-position: center;
    background-size: calc(100% - 12px) calc(100% - 12px);
    background-repeat: no-repeat;
}

.best {
    content: url("/assets/GOODMAXBorder.png");
}
.better {
    content: url("/assets/GOODQuiteBorder.png");
}
.good {
    content: url("/assets/GOODalittleBorder.png");
}
.ok {
    content: url("/assets/GOODishBorder.png");
}
.idk {
    content: url("/assets/idkBorder.png");
}
.meh {
    content: url("/assets/mehBorder.png");
}
.bad {
    content: url("/assets/BADishBorder.png");
}
.worse {
    content: url("/assets/BADalittleBorder.png");
}
.terrible {
    content: url("/assets/BADQuiteBorder.png");
}
.worst {
    content: url("/assets/BADMAXborder.png");
}

.category {
    position: relative;
    padding: 4px;
    background-repeat: repeat;
    background-size: cover;
    border: 25px solid transparent;
    border-image: url("/assets/simpleBorderLBlue.png") 25 round;
    border-radius: 8px;
}
.subSection {
    position: relative;
    background-color: rgba(0, 0, 0, 0.349);
    box-shadow: 0px 0px 12px 0px black inset;
    border: 25px solid transparent;
    border-image: url("/assets/simpleBorderRed.png") 25 round;
    border-radius: 8px;
}


.list {
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}

.title {
    background-size: 100% 100%;
    background-position: 0px 0px,0px 0px,0px 0px;
    background-image: repeating-conic-gradient(from 0deg at 0% 100%, #0000FF29 0%, #AF000000 50%),repeating-conic-gradient(from 0deg at 0% 100%, #714A4AFF 0%, #AF000000 1%),repeating-conic-gradient(from 0deg at 0% 100%, #8D0000FF 0%, #AF0000FF 1%);
}

.section {
    position: relative;
}

.collapse {
    position: absolute;
    /* position: ; */
    /* z-index: 5; */
    top: calc(0% - 18px);
    left: calc(0% - 18px);
}