*
{
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
	font-family: 'Nunito', sans-serif;
}

body
{
	min-height: 100vh;
	color: #393838;
	background: linear-gradient(135deg, #f8fbff 0%, #eef8f4 52%, #fff7f1 100%);
}

h1,
h2,
h3,
h4
{
	color: #393838;
	font-family: 'Parisienne', cursive;
	font-weight: 500;
	line-height: 1.1;
}

h1
{
	font-size: 4.8em;
	font-weight: 700;
}

.login-page
{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 32px 16px;
}

.login-card
{
	width: 100%;
	max-width: 500px;
	padding: 34px 32px 36px;
	text-align: center;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(70, 130, 126, 0.18);
	border-radius: 8px;
	box-shadow: 0 18px 45px rgba(37, 62, 75, 0.12);
}

.login-dove-flight
{
	display: block;
	width: 86px;
	margin: 0 auto 12px;
	transform-origin: center;
	animation: dove-fly-in 1800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-dove
{
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.9;
	transform-origin: center;
	filter: drop-shadow(0 10px 12px rgba(37, 62, 75, 0.14));
	will-change: transform, opacity;
	animation: dove-hover 3200ms ease-in-out 1900ms infinite;
}

.login-date
{
	margin-top: 4px;
	color: #4d6f74;
	font-size: 1.4em;
	font-weight: 700;
}

.login-form
{
	margin-top: 28px;
}

.submit
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	min-width: 64px;
	padding: 0 18px;
	color: #fff;
	font-weight: 700;
	background: #3e7c78;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 8px 18px rgba(42, 98, 95, 0.18);
	transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.submit:hover,
.submit:focus
{
	background: #326662;
	box-shadow: 0 10px 22px rgba(42, 98, 95, 0.22);
}

.submit:active
{
	transform: translateY(1px);
}

.pwd
{
	display: block;
	flex: 1 1 auto;
	height: 44px;
	min-width: 0;
	width: 100%;
	padding: 10px 13px;
	color: #393838;
	font-size: 16px;
	background: #fff;
	border: 1px solid #c8dbd8;
	border-radius: 6px;
	box-shadow: inset 0 1px 2px rgba(37, 62, 75, 0.05);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pwd:focus
{
	border-color: #3e7c78;
	box-shadow: 0 0 0 3px rgba(62, 124, 120, 0.18);
	outline: 0;
}

.password-form
{
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 0 auto;
	max-width: 420px;
	width: 100%;
}

.form-group.password-form
{
	margin-bottom: 0;
}

.login-alert
{
	margin: 24px auto 0;
	max-width: 420px;
	text-align: left;
	border-radius: 6px;
}

.login-alert + .login-form
{
	margin-top: 16px;
}

@media (max-width: 480px)
{
	.login-page
	{
		align-items: flex-start;
		padding: 28px 14px;
	}

	.login-card
	{
		padding: 28px 18px 24px;
	}

	.login-dove-flight
	{
		width: 72px;
	}

	h1
	{
		font-size: 3.6em;
	}

	.login-date
	{
		font-size: 1.18em;
	}

	.login-form
	{
		margin-top: 24px;
	}

	.password-form
	{
		flex-direction: column;
		gap: 10px;
	}

	.submit
	{
		width: 100%;
	}

}

@media (prefers-reduced-motion: reduce)
{
	.login-dove-flight,
	.login-dove
	{
		animation: none;
	}
}

@keyframes dove-fly-in
{
	0%
	{
		opacity: 0;
		transform: translate3d(-180px, 34px, 0) scale(0.66) rotate(-5deg);
	}

	45%
	{
		opacity: 1;
		transform: translate3d(-74px, -18px, 0) scale(0.86) rotate(3deg);
	}

	100%
	{
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1) rotate(0);
	}
}

@keyframes dove-hover
{
	0%,
	100%
	{
		transform: translate3d(0, 0, 0) rotate(0);
	}

	50%
	{
		transform: translate3d(0, -6px, 0) rotate(-1deg);
	}
}