@charset "utf-8";
body {
	padding: 0;
	margin: 0;
	position: absolute;
}

@keyframes fadeIn {
  0% { opacity: 0; pointer-events: none; }
	15% { opacity: 0; }
	100% { opacity: 1; pointer-events: auto;}
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; pointer-events: none; }
	15% { opacity: 0; }
	100% { opacity: 1; pointer-events: auto;}
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; pointer-events: none; }
	15% { opacity: 0; }
	100% { opacity: 1; pointer-events: auto;}
}

@-o-keyframes fadeIn {
  0% { opacity: 0; pointer-events: none; }
	15% { opacity: 0; }
	100% { opacity: 1; pointer-events: auto;}
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; pointer-events: none; }
	15% { opacity: 0; }
	100% { opacity: 1; pointer-events: auto;}
}

/*For debugging.*/
/*
*{ border: 1px solid red; }
*/

.sightings {
	position: fixed;
    width:96%;
    height: 30%;
	top: 5%;
	left: 1%;
	
	font-family: 'Shrikhand', cursive;
	text-align: center;
	font-size: calc(.6rem + 2.5vw);
	color: #202020;
}

.story {
	display: none;
	position: fixed;
    width:80%;
    height: 65%;
	top: 30%;
	left: 8%;

	background-color: rgba(255, 255, 255, 0.7);
	padding-left: 2%;
	padding-right: 2%;
	
	text-align: left;
	font-size: 1.3em;
	font-family: 'Anonymous Pro';
	text-indent: 5%;
	line-height: 130%;
	
	color: #202020;
	opacity: 80%;
	
	overflow-y: scroll;
}

.img_a {
	position: fixed;
	width: 30%;
	top: 40%;
	left: 70%;
	z-index: -1;
  animation: fadeIn 30s;
  -webkit-animation: fadeIn 30s;
  -moz-animation: fadeIn 30s;
  -o-animation: fadeIn 30s;
  -ms-animation: fadeIn 30s;
}

.img_b {
	position: fixed;
	width: 20%;
	top: 66%;
	left: 5%;
	z-index: -1;
  animation: fadeIn 30s;
  -webkit-animation: fadeIn 30s;
  -moz-animation: fadeIn 30s;
  -o-animation: fadeIn 30s;
  -ms-animation: fadeIn 30s;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
	background: grey;
}

video {
	position:fixed;
	right:0;
	bottom:0;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:auto;
	z-index:-1;
}