.main button {
    background: var(--metal-bg);
    border-radius: 3px;
    padding: 10px 20px;
    color: var(--metal-clr);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.3rem;
    flex: 1;
}
.main button:hover {
    background: var(--metal-bg-hover);
    color: var(--metal-clr-hover);
}

.pref {
    color: var(--metal-clr);
}

.pref p {
    margin-bottom: 10px;
}

div.main {
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #262421;
    padding: 30px;
    border-radius: 3px;
    max-width: 1500px;
    width: 95%;
}

.btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

button.save {
    width: 100%;
    padding: 14px 0 14px 0;
    border-radius: 3px;
    background: #3692e7;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background 150ms;
    font-size: 1rem;
    user-select: none;
}

button.save:hover {
    background: #56a3eb;
}

.board-theme button.toggle,
.skin button.toggle {
    color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skin button.toggle,
.board-theme button.toggle {
    flex: 1;
}

.board-theme button span {
    width: 64px;
    height: 32px;
    display: block;
    background-image: url(../assets/board/skins/brown.svg);
    background-size: 256px;
}

.board-theme button[data-value='blue'] span {
    background-image: url(../assets/board/skins/blue.svg);
}
.board-theme button[data-value='green'] span {
    background-image: url(../assets/board/skins/green.svg);
}
.board-theme button[data-value='purple'] span {
    background-image: url(../assets/board/skins/purple.svg);
}
.board-theme button[data-value='ic'] span {
    background-image: url(../assets/board/skins/ic.svg);
}

.board-theme button[data-value='blue2'] span {
    background-image: url(../assets/board/skins/blue2.jpg);
}
.board-theme button[data-value='blue3'] span {
    background-image: url(../assets/board/skins/blue3.jpg);
}
.board-theme button[data-value='blue-marble'] span {
    background-image: url(../assets/board/skins/blue-marble.jpg);
}
.board-theme button[data-value='canvas2'] span {
    background-image: url(../assets/board/skins/canvas2.jpg);
}
.board-theme button[data-value='canvas2'] span {
    background-image: url(../assets/board/skins/green-plastic.png);
}
.board-theme button[data-value='grey'] span {
    background-image: url(../assets/board/skins/grey.jpg);
}
.board-theme button[data-value='horsey'] span {
    background-image: url(../assets/board/skins/horsey.jpg);
}
.board-theme button[data-value='leather'] span {
    background-image: url(../assets/board/skins/leather.jpg);
}
.board-theme button[data-value='maple'] span {
    background-image: url(../assets/board/skins/maple.jpg);
}
.board-theme button[data-value='maple2'] span {
    background-image: url(../assets/board/skins/maple2.jpg);
}
.board-theme button[data-value='marble'] span {
    background-image: url(../assets/board/skins/marble.jpg);
}
.board-theme button[data-value='ncf-board'] span {
    background-image: url(../assets/board/skins/ncf-board.png);
}
.board-theme button[data-value='newspaper'] span {
    background-image: url(../assets/board/skins/newspaper.png);
}
.board-theme button[data-value='olive'] span {
    background-image: url(../assets/board/skins/olive.jpg);
}
.board-theme button[data-value='pink-pyramid'] span {
    background-image: url(../assets/board/skins/pink-pyramid.png);
}
.board-theme button[data-value='purple-diag'] span {
    background-image: url(../assets/board/skins/purple-diag.png);
}
.board-theme button[data-value='wood'] span {
    background-image: url(../assets/board/skins/wood.jpg);
}
.board-theme button[data-value='wood2'] span {
    background-image: url(../assets/board/skins/wood2.jpg);
}
.board-theme button[data-value='wood3'] span {
    background-image: url(../assets/board/skins/wood3.jpg);
}
.board-theme button[data-value='wood4'] span {
    background-image: url(../assets/board/skins/wood4.jpg);
}

.skin button span {
    width: 64px;
    height: 64px;
    display: block;
    background-image: url(../assets/pieces/default/wN.svg);
    background-size: contain;
}

.skin button img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    pointer-events: none;
}
.skin button {
    padding: 0;
}