:root {
		--bs-success:#198754;
		--bs-success-darker:#1a774a;
}

html, body {
//	background-color: #f3f6f4;
	background: linear-gradient(to bottom, #dcf6ff, #f5fdff, #ffffff);
  height: 100%;
  margin: 0;
}

body {
		font-family: sans-serif;
		height: 100vh;             /* Высота — 100% окна браузера */
		margin: 0;
		display: flex;             /* включаем flex-контейнер */
		justify-content: center;   /* по горизонтали */
		align-items: center;       /* по вертикали */
}

.background {
		position: fixed;
		background-image: url("footer-scaled.0a89b7c02a14.webp");
		background-size: contain;      /* Масштабирует картинку на весь экран */
		background-repeat: no-repeat;  /* Не повторяет изображение */
		background-position: bottom;   /* Центрирует изображение */
		top: -5%;
		width: 105%;
		height: 105%;
}

.background.animate {
		animation: expandBg 1.2s ease-out forwards; /* Анимация запускается при загрузке */
}

.container.opaque {
		animation: opacFr 1.2s ease-out forwards; /* Анимация запускается при загрузке */
}

.login-form.shake {
	animation: shake 0.35s ease;
}


/* Ключевые кадры анимации */
@keyframes expandBg {
	from {
		top: 0;
		width: 100%;
		height: 100%;
	}
	to {
		top: -5%;
		width: 105%;
		height: 105%;
	}
}

@keyframes opacFr {
	from { opacity: 0; }
	to { opacity: 1; }
}


@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(5px); }
	40% { transform: translateX(-5px); }
	60% { transform: translateX(2px); }
	80% { transform: translateX(-2px); }
}

.container {
		margin-bottom: 30vh;
    max-width: 360px;
    width: 100%;
}

h2 {
		font-size: 2rem;
    text-align: center;
    margin-top: 40px;
    color: #398d75;
}

/* Форма входа */
.login-form {
		position: relative;
		z-index: 1;  /* Поверх фона */
		margin: 35px 0 0 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
//    background-color: #f8f9f8;
//    box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.1);
		background-color: #f7fdff;
    box-shadow: 0 1px 8px 0 rgb(157 225 216 / 55%);
}

.mb-3 {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 1.2rem;
    color: #333;
}

.form-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
    margin-top: 0.25rem;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-field:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Эффект фокуса */
}

.btn {
    width: 100%;
    padding: 10px 15px;
    font-size: 1.25rem;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: var(--bs-success);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn:hover {
    background-color: var(--bs-success-darker);
}
.red-border {
		border-color: #ffaaaa;
}