/*
 * ╔══════════════════════════════════════════════════════╗
 * ║            MC THEME – Loading Screen CSS             ║
 * ╠══════════════════════════════════════════════════════╣
 * ║  Created by  : WittyBits Studio                      ║
 * ║  Website     : https://wittybits.net                 ║
 * ║  License     : Free to use – see LICENSE.txt         ║
 * ╚══════════════════════════════════════════════════════╝
 */

html, body {
	margin:0;
	padding:0;
	width:100%;
	min-height:100%;
	scroll-behavior:smooth;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
	background-color:#e8303b;
	font-family:Arial, sans-serif;
	min-height:100vh;
	min-height:100dvh;
}
#wb-overlay {
	position:fixed;
	inset:0;
	background:#000;
	pointer-events:none;
	z-index:9999;
	animation:overlayReveal 0.6s ease forwards;
}
#wb-overlay.wb-closing {
	animation:overlayClose 0.5s ease forwards;
}
@keyframes overlayReveal {
	from { opacity:1; }
	to { opacity:0; }
}
@keyframes overlayClose {
	from { opacity:0; }
	to { opacity:1; }
}
#wb-loader {
	width:100%;
	min-height:100vh;
	min-height:100dvh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:clamp(38px, 8vh, 72px);
	padding:24px;
}
#wb-progress-bg {
	width:min(620px, 78vw);
	height:30px;
	padding:3px;
	margin:0 auto;
	border:2px solid #fff;
}
#wb-progress-bar {
	width:100%;
	height:100%;
	background-color:#fff;
	animation:progressAnimation 6s forwards;
}
@keyframes progressAnimation {
	from { width:0; }
	to   { width:100%; }
}
#wb-logo {
	width:100%;
	text-align:center;
	font-family:"VT323", monospace;
	font-size:clamp(64px, 16vw, 120px);
	line-height:1;
	color:white;
	text-shadow:4px 4px rgba(0,0,0,0.35);
	letter-spacing:3px;
}
@media only screen and (max-width: 600px) {
	#wb-loader {
		gap:34px;
		padding:20px;
	}
	#wb-progress-bg {
		width:86vw;
		height:26px;
	}
}