@font-face {
   font-family: 'VulfMonoLightItalic';
   src: url('../fonts/Vulf_Mono-Light_Italic_web.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'VulfMonoRegular';
   src: url('../fonts/Vulf_Mono-Regular_web.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'VulfMonoBlack';
   src: url('../fonts/Vulf_Mono-Black_web.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

* {
	 -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
	border: none;
}

a:link, a:visited {
	color: #000;
}

a:hover, a:active {
	text-decoration: none;
}

h1 {
	font-size: 32px;
	line-height: 48px;
	padding-bottom: 56px;
}

h2 {
	font-size: 24px;
	line-height: 32px;
	padding-bottom: 48px;
}

body, html {
	height: 100%;
	width: 100%;
	font-family: VulfMonoLightItalic, monospace;
	font-size: 24px;
	line-height: 32px;
}

#home {
	background-color: #000;
}

@media only screen and (max-width: 440px) {
	body, html {
		font-size: 18px;
		line-height: 28px;
	}
	h1 {
		font-size: 24px;
		line-height: 32px;
		padding-bottom: 48px;
	}

	h2 {
		font-size: 18px;
		line-height: 24px;
		padding-bottom: 40px;
	}
}

#cocoon {
	position: relative;
	height: 100%;
	width: 100%;
}

#clock {
	position: relative;
	width: 100vw;
	height: 100vh;
}

.digit {
	display: inline-block;
	position: relative;
	content: "";
	
	background-image: url('../images/0.jpg');
	background-size: cover;
	background-position: center center;
	
	filter: hue-rotate(0rad);
}

.initiallyHidden {
	opacity: 0; /* note: not hidden, gonna be animating opacity */
}

#digitOne { background-image: url('../images/1.jpg'); }
#digitTwo { background-image: url('../images/2.jpg'); }

#digitThree { background-image: url('../images/3.jpg'); }
#digitFour { background-image: url('../images/4.jpg'); }

#digitFive { background-image: url('../images/5.jpg'); }
#digitSix { background-image: url('../images/6.jpg'); }

@keyframes indicator {
  0%   { bottom: 24px; }
  100% { bottom: 12px; }
}

#more {
	position: absolute;
	bottom: 24px;
	left: 50%;
	width: 26px;
	height: 16px;
	opacity: 0.075;
	animation-name: indicator;
	animation-duration: 2000ms;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	
	background: url('../images/moreIndicator.svg') center center no-repeat;
}

#info {
	margin-top: 100px;
	min-height: 200px;
	color: #fff;
	text-align: center;
}

#info section {
	margin-bottom: 200px;
}

#info section:last-of-type {
	margin-bottom: 0;
}

.apptitle {
	max-width: 100%;
	width: 622px;
	height: 180px;
	background: url('../images/tubeclock.jpg') center center no-repeat;
	background-size: contain;
	margin: 0 auto 40px auto;
}

#appDescription { max-width: 720px; }

#appDescription p {
	margin-bottom: 32px;
}

.content {
	max-width: 1024px;
	margin: 0 auto;
	padding: 0 40px;
}

.colorImages {
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
	     -moz-user-select: none; /* Firefox */
		  -ms-user-select: none; /* Internet Explorer/Edge */
	          user-select: none; /* Non-prefixed version, currently */
}

@media only screen and (max-width: 1024px) {
	.colorImages { max-width: 500px; }
}

.colorImages div {
	height: 128px;
	width: 75px;
	display: inline-block;
	position: relative;
	content: "";
	background-size: cover;
	background-position: center center;
	filter: hue-rotate(-3.14rad);
	
	animation-duration: 5000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes hue-rotate {
	0% { filter: hue-rotate(-3.14rad); }
	50% { filter: hue-rotate(0rad); }
	100% { filter: hue-rotate(3.14rad); }
}

.colorImages .animate {
	animation-name: hue-rotate;
}

.colorImages #zero { background-image: url('../images/0.jpg'); }
.colorImages #one { background-image: url('../images/1.jpg'); }
.colorImages #two { background-image: url('../images/2.jpg'); }
.colorImages #three { background-image: url('../images/3.jpg'); }
.colorImages #four { background-image: url('../images/4.jpg'); }
.colorImages #five { background-image: url('../images/5.jpg'); }
.colorImages #six { background-image: url('../images/6.jpg'); }
.colorImages #seven { background-image: url('../images/7.jpg'); }
.colorImages #eight { background-image: url('../images/8.jpg'); }
.colorImages #nine { background-image: url('../images/9.jpg'); }

#flicker {
	position: relative;
	white-space: nowrap;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
}

#flicker .container {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 1500px;
	text-align: center;
	margin-bottom:-13px;
}

#flicker .container div {
	display: inline-block;
	width: 375px;
	height: 350px;
	background-size: cover;
	background-position: center center;
	background-repeat: none;
}

@media only screen and (max-width: 1024px) {
	#flicker .container { width: 780px; }
	/* #flicker .container div { width: 225px; height: 210px; } */
	#flicker .container div { width: 195px; height: 182px; }
}

#largeDigitTwo {
	background-image: url('../images/large2.jpg');
}

#largeDigitSix {
	background-image: url('../images/large6.jpg');
}

#largeDigitThree {
	background-image: url('../images/large3.jpg');
}

#largeDigitEight {
	background-image: url('../images/large8.jpg');
}

#bottom {
	text-align: center;
	background-color: #fff;
	color: #000;
	padding-top: 100px;
	padding-bottom: 100px;
}

#free {
	font-size: 16px;
	font-family: VulfMonoRegular, monospace;
	padding-bottom: 56px;
	color: #888;
}

#bottom h1 { padding-bottom: 16px; }
#bottom h1 a.appLink { font-family: VulfMonoBlack, monospace; color: #000; }

.credits {
	font-size: 16px;
	font-family: VulfMonoRegular, mono;
}

.credits .tinylink {
	font-size: 12px;
	padding-top: 48px;
}

.credits .tinylink a { color: #888; }

#privacypolicy {
	font-family: VulfMonoBlack, monospace;
	background-color: #fff;
	color: #000 !important;
}

#privacypolicy h2 { padding-top: 100px; }

#privacypolicy p, #privacypolicy ul {
	font-family: VulfMonoRegular, monospace;
	font-size: 14px;
	margin-bottom: 24px;
}