main {
    /*max-width: 60em;*/
}

article {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

.style2 {
    width: 100%;
    max-width: 100%;
    color: var(--text4);
    background: var(--bg4);
}

section {
    max-width: 50em;
    padding: 0.5em;
}

#controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

#board {
    max-width: 37em;
    flex-grow: 1;
}

#matrix {
    width: 100%;
    height: auto;
}

textarea {
    resize: none;
}

#control1 {
    display: flex;
    gap: 2em;
}

#control2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5em;
}

button {
    width: 3em;
    height: 3em;
    padding: 0;
    border-radius: 20%;
    background: var(--bgVeryLightGray);
}

.highlight {
    color: var(--bgRed);
}

button svg {
    fill: var(--bg2);
    width: 100%;
    height: auto;
}

.challenge {
/*    color: var(--text4);
    background-color: var(--bg4);
    margin-bottom: 3em;
    padding-bottom: 1em;*/
}

dl {
    padding: 0.5em;
}

dt {
    margin-top: .7em;
    font-weight: bold;
}

dd {
    margin-top: .5em;
}

.inlineSVG {
    width: 1.5em;
    height: auto;
    fill: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 20%;
    background: var(--bgVeryLightGray);
}