body {
	background-color: #ffffff;
	color: #000000;
}
.top-text {
	font-family: 'Helvetica', sans-serif;
	color: #000000;
	text-align: center;
	margin-top: 65px;
	margin-bottom: 15px;
}
.frame {
	text-align: center;
	border-radius: 3px;
	border-style: solid dotted solid dotted;
	max-width: 330px;
	margin: auto;
	padding: 14px 0px 6px 0px;
}
.loader-box {
	display: none;
	background-color: #78909c;
	border-radius: 3px;
	padding: 10px 10px 10px 10px;
}
.bottom-text {
	font-family: 'Helvetica', sans-serif;
	font-size: 18px;
	color: #222222;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
}
.footer-text {
	font-family: 'Helvetica', sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #555555;
	text-align: center;
	margin-top: 200px;
	margin-bottom: 10px;
}
.footer {
	margin-top: 200px;
	margin-bottom: 10px;
	text-align: center;
}
.info-text {
	font-family: 'Helvetica', sans-serif;
	font-size: 8px;
	text-align: center;
	color: #555555;
	margin: 30px;
}
.info-text a
{
	color: #000000;
}
.loader {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 2s linear infinite;
}
@media (prefers-color-scheme:dark) {
	body {
		color-scheme: dark;
		background-color: #121212;
		color: #ffffff;
	}
	.top-text {
		color: #ffffff;
	}
	.bottom-text {
		color: #dddddd;
	}
	.footer-text {
		color: #bbbbbb;
	}
	.info-text {
		color: #bbbbbb;
	}
	.info-text a {
		color: #ffffff;
	}
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}