#mainContainer {
    width: 80vw;
    height: calc(100vh - 88pt);
    margin: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10vw;
    align-content: center;
}

#imageContainer {
    position: relative;
}

#glyphContainer {
    display: flex;
    flex-wrap: wrap;
    width: 512px;
    height: 512px;
    position: absolute;
    top: 0;
    left: 0;
}

#overallStats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.glyph {
    width: 32px;
    height: 32px;
    text-align: center;
    align-content: center;
    cursor: pointer;
}

.glyphContent {
    font-size: 60%;
    margin-block: 0;
    color: #dc143c;
    cursor: pointer;
}

.active {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 2px solid #daa520;
    box-sizing: border-box;
    color: #46464A;
}

.topAdjacent {
    border-top-style: hidden;
}

.bottomAdjacent {
    border-bottom-style: hidden;
}

.leftAdjacent {
    border-left-style: hidden;
}

.rightAdjacent {
    border-right-style: hidden;
}

.active {
    position: relative;
    background-color: #9400d333;
}

.invalid {
    background-color: transparent;
    border: none;
    cursor: auto;
}

.selected {
    /* Important allows overriding hover color */
    background-color: #adff2f !important;
}