.categoryButtonContainer {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    @media screen and (max-width: 1000px) {
        grid-template-columns: repeat(4, 1fr);
    }
    @media screen and (max-width: 700px) {
        grid-template-columns: repeat(2, 1fr);
    }
    grid-gap: 16px;
}

.categoryButton {
    background-color: var(--shade2);
    @media (prefers-color-scheme: dark) {
        background-color: var(--shade7);
    }
    border-radius: 8px;
    height: 100px;
    @media screen and (max-width: 700px) {
        height: 60px;
    }
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.5s;
}

.categoryButton:hover {
    background-color: var(--shade4);
    @media (prefers-color-scheme: dark) {
        background-color: var(--shade5);
    }
    transition: 0.5s;
}
.categoryButton > * {
    transition: 0.5s;
}
.categoryButton:hover > * {
    color: var(--shade8);
    transition: 0.5s;
}

.primaryCategoryButton {
    background-color: var(--primaryTower3);
    @media (prefers-color-scheme: dark) {
        background-color: var(--primaryTower7);
    }
}
.primaryCategoryButton:hover {
    background-color: var(--primaryTower5);
}

.militaryCategoryButton {
    background-color: var(--militaryTower3);
    @media (prefers-color-scheme: dark) {
        background-color: var(--militaryTower7);
    }
}
.militaryCategoryButton:hover {
    background-color: var(--militaryTower5);
}

.magicCategoryButton {
    background-color: var(--magicTower3);
    @media (prefers-color-scheme: dark) {
        background-color: var(--magicTower7);
    }
}
.magicCategoryButton:hover {
    background-color: var(--magicTower5);
}

.supportCategoryButton {
    background-color: var(--supportTower3);
    @media (prefers-color-scheme: dark) {
        background-color: var(--supportTower7);
    }
}
.supportCategoryButton:hover {
    background-color: var(--supportTower5);
}

.heroesCategoryButton {
    background-color: var(--heroes3);
    @media (prefers-color-scheme: dark) {
        background-color: var(--heroes7);
    }
}
.heroesCategoryButton:hover {
    background-color: var(--heroes5);
}

.resourcesSection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    @media screen and (max-width: 700px) {
        grid-template-columns: repeat(1, 1fr);
    }
    grid-gap: 16px;
}

.resourceButton {
    margin-top: 12px;
}

.linkToExternalButton {
    display: flex;
    padding: 8px;
    justify-content: center;
}

.linkToExternal {
    /* aspect-ratio: 1; */
    height: 18px;
    margin-left: 4px;
}

.resourceTitleContainer {
    display: flex;
    align-items: end;
    gap: 8px;
}

.resourceTitleContainer > h6 {
    margin-bottom: 1px;
}

.discordSection {
    background-color: rgb(211, 203, 247);
    @media (prefers-color-scheme: dark) {
        background-color: rgb(49, 11, 119);
    }
}

.discordButton {
    background-color: rgb(185, 169, 247);
    @media (prefers-color-scheme: dark) {
        background-color: rgb(96, 40, 201);
    }
}

.discordButton:hover {
    background-color: rgb(156, 114, 235);
    @media (prefers-color-scheme: dark) {
        background-color: rgb(124, 79, 207);
    }
}

.welcomeContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    text-align: center;
    padding: 0 24px;
}

.welcomeContainer > h1 {
    text-shadow: 2px 2px 4px var(--shade4);
    @media screen and (max-width: 700px) {
        font-size: 24pt;
    }
}

.versionHistoryContainer {
    display: flex;
    align-items: center;
}

.versionHistoryPush {
    margin-left: auto;
}

.contentInfoSection {
    background-color: var(--primaryLight3);
    @media (prefers-color-scheme: dark) {
        background-color: var(--primaryDark3);
    };
}

.tournamentInfoSection {
    background-color: var(--light-tournament-color);
    @media (prefers-color-scheme: dark) {
        background-color: var(--dark-tournament-color);
    };
}

.tournamentPageButton {
    background-color: var(--primary-tournament-color);
    @media (prefers-color-scheme: dark) {
        background-color: var(--secondary-tournament-color);
    };
}

.tournamentPageButton:hover {
    background-color: var(--secondary-tournament-color);
    @media (prefers-color-scheme: dark) {
        background-color: var(--primary-tournament-color);
    };
}

.fateweaverInfoSection {
    background-color: hsl(81, 100%, 77%);
    @media (prefers-color-scheme: dark) {
        background-color: hsl(81, 73%, 19%);
    };
}

.balanceChangeInfoSection {
    display: flex;
    background-color: transparent;
    padding: 0;
}

.balanceChangeInfoSectionImage {
    background-image: url('/media/balanceMedia/bloonBot.png');
    background-position: center;
    background-position-y: 50%;
    background-size: 100%;
    filter: blur(4px);
    opacity: 0.5;
    width: calc(100% + 24px); height: 100%;
    z-index: 1;
}

.balanceChangeInfoSectionContent {
    margin-left: calc(-100%);
    width: 100%;
    z-index: 2;
    padding: 12px;
}

.linksSection {
    display: grid;
    gap: 8px;
}

.simpleWithButton {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}

.simpleWithButton > a {
    margin-left: 8px;
}

.simpleWithButton > :nth-child(2){
    display: flex;
    margin-left: auto;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.fateweaverButton {
    background-color: hsl(81, 64%, 58%);
    @media (prefers-color-scheme: dark) {
        background-color: hsl(81, 84%, 30%);
    };
}

.fateweaverButton:hover {
    background-color: hsl(81, 57%, 44%);
    @media (prefers-color-scheme: dark) {
        background-color: hsl(81, 83%, 35%);
    };
}

.resourcesSection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    @media screen and (max-width: 700px) {
        grid-template-columns: repeat(1, 1fr);
    }
    grid-gap: 16px;
}

.otherGamesSection > a > button {
    width: 100%; height: 100%
}

.bcspopologyButton {
    background-color: var(--bcspopologyLight3);
    @media (prefers-color-scheme: dark) {
        background-color: var(--bcspopologyDark3);
    }
}
.bcspopologyButton:hover {
    background-color: var(--bcspopologyLight2);
    @media (prefers-color-scheme: dark) {
        background-color: var(--bcspopologyDark2);
    }
}

.btd6centralButton {
    background-color: var(--btd6centralLight);
    @media (prefers-color-scheme: dark) {
        background-color: var(--btd6central);
        color: black
    }
}

.btd6centralButton > h4, .btd6centralButton > h4 > p {
    color: white;
    @media (prefers-color-scheme: dark) {
        color: black
    }
}

.btd6centralButton:hover {
    background-color: var(--btd6central);
    @media (prefers-color-scheme: dark) {
        background-color: var(--btd6centralLight);
    }
}
.btd6centralText {
    font-family: Poppins
}