/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.cdnfonts.com/css/latin-modern-math');

/*  Reset: remove default margins and padding */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* html and body span the full document height */
html, body {
	color: white;
	width: 100%;
	height: 100%;
	cursor: default;
	text-align: center;
	font-family: Mulish;
	overscroll-behavior: none;
	margin: 0; /* prevents unwanted scroll bars */
	padding: 0; /* prevents unwanted scroll bars */
		
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none;     /* IE 10 and IE 11 */
	user-select: none;         /* Standard syntax */
	
	background: linear-gradient(#212121, #424242);
}

/* Main wrapper spans 100% width, full viewport height */
.full-screen-container {
	width: 100vw;
	height: 100svh; /* Perfect fit for mobile Safari toolbars */
	display: flex;
	/*align-items: center;*/
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}
header {
	font-size: 8vw;
	font-weight: 200;
	letter-spacing: -.3vw;
	padding: 1.55mm;
	background: -webkit-radial-gradient(#D6D6D6, #212121);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
h3 {
	color: #444;
	font-size: 1.7vw;
	font-weight: 300;
}
/* main {position: relative; top: -20vh;} */
button {
	opacity: .5;
	color: #111111;
	width: 10vw;
	padding: 1vw;
	margin: 4vw .5vw;
	font-size: .76vw;
	border-radius: 5px;
	border: 1px solid transparent;
	filter: drop-shadow(5px 5px 14px #151515);
	
	/* 1. Define the transition on the BASE state */
	transition: filter 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
button:hover {
	opacity: .75;
	color: #222222;
	background-color: white;
	filter: drop-shadow(5px 5px 14px #121212);
	will-change: filter; /* Tells the browser to optimize for filter changes */
	/* OR use a 3D transform hack if will-change doesn't work: */
	transform: translateZ(0);
}
button:active {outline: 2px auto -webkit-focus-ring-color;}

footer {
	color: silver;
	padding: 5mm;
	font-size: .75em;
	position: absolute;
	bottom: 0;
	left: 0;
}