body {
    background-color: #1E2940;
    color: white;
}

.modal {
    color: black;
}

h1 {
    text-align: center;
}

.board {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.board > img {
    transition: 0s ease;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.board > img:hover {
    border: 1px solid white;
    transition: 0.3s ease;
}

.resource-counter {
    width: 100vw;
    padding: 0.5em;
    text-align: center;
}

.building {
    grid-column: 1/1;
    grid-row: 1/1;
    margin: 1em;
    padding: 1em;
    color: white;
}

.building > .building-icon {
    font-size: 10vw;
    text-align: center;
    color: white;
}

.building > button {
    margin: 1em 0;
    width: 100%;
    background: #B21DF2;
    border: none;
}

.building > .worker-display {
    margin-top: 1em;
    text-align: center;
}


.woodcutter, .army-center, .townhall, .mine  {
    background: #241FA6;;
}

.resource-item {
    margin-left: 0.5em;
}

.set-button {
    margin-left: 4pt;
}

.form-group h6 {
    margin-top: 16pt;
}

@media screen and (min-width: 786px) {
    .board {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1900px) {
    .board {
        grid-template-columns: repeat(7, 1fr);
    }
}
