/* шрифт */

:root {
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    font-family: 'Inter', sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
}

@supports (font-variation-settings: normal) {
    :root {
        --bs-body-font-family: 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-family: 'InterVariable', sans-serif;
    }
}

/* Утилитарные классы толщины начертания (Font Weight) */
.font-thin       { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light      { font-weight: 300; }
.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }
.font-black      { font-weight: 900; }

/* Тонкая настройка для вариативного шрифта (InterVariable) */
@supports (font-variation-settings: normal) {
    .font-thin       { font-variation-settings: 'wght' 100; }
    .font-extralight { font-variation-settings: 'wght' 200; }
    .font-light      { font-variation-settings: 'wght' 300; }
    .font-normal     { font-variation-settings: 'wght' 400; }
    .font-medium     { font-variation-settings: 'wght' 500; }
    .font-semibold   { font-variation-settings: 'wght' 600; }
    .font-bold       { font-variation-settings: 'wght' 700; }
    .font-extrabold  { font-variation-settings: 'wght' 800; }
    .font-black      { font-variation-settings: 'wght' 900; }
}

/* задник */

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #121212 !important;
    overflow: hidden;
}

.background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0) 40px,
            rgba(255, 255, 255, 0.1) 40px,
            rgba(255, 255, 255, 0.1) 80px
    );
    background-size: 200% 200%;
    animation: move-background 20s linear infinite;
}

.background::after {
    content: '';
    position: absolute;
    inset: 0; /* растягивает на всю ширину и высоту */

    /* Пример: радиальное затемнение к краям (виньетка) или линейный градиент */
    background:
        radial-gradient(circle at center, transparent 20%, rgba(18, 18, 18, 0.85) 100%);
}

@keyframes move-background {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 100%;
    }
}

/* мешура */
.content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center; /* по вертикали */
    align-items: center;     /* по горизонтали */
    text-align: center;
}