.intro {
    width: 90%;
    margin: auto;
}

.banner {
    height: 250px;
    width: calc(100% - 24px);
    margin: auto;
    object-fit: cover;
    border: 12px solid rgb(22, 22, 22);
}

.about-button {
    background-color: rgb(22, 22, 22);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    padding: 7px 100px;
    float: right;
}

.about-button:hover {
    background-color: rgb(61, 61, 61);
}

.resourcesTable {
    width: calc(90% - 6px);
    margin: auto;
    overflow: auto;
    background-color: #c9af98;
    border: 3px outset black;
    text-align: center;
}

.resourcesTable div {
    width: 20%;
    float: left;
}

.resource-item.black {
    background-color: rgb(22, 22, 22);
    a {
        color: white;
        text-decoration: none;
    }
}

.resource-item.black:hover {
    background-color: rgb(51, 51, 51);
}

.resource-item.gold {
    background-color: rgb(255, 202, 6);
    a {
        color: black;
        text-decoration: none;
    }
}

.resource-item.gold:hover {
    background-color: rgb(247, 211, 122);
}

.resource-item.white {
    background-color: white;
    a {
        color: rgb(22, 22, 22);
        text-decoration: none;
    }
}

.resource-item.white:hover {
    background-color: rgb(226, 223, 216);
}

.resourceImage {
    width: 90%;
    height: 100px;
    object-fit: cover;
    border: 2px outset black;
}