enchant-gen.css

html {
    font-size: 16px;
    font-family: 'Fira Sans', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Noto Sans CJK SC', 'Source Han Sans', 'Microsoft Yahei', sans-serif
}

.title-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: gainsboro; */
}

.title-bar>img {
    height: 5em;
    margin: 0.5em;
}

.misc-bar {
    display: flex;
    justify-content: center;
    align-items: baseline;
    /* background-color: gainsboro; */
}

.by-author {
    color: gray;
    margin: 0 2em 0 2em;
}

.by-author>a {
    color: gray;
}

.lang {
    border: 2px solid gainsboro;
    border-radius: 5px;
    text-align: center;
    transition: border-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    padding: 0.2em 0.5em 0.2em 0.5em;
    margin: 0.1em;
    text-align: center;
    transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

body {
    align-items: center;
    margin: auto;
    min-height: 100vh;
}

main {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: stretch;
    margin: auto;
    padding: 1em 0 1em 0;
}

button {
    background-color: rgb(78, 105, 23);
    object-fit: cover;
    border: none;
    border-radius: 5px;
    color: aliceblue;
    padding: 0.5rem;
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

button:disabled {
    background-color: rgb(131, 131, 131);
    transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

button:disabled:hover {
    background-color: rgb(131, 131, 131);
    transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    cursor: default;
}

button:hover {
    background-color: rgb(130, 172, 47);
    transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

input[type=text],
input[type=number] {
    border-radius: 5px;
    border: solid 2px gainsboro;
    padding: 0.5rem;
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
    text-align: center;
    transition: border-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

input[type=text]:disabled,
input[type=number]:disabled {
    color: rgb(128, 128, 128);
}

input[type=text]:hover,
input[type=number]:hover,
#enchantment-selection>div:hover,
.lang:hover {
    border-color: dimgrey;
    transition: border-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    cursor: pointer;
}

#command-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0.5em 0 0.5em 0;
    padding-bottom: 0.5em;
    background-color: gainsboro;
    width: calc(100%-2em);
}

#command {
    /* min-width: 40em; */
    min-height: 4ex;
    font-size: 1.6rem;
    overflow-x: scroll;
}

#selection-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#selection-area > div {
    /* flex: 1; */
    margin: 1em;
    max-height: 40em;
}

#item-selection-area {
    min-width: 10em;
    flex: 1;
}

#item-selection {
    overflow-y: scroll;
    max-height: min(50ex);
}
#item-selection::-webkit-scrollbar {
    display: none;
}

#material-selection-area {
    min-width: 10em;
    flex: 1;
}

#enchantment-selection-area {
    /* flex-shrink: 0; */
    flex: 2;
    min-width: 16em;
}

#enchantment-selection {
    overflow-y: scroll;
    max-height: min(50ex);
}

#enchantment-selection::-webkit-scrollbar {
    display: none;
}

#enchantment-selection>div {
    display: flex;
    justify-content: stretch;
    align-items: center;
    margin: 0.3em;
    border: 2px solid gainsboro;
    border-radius: 5px;
    padding: 0 1em 0 1em;
    color: inherit;
}

#enchantment-selection>div.selected {
    background-color: olivedrab;
    color: white;
}

#enchantment-selection>div>span {
    display: inline-block;
    flex-grow: 1;
}

#enchantment-selection>div>input[type="number"] {
    max-width: 3em;
}

#enchantment-selection>div>input[type="checkbox"] {
    margin: 0.5em;
}

main>div {
    padding: 0 3em 0 3em;
}

.span-sel {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.span-sel>span {
    border: 2px solid gainsboro;
    border-radius: 5px;
    text-align: center;
    transition: border-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    display: inline-block;
    padding: 0.5em;
    margin: 0.1em;
    text-align: center;
    flex-grow: 1;
    color: inherit;
    transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    min-width: 3em;
}

.span-sel>span.selected {
    color: white;
    background-color: olivedrab;
    transition: border-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.span-sel>span:hover {
    border-color: dimgrey;
    transition: border-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#material-selection-area>input {
    width: calc(100% - 1rem);
    margin: 0px;
    font-size: 16px;
    font-family: 'Fira Sans', 'Helvetica Neue', 'Noto Sans', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif
}

#command {
    font-family: 'Fira Code', 'Roboto', 'Liberation Mono', 'Consolas', Courier, monospace;
}

footer {
    display: flex;
    color: gray;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 3em;
    background-color: gainsboro;
}

footer a {
    color: gray;
}