:root {
    /* Czarny */
    --black-normal: #B0B0B0; /* Jasny szary */
    --black-hover: #9E9E9E; /* Ciemniejszy jasny szary */
    --black-active: #8C8C8C; /* Jeszcze ciemniejszy jasny szary */

    /* Biały */
    --white-normal: #FFFFFF;
    --white-hover: #F2F2F2;
    --white-active: #E6E6E6;

    /* Niebieski */
--blue-normal: #3399FF; /* Jasny niebieski */
--blue-hover: #1E90FF; /* Nieco ciemniejszy jasny niebieski do stanu hover */
--blue-active: #007BFF; /* Odcień normalny jako ciemniejszy do stanu aktywnego */

    /* Zielony */
    --green-normal: #4CAF50; /* Odcień oliwkowy */
    --green-hover: #388E3C;
    --green-active: #2C6B2F;

	--brown-normal: #FFD700; /* Złoty */
	--brown-hover: #FFC107; /* Jaśniejszy złoty do stanu hover */
	--brown-active: #FFA000; /* Ciemniejszy złoty do stanu aktywnego */

    /* Pomarańczowy */
    --orange-normal: #FF8C00; /* Pomarańczowy */
    --orange-hover: #FFA500;
    --orange-active: #E67E22;
}

.square-button {
    width: 20px; /* Szerokość przycisku */
    height: 20px; /* Wysokość przycisku */
    border: none; /* Brak obramowania */
    color: black; /* Kolor tekstu */
    text-align: center; /* Wyrównanie tekstu do środka */
    text-decoration: none; /* Brak dekoracji tekstu */
    display: inline-block; /* Wyświetlenie jako blok liniowy */
    font-size: 16px; /* Rozmiar czcionki */
    line-height: 20px; /* Wysokość linii równa wysokości przycisku dla wyrównania tekstu pionowo */
    cursor: pointer; /* Zmiana kursora na wskaźnik */
    border-radius: 0; /* Kwadratowy kształt */
    box-shadow: 0 4px #999; /* Dodanie cienia */
    margin: 5px; /* Dodanie odstępu */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Dodanie przejścia dla efektów */
}

.square-button:hover {
    box-shadow: 0 2px #666; /* Zmniejszenie cienia po kliknięciu */
    transform: translateY(2px); /* Przesunięcie przycisku w dół po kliknięciu */
}

.square-black {
    background-color: var(--black-normal);
}
.square-black:hover {
    background-color: var(--black-hover);
}
.square-black:active {
    background-color: var(--black-active);
}

.square-white {
    background-color: var(--white-normal);
}
.square-white:hover {
    background-color: var(--white-hover);
}
.square-white:active {
    background-color: var(--white-active);
}

.square-blue {
    background-color: var(--blue-normal);
}
.square-blue:hover {
    background-color: var(--blue-hover);
}
.square-blue:active {
    background-color: var(--blue-active);
}

.square-green {
    background-color: var(--green-normal);
}
.square-green:hover {
    background-color: var(--green-hover);
}
.square-green:active {
    background-color: var(--green-active);
}

.square-brown {
    background-color: var(--brown-normal);
}
.square-brown:hover {
    background-color: var(--brown-hover);
}
.square-brown:active {
    background-color: var(--brown-active);
}

.square-orange {
    background-color: var(--orange-normal);
}
.square-orange:hover {
    background-color: var(--orange-hover);
}
.square-orange:active {
    background-color: var(--orange-active);
}