html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.card { transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important; }

.content img { max-width: 100%; height: auto; }

/* Highlighted login button style used across public pages */
.btn-login-glow {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 0;
	color: #fff !important;
	font-weight: 800;
	letter-spacing: .04em;
	background: linear-gradient(135deg, #ff735b 0%, #de4733 38%, #b42c1f 100%);
	box-shadow: 0 12px 26px rgba(192, 57, 43, .4), 0 2px 10px rgba(143, 34, 24, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
	animation: loginPulse 2.2s ease-in-out infinite;
}

.btn-login-glow::before {
	content: "";
	position: absolute;
	top: -120%;
	left: -35%;
	width: 34%;
	height: 340%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .52), rgba(255, 255, 255, 0));
	transform: rotate(18deg);
	pointer-events: none;
}

.btn-login-glow:hover {
	transform: translateY(-2px);
	filter: saturate(1.15);
	box-shadow: 0 16px 34px rgba(192, 57, 43, .55), 0 4px 12px rgba(143, 34, 24, .4), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn-login-glow:hover::before {
	animation: loginShine .85s ease;
}

.btn-login-glow:active {
	transform: translateY(0);
	box-shadow: 0 8px 16px rgba(192, 57, 43, .32);
}

.btn-login-glow i {
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35));
}

@keyframes loginShine {
	0% { left: -38%; }
	100% { left: 120%; }
}

@keyframes loginPulse {
	0%, 100% { box-shadow: 0 12px 26px rgba(192, 57, 43, .4), 0 2px 10px rgba(143, 34, 24, .35), inset 0 1px 0 rgba(255, 255, 255, .22); }
	50% { box-shadow: 0 16px 34px rgba(192, 57, 43, .52), 0 4px 14px rgba(143, 34, 24, .42), inset 0 1px 0 rgba(255, 255, 255, .26); }
}