:root {
	--bg-1: #edf0f6;
	--bg-2: #f5f6fb;
	--ink: #1f3053;
	--accent-blue: #2f67dc;
	--accent-gold: #a7771b;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background-color: #d9d8f5;
	background-image: url("../imgs/background.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero-shell {
	position: relative;
}

.phone-shot {
	transform-origin: center center;
	will-change: auto;
	transition: none;
}

.phone-home,
.phone-settings,
.phone-history {
	filter: drop-shadow(0 20px 44px rgba(17, 25, 40, 0.13));
}

.phone-home {
	animation: none;
}

.phone-settings {
	transform: rotate(4deg);
	animation: none;
}

.phone-history {
	transform: rotate(-4deg);
	animation: none;
}

@media (max-width: 1023px) {
	.phone-settings,
	.phone-history {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.phone-shot {
		animation: none !important;
		transition: none;
		transform: none !important;
	}
}