:root {
    --color-light-1: #F8F9FA;
    --color-light-1-05: rgb(248, 249, 250, 0.5);
    --color-light-2: #E9ECEF;
    --color-light-2-05: rgba(233, 236, 239, 0.5);
    --color-light-3: #DEE2E6;
    --color-light-3-05: rgba(222, 226, 230, 0.5);
    --color-light-4: #CED4DA;
    --color-light-5: #ADB5BD;
    --color-light-6: #6C757D;
    --color-light-7: #495057;
    --color-light-8: #343A40;
    --color-light-9: #212529;

    --color-dark-1: #272B31;
    --color-dark-2: #24282D;
    --color-dark-3: #212529;
    --color-dark-4: #1C2023;
    --color-dark-5: #181B1D;
    --color-dark-5-05: rgba(24, 27, 29, 0.5);
    --color-dark-6: #131617;
    --color-dark-6-05: rgba(19, 22, 23, 0.5);
    --color-dark-7: #0E1112;
    --color-dark-7-05: rgba(14, 17, 18, 0.5);
    --color-dark-8: #090B0C;
    --color-dark-8-05: rgba(9, 11, 12, 0.5);
    --color-dark-9-05: rgba(5, 6, 6, 0.5);
    --color-dark-9: #050606;

    --color-yellow-1: #B65009;
    --color-yellow-2: #C46002;
    --color-yellow-3: #E29020;
    --color-yellow-4: #EEBD3B;
    --color-yellow-4-00: rgba(238, 189, 59, 0);


    --color-red-1: #641220;
    --color-red-2: #A11D33;
    --color-red-3: #BD1F36;
    --color-red-4: #E01E37;
    --color-red-4-05: rgba(224, 30, 55, 0.5);
    --color-red-4-025: rgba(224, 30, 55, 0.25);

    --color-green-1: #0C8C4A;
    --color-green-2: #1F9C43;
    --color-green-3: #32AC3C;
    --color-green-4: #58CC30;
    --color-green-4-05: rgba(88, 204, 48, 0.5);
    --color-green-4-025: rgba(88, 204, 48, 0.25);
    --color-green-4-01: rgba(88, 204, 48, 0.1);

    --color-light-blue-1: #2E7AB8;
    --color-light-blue-2: #308FC5;
    --color-light-blue-3: #33A4D2;
    --color-light-blue-4: #39CFED;
    --color-light-blue-4-05: rgba(57, 207, 237, 0.5);
    --color-light-blue-4-025: rgba(57, 207, 237, 0.25);

    --color-blue-1: #002855;
    --color-blue-2: #023E7D;
    --color-blue-3: #0353A4;
    --color-blue-4: #0466C8;
    --color-blue-4-05: rgba(4, 102, 200, 0.5);
    --color-blue-4-025: rgba(4, 102, 200, 0.25);

    --color-purple-1: #7B2EB9;
    --color-purple-2: #8E40CF;
    --color-purple-3: #9E5BD6;
    --color-purple-4: #AF76DD;

    --color-pink-1: #C9184A;
    --color-pink-2: #FF4D6D;
    --color-pink-3: #FF758F;
    --color-pink-4: #FF8FA3;

    --color-telegram: #2AABEE;

    --color-vk: #0077FF;

    --color-yandex-music: #FFBC0D;

    --color-discord: #5865F2;

    --color-transparent: rgba(0, 0, 0, 0);

    --size-128px: 128px;
    --size-96px: 96px;
    --size-64px: 64px;
    --size-48px: 48px;
    --size-32px: 32px;
    --size-24px: 24px;
    --size-16px: 16px;
    --size-12px: 12px;
    --size-8px: 8px;
    --size-4px: 4px;

}
/*   Шрифты   */
@font-face {
    font-family: 'DrukText';
    src: url(../fonts/DrukTextWide-Bold.ttf);
}
@font-face {
    font-family: 'Montserrat';
    src: url(../fonts/Montserrat-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'MartianGrotesk';
    src: url(../fonts/MartianGrotesk-VFVF.ttf);
}
@font-face {
    font-family: 'Minecraft';
    src: url(../fonts/minecraft.ttf);
}
body {
    margin: 0;
    font-family: 'MartianGrotesk';
    background-color: var(--color-dark-9);
    color: var(--color-light-1);
    transition: 0.4s;
    background-size: 100%;
    font-weight: 400;
}
/* скроллбар */
::-webkit-scrollbar {
    width: var(--size-4px);
}
::-webkit-scrollbar-track {
    background: var(--color-dark-8);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-green-4), var(--color-green-3));
}
/* Анимации */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(calc(-1 * var(--size-16px))); }
    100% { transform: translateY(0px); }
}
@keyframes float-horizontal {
    0% { transform: translateX(0px); }
    50% { transform: translateX(calc(-1 * var(--size-16px))); }
    100% { transform: translateX(0px); }
}
/*   Размеры шрифтов   */
.font-size-64 {
    font-size: var(--size-64px);
}
.font-size-48 {
    font-size: var(--size-48px);
}
.font-size-32 {
    font-size: var(--size-32px);
}
.font-size-24 {
    font-size: var(--size-24px);
}
.font-size-16 {
    font-size: var(--size-16px);
}
.font-size-12 {
    font-size: var(--size-12px);
}
.font-color-1 {
    color: var(--color-light-1);
    transition: initial;
    transition: 0.4s;
}
.font-color-2 {
    color: var(--color-light-2);
    transition: initial;
    transition: 0.4s;
}
.font-color-4 {
    color: var(--color-light-4);
    transition: initial;
    transition: 0.4s;
}
.font-color-5 {
    color: var(--color-light-5);
    transition: initial;
    transition: 0.4s;
}

.text-selected-white {
    background: var(--color-light-1);
    color: var(--color-dark-9);
    padding: var(--size-8px) var(--size-16px);
    border-radius: var(--size-32px);
    width: fit-content;
}

/* иконки */
.icon {
    aspect-ratio: 1;
    width: var(--size-32px);
    fill: var(--color-light-5);
    transition: 0.4s;
}
.icon-color {
    aspect-ratio: 1;
    width: var(--size-24px);
    fill: var(--color-dark-9);
    transition: 0.4s;
}
.social-icon {
    fill: #6c757d;
    width: var(--size-32px);
    aspect-ratio: 1;
    padding: var(--size-4px);
    margin-right: var(--size-16);
    transition: 0.4s;
}
.social-icon:hover {
    fill: var(--color-light-1);
    transform: scale(1.2);
}
.icon-telegram:hover {
    fill: var(--color-telegram);
}
.icon-vk:hover {
    fill: var(--color-vk);
}
.icon-discord:hover {
    fill: var(--color-discord);
}
.icon-yandex-music:hover {
    fill: var(--color-yandex-music);
}
/* Кнопки */
.button-color-big {
    padding: var(--size-16px) var(--size-32px);
    border-radius: var(--size-32px);
    font-weight: 400;
    text-decoration: none;
    transition: 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-light-1);
    border: none;
    cursor: pointer;
    font-family: 'MartianGrotesk';
    width: fit-content;
}
.button-color-white {
    background-color: var(--color-light-1);
    color: var(--color-dark-9);
}
.button-color-white:hover {
    background-color: var(--color-light-4);
}
.button-color-green {
    background-color: var(--color-green-4);
}
.button-color-green:hover {
    background-color: var(--color-green-3);
}
.button-without-back {
    font-weight: 300;
    transition: 0.4s;
    background: none;
    font-family: 'MartianGrotesk';
    border: none;
    color: var(--color-light-1);
}
@media screen and (max-width: 1680px) {
    :root {
        --size-128px: calc(128px * 1680 / 1920);
        --size-96px: calc(96px * 1680 / 1920);
        --size-64px: calc(64px * 1680 / 1920);
        --size-48px: calc(48px * 1680 / 1920);
        --size-32px: calc(32px * 1680 / 1920);
        --size-24px: calc(24px * 1680 / 1920);
        --size-16px: calc(16px * 1680 / 1920);
        --size-12px: calc(12px * 1680 / 1920);
        --size-8px: calc(8px * 1680 / 1920);
        --size-4px: calc(4px * 1680 / 1920);
    }
}
@media screen and (max-width: 1440px) {
    :root {
        --size-128px: calc(128px * 1440 / 1920);
        --size-96px: calc(96px * 1440 / 1920);
        --size-64px: calc(64px * 1440 / 1920);
        --size-48px: calc(48px * 1440 / 1920);
        --size-32px: calc(32px * 1440 / 1920);
        --size-24px: calc(24px * 1440 / 1920);
        --size-16px: calc(16px * 1440 / 1920);
        --size-12px: calc(12px * 1440 / 1920);
        --size-8px: calc(8px * 1440 / 1920);
        --size-4px: calc(4px * 1440 / 1920);
    }
}
@media screen and (max-width: 1280px) {
    :root {
        --size-128px: calc(128px * 1280 / 1920);
        --size-96px: calc(96px * 1280 / 1920);
        --size-64px: calc(64px * 1280 / 1920);
        --size-48px: calc(48px * 1280 / 1920);
        --size-32px: calc(32px * 1280 / 1920);
        --size-24px: calc(24px * 1280 / 1920);
        --size-16px: calc(16px * 1280 / 1920);
        --size-12px: calc(12px * 1280 / 1920);
        --size-8px: calc(8px * 1280 / 1920);
        --size-4px: calc(4px * 1280 / 1920);
    }
}
@media screen and (max-width: 1024px) {
    :root {
        --size-128px: calc(128px * 1024 / 1920);
        --size-96px: calc(96px * 1024 / 1920);
        --size-64px: calc(64px * 1024 / 1920);
        --size-48px: calc(48px * 1024 / 1920);
        --size-32px: calc(32px * 1024 / 1920);
        --size-24px: calc(24px * 1024 / 1920);
        --size-16px: calc(16px * 1024 / 1920);
        --size-12px: calc(12px * 1024 / 1920);
        --size-8px: calc(8px * 1024 / 1920);
        --size-4px: calc(4px * 1024 / 1920);
    }
}
@media screen and (max-width: 768px) {
    :root {
        --size-128px: calc(128px * 768 / 1920);
        --size-96px: calc(96px * 768 / 1920);
        --size-64px: calc(64px * 768 / 1920);
        --size-48px: calc(48px * 768 / 1920);
        --size-32px: calc(32px * 768 / 1920);
        --size-24px: calc(24px * 768 / 1920);
        --size-16px: calc(16px * 768 / 1920);
        --size-12px: calc(12px * 768 / 1920);
        --size-8px: calc(8px * 768 / 1920);
        --size-4px: calc(4px * 768 / 1920);
    }
}
@media screen and (max-width: 420px) {
    :root {
        --size-128px: 128px;
        --size-96px: 96px;
        --size-64px: 64px;
        --size-48px: 48px;
        --size-32px: 32px;
        --size-24px: 24px;
        --size-16px: 16px;
        --size-12px: 12px;
        --size-8px: 8px;
        --size-4px: 4px;
    }
    .font-size-64 {
        font-size: var(--size-32px);
    }
    .font-size-48 {
        font-size: var(--size-32px);
    }
    .font-size-32 {
        font-size: var(--size-24px);
    }
    .font-size-24 {
        font-size: var(--size-16px);
    }
    .font-size-16 {
        font-size: var(--size-16px);
    }
    .font-size-12 {
        font-size: var(--size-12px);
    }
}
@media screen and (max-width: 375px) {
    :root {
        --size-128px: calc(128px * 375 / 420);
        --size-96px: calc(96px * 375 / 420);
        --size-64px: calc(64px * 375 / 420);
        --size-48px: calc(48px * 375 / 420);
        --size-32px: calc(32px * 375 / 420);
        --size-24px: calc(24px * 375 / 420);
        --size-16px: calc(16px * 375 / 420);
        --size-12px: calc(12px * 375 / 420);
        --size-8px: calc(8px * 375 / 420);
        --size-4px: calc(4px * 375 / 420);
    }
}
@media screen and (max-width: 360px) {
    :root {
        --size-128px: calc(128px * 360 / 420);
        --size-96px: calc(96px * 360 / 420);
        --size-64px: calc(64px * 360 / 420);
        --size-48px: calc(48px * 360 / 420);
        --size-32px: calc(32px * 360 / 420);
        --size-24px: calc(24px * 360 / 420);
        --size-16px: calc(16px * 360 / 420);
        --size-12px: calc(12px * 360 / 420);
        --size-8px: calc(8px * 360 / 420);
        --size-4px: calc(4px * 360 / 420);
    }
}