body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    background-color: #1a1a2e;
    color: white;
    font-family: Arial, sans-serif;
    justify-content: center;
    align-items: center;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: -1;
}

@keyframes fall {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(100vh);
    }
}

.snowflake {
    position: absolute;
    top: -50px;
    color: white;
    font-size: 20px;
    animation: fall linear infinite;
    user-select: none;
    pointer-events: none;
}

.snowflake:nth-child(1) { left: 5%; animation-duration: 10s; font-size: 15px; }
.snowflake:nth-child(2) { left: 15%; animation-duration: 12s; font-size: 20px; }
.snowflake:nth-child(3) { left: 25%; animation-duration: 8s; font-size: 18px; }
.snowflake:nth-child(4) { left: 35%; animation-duration: 14s; font-size: 22px; }
.snowflake:nth-child(5) { left: 45%; animation-duration: 9s; font-size: 16px; }
.snowflake:nth-child(6) { left: 55%; animation-duration: 11s; font-size: 19px; }
.snowflake:nth-child(7) { left: 65%; animation-duration: 13s; font-size: 21px; }
.snowflake:nth-child(8) { left: 75%; animation-duration: 7s; font-size: 17px; }
.snowflake:nth-child(9) { left: 85%; animation-duration: 10s; font-size: 20px; }
.snowflake:nth-child(10) { left: 95%; animation-duration: 12s; font-size: 15px; }

.login-container {
    background-color: #16213e;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    width: 300px;
    text-align: center;
}

.logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.login-container {
background-color: #16213e;
padding: 40px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
text-align: center;
display: inline-block; /* Контейнер подстраивается под содержимое */
min-width: 250px; /* Минимальная ширина, чтобы контейнер не был слишком узким */
}

.login-container {
background-color: #16213e;
padding: 40px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
text-align: center;
display: inline-block; /* Контейнер подстраивается под содержимое */
min-width: 300px; /* Минимальная ширина */
max-width: 100%; /* Максимальная ширина */
width: auto; /* Ширина подстраивается под содержимое */
}

.login-container h1 {
font-size: 32px;
font-weight: bold;
font-family: 'Roboto Mono', monospace;
color: white;
margin-bottom: 20px;
white-space: nowrap; /* Текст в одну строку */
overflow: hidden; /* Предотвращает выход текста за границы */
text-overflow: ellipsis; /* Добавляет многоточие, если текст не помещается */
}

.code-inputs {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
font-family: 'Roboto Mono', monospace;
}

.code-inputs input {
width: 50px;
height: 50px;
text-align: center;
font-weight: 500 !important; /* Полужирный шрифт для цифр */
font-size: 24px;
font-family: 'Roboto Mono', monospace;
border: 2px solid #2c3e50;
border-radius: 10px;
background-color: #34495e;
color: white;
outline: none;
}

.code-inputs input:focus {
border-color: #00bcd4;
font-family: 'Roboto Mono', monospace;
}

.error-message {
color: #ff4444;
font-size: 14px;
margin-bottom: 10px;
}
/* Анимация для подсветки границ красным */
@keyframes glowRed {
0% {
border-color: #2c3e50; /* Начальный цвет границы */
}
50% {
border-color: #ff4444; /* Красный цвет границы */
}
100% {
border-color: #2c3e50; /* Возврат к исходному цвету границы */
}
}

/* Анимация для подсветки границ зеленым */
@keyframes glowGreen {
0% {
border-color: #2c3e50; /* Начальный цвет границы */
}
50% {
border-color: #00ff00; /* Зеленый цвет границы */
}
100% {
border-color: #2c3e50; /* Возврат к исходному цвету границы */
}
}

/* Классы для анимации */
.code-inputs input.error {
animation: glowRed 1.5s ease-in-out; /* Применяем анимацию для ошибки */
}

.code-inputs input.success {
animation: glowGreen 1.5s ease-in-out; /* Применяем анимацию для успеха */
}