@font-face {
	font-family: "Novel";
	src: url("/assets/fonts/novel-sans-pro.woff");
}

body {
	margin: 0;
	padding: 0;
	background-color: #000;
	color: #fff;
}

:root {
	--popit-primary: #0b60ff;
	--popit-secondary: #a09687;
}

.center-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
}

.pod-btn-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.pod-left {
	text-align: left;
}

.pod-right {
	text-align: right;
}

.pod-left li {
	transform-origin: 25% 50%;
}

.pod-right li {
	transform-origin: 75% 50%;
}

.pod-btn-list a {
	display: inline-block;
	text-align: center;

	text-decoration: none;
	font-family: "Novel";
	font-size: 32px;

	padding: 16px 20px;
	padding-bottom: 10px;
	margin-bottom: 8px;

	background-color: var(--popit-secondary);
	color: #fff;

	mask-image: url("/assets/images/pod_button.svg");
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: center;

	transition:
		transform 0.7s cubic-bezier(0.25, 2, 0.5, 1),
		background-color 0.7s cubic-bezier(0.2, 1, 0, 1);
}

.pod-btn-list a:hover {
	background-color: var(--popit-primary);
	transform: scale(1.25);
}

.polaroid {
	display: inline-block;
	position: relative;
	margin: 0 24px;
}

.polaroid img:first-child {
	position: absolute;
	width: 100%;
	height: 100%;
	scale: 68%;

	transform: rotate(3deg);
	transform-origin: 58.5% 26%;
}

.polaroid img:last-child {
	position: relative;
	transform: rotate(4deg);
}