@layer Base, SpecificImplementations;

@layer SpecificImplementations {
    @keyframes changeColor {
        0% {
            background-color: #0033cc; /* Starting color */
        }

        100% {
            background-color: #3366ff; /* Ending color */
        }
    }
    @keyframes ComplexBorderColor {
        0% {
            background-color: wheat; /* Starting color */
        }

        50% {
            background-color: gold; /* Ending color */
        }
        50% {
            background-color: darkgoldenrod; /* Ending color */
        }
    }


    .hexagonContainer.sea {
        animation: changeColor 5s ease infinite alternate; /* Change properties as needed */
    }

    .hexagonContainer.grass {
        /*animation: changeColor 5s ease infinite alternate; /* Change properties as needed */
        background-color: forestgreen;
    }

    .hexagonContainer.home {
        background-color: mediumpurple;
    }

    .hexagonContainer.workTile {
        background-color: plum;
    }

    .hexagonComplexBorderColor {
        animation: ComplexBorderColor 5s ease infinite alternate;
    }

}