html {overflow-y: auto;}
body {margin: 0; padding: 0; background-color: #666; overflow-y: auto;}

a {display: inline-block; text-shadow: 3px 3px 15px #333;}
a:link {color: rgb(255,255,255,0.9); text-decoration: none; border-bottom: 0px solid #fff;}
a:visited {color: rgb(255,255,255,0.9); text-decoration: none; border-bottom: 0px solid #fff;}
a:hover {transform: translate(-3px, -3px); color: #fc0; text-decoration: none; border-bottom: 0px solid #fff; transition: 1s; opacity: 1;}
a:active {color: rgb(255,255,255,0.9); text-decoration: none; border-bottom: 0px solid #fff;}

a.btn:link {text-decoration: none; border: 0px;}
a.btn:visited {text-decoration: none; border: 0px;}
a.btn:hover {text-decoration: none; border: 0px;}
a.btn:active {text-decoration: none; border: 0px;}

#background-video {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1
}

.message {
	position: absolute;
	top: 5%;
	left: 15%;
	transform: translate(-50%, -50%);
	width: 60%;
	padding: 40px 55px 20px 55px;
	font: bold 1.8vw/1.2em "Urbanist", arial, helvetica;
	color: rgba(255, 255, 255, 0.6);
	background-color: rgba(0, 0, 0, 0.2);
	border: 10px solid #fff;
	border-radius: 90px 0px 90px 0px;
	animation: colorSwitch 120s ease infinite, fadeIn 2s ease forwards, szUp 1s ease forwards;
	z-index: 1000;
	box-shadow: 3px 3px 15px #000;
	margin: 0;
}

h1 {
	margin: 0 0 -0.10em 0; padding: 0; 
	font: bold 8vw/1.2em "Urbanist", arial, helvetica;
	color: rgb(255,255,255,0.9);
	text-shadow: 3px 3px 15px #333;
	letter-spacing: 1px;
}

h2 {
	margin: 0 0 0.4em 0; padding: 0 0 30px 0; 
	font: bold 2.4vw/1.2em arial, helvetica;
	color: rgb(255,255,255,0.8);
	text-shadow: 3px 3px 15px #333;
	letter-spacing: 1px;
	text-align: center;
}
h3 {
	margin: 0 0 20px 0; padding: 0; 
	font: bold 2.4vw/1.2em "Urbanist", arial, helvetica;
	color: rgb(255,255,255,0.7);
	text-align: center;
	letter-spacing: 0px;
}
.nav {
	margin: 0 0 0 0; padding: 0; 
	font: bold 2.4vw/1.2em "Urbanist", arial, helvetica;
	color: rgb(255,255,255,0.8);
	text-align: right;
}

.br {display: none;}
.dt {display: inline;}
svg {width: 30px; height: 30px; opacity: 0.7;}
svg:hover {opacity: 1; transform:scale(1.3);}

@media (max-width: 700px) {
   #background-video { display: none; }
	body {margin: 20px; padding: 0; background-color: #333;
		background-image:url("pingstanton.jpg");
		background-repeat: no-repeat;
  		background-position: center center;
  		background-attachment: fixed;
  		background-size: cover;
  		overflow-y: auto;
	}

.message {
	position: fixed;
	top: 5%;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	padding: 20px 25px 50px 25px;
	margin: 0;
	font: bold 4vw/1.2em "Urbanist", arial, helvetica;
	color: rgba(255, 255, 255, 0.8);
	background-color: #f60;
	border: 10px solid #fff;
	border-radius: 90px 0px 90px 0px;
	animation: colorSwitch 120s ease infinite, fadeIn 2s ease forwards;
	z-index: 1000;
	box-shadow: 3px 3px 15px #000;
}

.descp {display: none;}

	h1 {
		margin: 0 0 0 0; padding: 0; 
		font: bold 9vw/1.0em "Urbanist", arial, helvetica;
		color: rgb(255,255,255,0.9);
		text-shadow: 3px 3px 15px #333;
		letter-spacing: 1px;
		text-align: right;
	}
	
	h2 {
		margin: 0.2em 0 0.1em 0; padding: 0; 
		font: bold 4vw/1.2em arial, helvetica;
		color: rgb(255,255,255,0.8);
		text-shadow: 3px 3px 15px #333;
		letter-spacing: 1px;
		text-align: right;
	}
	h3 {
		margin: 0.4em 0 0 0; padding: 0; 
		font: bold 4vw/1.1em "Urbanist", arial, helvetica;
		color: rgb(255,255,255,0.7);
		text-align: right;
		letter-spacing: 0.5px;
	}
	.nav {
		margin: 0 0 0 0; padding: 0; 
		font: bold 8vw/1.2em "Urbanist", arial, helvetica;
		color: rgb(255,255,255,0.8);
		text-align: right;
	}
	.br {display: inline;}
	.dt {display: none;}

	.nav {
		margin: 0 0 0 0; padding: 0; 
		font: bold 5vw/1.2em "Urbanist", arial, helvetica;
		color: rgb(255,255,255,0.8);
		text-align: right;
	}
}