#buildings {

    justify-content: flex-start;

    width: 20em;

    margin-right: 8em;

    color: var(--text-color);

}

.buildingRow {

    width: 100%;

    margin-bottom: 1em;

}

.building {

    position: relative;

    height: 2.5em;
    width: 100%;

    margin: none;
    margin-right: 0.5em;
    outline: none;
    border: 2px solid var(--text-color);
    border-radius: 0.5em;
    padding: 0.5em 0.5em;

    background-color: transparent;

    font-family: "Times New Roman", Times, serif;
    font-size: 1em;

    color: var(--text-color);

    transition-duration: 500ms;

    animation: fade-in 1000ms linear 0ms 1;
    
}

.building:hover {

    height: 4.5em;

}

.building:hover[disabled] {

    background-color: var(--action-highlight);
    box-shadow: 0em 0em 1em red;

}

.building:hover:not([disabled]) {

    background-color: var(--action-highlight);
    box-shadow: 0em 0em 1em var(--text-color);

}

.buildingText {

    position: absolute;
    top: 0.5em;
    left: 0.5em;

    height: 1em;
    width: calc(100% - 0.5em);

    text-align: center;

}

.buildingDesc {

    position: absolute;
    top: 1.5em;
    left: 0.5em;

    height: calc(100% - 1.5em);
    width: calc(100% - 0.5em);

    opacity: 0;

    text-align: center;

    transition-duration: 500ms;
    transition-delay: -250ms;

}

.building:hover > .buildingDesc {

    opacity: 1;

    transition-delay: 500ms;

}

#workers {

    align-items: stretch;

    height: 100%;
    width: 20em;

    margin-left: 8em;

    color: var(--text-color);

}

#workers .column {

    justify-content: flex-start;

    margin-right: 1em;

}

#workers .column:last-of-type {

    justify-content: flex-start;

    margin-right: 0px;

}

.workerName {

    height: 2.5em;

    text-align: center;

}

.workerAmount {

    height: 2.5em;
    min-width: 3em;

    text-align: center;

}

.workerAdd,
.workerSub {

    height: 2.5em;
    width: 2.5em;

    margin: none;
    outline: none;
    border: 2px solid var(--text-color);
    border-radius: 0.5em;
    padding: 0.5em 0.5em;

    background-color: transparent;

    font-family: "Times New Roman", Times, serif;
    font-size: 1em;

    color: var(--text-color);

    opacity: 0;

    transition-duration: 500ms;

    animation: fade-in 1000ms linear 0ms 1;

}

.workerSub:first-of-type,
.workerAdd:first-of-type {

    margin-top: calc(2.5em + 5px);

}

.workerAdd:hover,
.workerSub:hover {

    background-color: var(--action-highlight);
    box-shadow: 0em 0em 1em var(--text-color);

}

.workerName:not(:first-of-type),
.workerAmount:not(:first-of-type),
.workerSub:not(:first-of-type),
.workerAdd:not(:first-of-type) {

    margin-top: 1em;

}