body, html {
	height: 100%; margin: 0; font: 400 15px/1.8 "Lato", sans-serif;
	background: #111; color: #EFEFEF;
}
a { color:#F0F0F0; }
a:hover, a:focus { color:#FFF; }

body::before {
	content: "";
	position: fixed; top: -10px; left:-10px; bottom:-10px; right:-10px; z-index: -2; min-height: 100vh; min-height: 100dvh;
	background-image: url(./assets/bg.webp);
	background-repeat: no-repeat; background-size: cover; background-position: center center;
	opacity: 0.35; filter: blur(15px); filter: blur(max(15px,2vh));
}
body::after {
	content: "";
	position: fixed; width: 100%; height: 100%; top: 0; left:0; bottom:0; right:0; z-index: -1;
	background: rgba(255,255,255,0.1);
}
body { background:none; }

.middleScreen { display: flex; flex-flow: column wrap; z-index: 3; justify-content: center; align-items: center; text-align: center; min-height: 100vh; opacity:1; overflow:auto; }

.ppimg > img { height: 120px; clip-path: circle(45%); }

.content { color: #EFEFEF; line-height: 0; margin: auto; padding: 1rem; }
.content > h3 { display: block; margin: 0.5rem 0; font-size: 2rem; line-height: 2rem; }
.content > p { display: block; margin: 0.5rem 0; font-size: 1rem; line-height: 1rem; }
.content > p + .button  { margin-top: 1.5rem; }
.content > p + span  { margin-top: 1.5rem; }
.content > span { display: block; margin: 0.7rem auto -0.45rem auto; font-size: 0.9rem; line-height: 0.9rem; opacity: 0.85; text-align: left; padding-left: 1.75rem; }
.button {
	position: relative; display: block; font-size: 1.25rem; line-height: 1.25rem; border-radius: 5px;
	background: rgba(255,255,255,0.15); padding: 0.55rem 1rem 0.48rem 1rem; box-shadow: rgba(0,0,0,0.25) 0px 2px 4px 0px;
}
.content .button { display: block; color: #EFEFEF; margin: 0.7rem auto; padding: 0.6rem 1rem 0.6rem 2.75rem; text-align: left; min-width: fit-content; }

.button > img { position: absolute; max-height: 2rem; left: 0.55rem; top: 0.4rem; opacity: 0.8; }
.button > span { display: inline; }
.button:hover, .button:focus { color: #FFF; background: rgba(255,255,255,0.16); box-shadow: rgba(0,0,0,0.15) 0px 2px 4px 0px; }
.button:hover { outline: solid 1px rgba(255,255,255,0.5); }
.button:focus { outline: solid 1px rgba(255,255,255,0.75); }
.button:hover > img, .button:focus > img { opacity: 1; }
.button > span > span { display: inline; opacity:0.65; }

.button > span._n { display: inline; }
.button:hover > span._n { display: none; }
.button > span._h { display: none; }
.button:hover > span._h { display: inline; }

.button:hover > span > span, .button:focus > span > span { opacity:0.9; }
a.button { display: block; text-decoration: none; }
span.button { display: block; cursor:default; }

.footer { color: #EFEFEF; line-height: 0; margin: 0.5rem; padding: 0.25rem 1rem; }
.footer .button { display: inline-block; margin: 0.25rem 0.5rem; font-size: 1rem; line-height: 1rem; }
.footer .button:hover, .footer .button:focus { font-weight: normal; }