:root {
    --first-100: #64a7db;
    --first-200: #64dbd4;
    --terittory: #6cdb64;
    --gray-100: #f8f8f8;
    --gray-200: #cfcfcf;
    --gray-300: #858585;
    --gray-400: #4d4de50;
    --gray-500: #28282a;
    --white: #ffffff;
    --bg: #435966;

    --radius: 12px;
}

.bg-first-100 {
    background-color: var(--first-100);
}

.bg-first-200 {
    background-color: var(--first-200);
}

.bg-first-100:hover , .bg-first-200:hover , .bg-terittory:hover {
    background-color: var(--terittory);
}

.bg-terittory {
    background-color: var(--terittory);
}

.bg-gray-100 {
    background-color: var(--gray-100);
}

.bg-gray-200 {
    background-color: var(--gray-200);
}

.bg-gray-300 {
    background-color: var(--gray-300);
}

.bg-gray-400 {
    background-color: var(--gray-400);
}

.bg-gray-500 {
    background-color: var(--gray-500);
}

.c-firt-100 {
    color: var(--first-100);
}

.c-first-200 {
    color: var(--first-200);
}

.c-terittory {
    color: var(--terittory);
}

.c-gray-100 {
    color: var(--gray-100);
}

.c-gray-200 {
    color: var(--gray-200);
}

.c-gray-300 {
    color: var(--gray-300);
}

.c-gray-400 {
    color: var(--gray-400);
}

.c-gray-500 {
    color: var(--gray-500);
}

.radius {
    border-radius: var(--radius);
}