/* This is a single-line comment */

html {
/*	background-image: linear-gradient(90deg, #000, #228, #DDDDFF); */
	background-image: linear-gradient(90deg, #222, #666, #FFF);    
}

a:link {
	color:#FFF;
}

a:visited {
	color:#555;
}

a:hover {
	color: #00F;
}

a:active {
	color:hotpink;
}



h1.intro {
	font-family: Arial;
	color:white;
	font-size: 3em;
	text-shadow: 3px 3px 3px #222222;
	text-align: center;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #111111;
}

h2 {
	text-shadow: 3px 3px 8px #777;
	text-align:center;
}

h4.intro {
	font-family: Arial;
	color: #CFCFCF;
	font-size: 1.8em;
	text-shadow: 2px 2px 2px #222222;
	text-align: center;
	-webkit-test-stroke-width: 1px;
	-webkit-test-stroke-color: #111111;
}

table {
	margin:auto;
	border-spacing: 15px;
}

.WebLog {
	font-family: Consolas;
	color:yellow;
	font-size:1.8em;
	text-align:center;
	text-shadow: 3px 3px 8px #222222;
	line-height: 0;
}

.rec-plate-rounded {
  border-radius: 15px;
  background: #FAFAFA;
  padding: 1px 10px 1px 15px;
  width: 60%;
  min-width: 800px;
  max-width: 1400px;
  height: auto;
}

.linkBox {
	background-image: linear-gradient(90deg, #999, #99B, #99F);
	padding:2em;
	border-radius:5px;
	box-shadow: 14px 14px 8px #222;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:10px;
}

.shadow-box {
	box-shadow: 14px 14px 8px #222;
}

section.linkBox
p {
	font-family: Arial;
	font-size: 1.2em;
	text-shadow: 3px 3px 8px #777;
}

div.blog
p {
	font-family: Arial;
	font-size: 1.2em;
	text-shadow: 3px 3px 8px #AAAAAA;
}

img.link, img.nav, img.play {
	transition: transform 0.75s, opacity 1.5s, box-shadow 0.75s;
	border:0;
}

img.link:hover {
	transform: scale(1.1);
	opacity: 40%;
	box-shadow: 5px 5px 5px #111;
}
/* For the kids. */
img.play:hover {
	transform: scale(10.1);
	opacity: 100%;
	box-shadow: 5px 5px 5px #111;
}

img.nav:hover {
	transform: scale(1.2);
	opacity: 90%;
	box-shadow: 5px 5px 5px #222222;
}

.hr-belowBlog {
	width:50%;
	box-shadow: 2px 2px 4px #333;
	height: 0.5em;
	margin-top: 2em;
	margin-bottom: 2em;
	border-style: groove;
	background-color: #000;
	min-width: 650px;
}
.white {
	color:#FDFDFD;
}

.center {
	/*margin:auto;*/
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.tcenter {
	text-align:center;
}

.historyInfo
a:visited{
	color:#FFF;
}

.historyInfo {
	font-size: 1.5em;
	text-shadow: 5px 5px 5px #333;
}
	
.caption {
	font-family: Arial;
	text-align:center;
	font-size: 1.0em;
	text-shadow: 2px 2px 4px #222;
}


section {
	padding: 1em;
	border: inset #333 thin;
}

@media (min-width: 1050px) {
	main {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

}












/*----------------------Headline Animation Below----------------------*/









.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}


@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}