/* ОБЩИЕ СТИЛИ —————————— */

    /* фон всей страницы */
    body {
        background-color: #1F1F1F;
    }

    /* отключаем эффект отскока */
    html, body {
        overscroll-behavior-y: none !important;
        overscroll-behavior: none !important;
  }

/* ЧЁРНАЯ КНОПКА —————————— */

    /* кнопка default */
    .black-button {
        border-radius: 16px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, .2),
                    0 0 0 2px #0F0F0F,
                    1px 1px 1px 2px rgba(255, 255, 255, .1),
                    inset 1px 1px 1px rgba(255, 255, 255, .1);
        transition: background .2s ease-in-out, box-shadow .2s ease-in-out !important;
    }

    /* кнопка hover */
    .black-button:hover {
        background: #262626;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, .2),
                    0 0 0 8px #0F0F0F,
                    1px 1px 1px 8px rgba(255, 255, 255, .1),
                    inset 1px 1px 1px rgba(255, 255, 255, .1);
        transition: background .2s ease-in-out, box-shadow .2s ease-in-out !important;
    }

/* МАЛЕНЬКАЯ ЧЁРНАЯ КНОПКА —————————— */

    /* кнопка default */
    .small-black-button {
        border-radius: 8px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, .2),
                    0 0 0 2px #0F0F0F,
                    1px 1px 1px 2px rgba(255, 255, 255, .1),
                    inset 1px 1px 1px rgba(255, 255, 255, .1);
        transition: background .2s ease-in-out, box-shadow .2s ease-in-out !important;
    }

    /* кнопка hover */
    .small-black-button:hover {
        background: #262626;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, .2),
                    0 0 0 8px #0F0F0F,
                    1px 1px 1px 8px rgba(255, 255, 255, .1),
                    inset 1px 1px 1px rgba(255, 255, 255, .1);
        transition: background .2s ease-in-out, box-shadow .2s ease-in-out !important;
    }

/* СЕРАЯ КНОПКА —————————— */

    /* кнопка default */
    .gray-button {
        border-radius: 16px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, .05),
                    0 0 0 2px #E3E4E8,
                    1px 1px 1px 2px rgba(255, 255, 255, .8),
                    inset 1px 1px 1px rgba(255, 255, 255, .8);
        transition: background .2s ease-in-out, box-shadow .2s ease-in-out !important;
    }

    /* кнопка hover */
    .gray-button:hover {
        background: #F5F5F5;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, .05),
                    0 0 0 8px #E3E4E8,
                    1px 1px 1px 8px rgba(255, 255, 255, .8),
                    inset 1px 1px 1px rgba(255, 255, 255, .8);
        transition: background .2s ease-in-out, box-shadow .2s ease-in-out !important;
    }

/* КРАСНАЯ КНОПКА —————————— */

    /* кнопка default */
    .red-button {
        border-radius: 16px;
        background: #F55200;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, .2),
                    0 0 0 2px #0F0F0F,
                    1px 1px 1px 2px rgba(255, 255, 255, .1),
                    inset 1px 1px 1px rgba(255, 255, 255, .3);
        transition: background .2s ease-in-out, box-shadow .2s ease-in-out !important;
    }

    /* кнопка hover */
    .red-button:hover {
        background: #FF5F0F;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, .2),
                    0 0 0 8px #0F0F0F,
                    1px 1px 1px 8px rgba(255, 255, 255, .1),
                    inset 1px 1px 1px rgba(255, 255, 255, .3);
        transition: background .2s ease-in-out, box-shadow .2s ease-in-out !important;
    }


/* ВНУТРЕННИЙ БЛИК —————————— */

    /* внутренний блик 80% 16px */
    .inner-light-80::after {
        z-index: 1;
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.8);
    }

    /* внутренний блик 30% 16px */
    .inner-light-30::after {
        z-index: 1;
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.3);
    }

    /* внутренний блик 10% 16px */
    .inner-light-10::after {
        z-index: 1;
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1);
    }

    /* внутренний блик 10% 24px */
    .inner-light-10-24::after {
        z-index: 1;
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 24px;
        box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1);
    }

    /* внутренний блик 10% 8px */
    .inner-light-10-8::after {
        z-index: 1;
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1);
    }

    /* внутренний блик 80% 16px на фиксированном изображении*/
    .inner-light-fixed-image .tn-atom::after {
        z-index: 1;
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.8);
    }

/* ВНУТРЕННЯЯ ТЕНЬ —————————— */

    /* внутренняя тень 10% 8px*/
    .inner-shadow-10-8::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);
    }

/* ПРОЧЕЕ —————————— */

    /* тиснение на тёмном фоне */
    .emboss-dark {
        filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, .1));
    }

    /* тиснение на свветлом фоне */
    .emboss-light {
        filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, .8));
    }