:root {
	font-size: 16px;
	--franky-color: #fd1e6e;
	--franky-color-rgb: 253, 30, 110;
	--blink-color: rgba(var(--franky-color-rgb), 0.3);
	--page-color:#FAFAFA;
}

@keyframes move {
	0% {
		box-shadow: 0px 0px 0px 0px #eafd1400;
	}
	45% {
		transform: scale(1.2);
		box-shadow: 0px 0px 0px 0px #eafd1400;
	}
	50% {
		transform: scale(1.2);
		box-shadow:
			0px 0px 0px 0px #eafd14,
			inset 0px 0px 0px 2px #eafd1400;
	}
	55% {
		box-shadow:
			0px 0px 0px 0px #eafd14,
			inset 0px 0px 0px 2px #eafd14;
	}

	100% {
		box-shadow:
			0px 0px 0px 17px #eafd1400,
			inset 0px 0px 0px 2px #eafd1400;
	}
}

@keyframes blink {
	0% {
		box-shadow:
			0px 0px 0px 0px var(--blink-color),
			0px 0px 0px 0px var(--blink-color);
	}
	10% {
		box-shadow:
			0px 0px 0px 8px var(--blink-color),
			0px 0px 0px 0px var(--blink-color);
	}
	40% {
		box-shadow:
			0px 0px 0px 8px var(--blink-color),
			0px 0px 0px 0px var(--blink-color);
	}
	70% {
		box-shadow:
			0px 0px 0px 8px var(--blink-color),
			0px 0px 0px 6px var(--blink-color);
	}
	90% {
		box-shadow:
			0px 0px 0px 0px var(--blink-color),
			0px 0px 0px 0px var(--blink-color);
	}
	100% {
		box-shadow:
			0px 0px 0px 0px var(--blink-color),
			0px 0px 0px 0px var(--blink-color);
	}
}

body {
	/* background-color: #498edf; */
	background-color: black;
	color: white;
	line-height: 1.1;
	margin: 0;
	overflow: hidden;
}

.qrcode {
	--qr-size: 228px;
	background-color: white;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	width: var(--qr-size);
	height: var(--qr-size);
	overflow: hidden;
	box-shadow: 0px 0px 13px 0px #00000057;
}

.barcode {
	& img {
		width: 100%;
		/* height: 100%; */
	}
}

.divider {
	height: 1px;
	width: 100%;
	background-color: rgba(128, 128, 128, 0.282);
	margin: 4px 0;
}