/* Fonts */

@font-face{
	font-family: "FiraSans-Light";
	src: url("../fonts/FiraSans-Light.eot") format("eot"),
	     url("../fonts/FiraSans-Light.woff") format("woff"),
	     url("../fonts/FiraSans-Light.ttf") format("truetype");
}

@font-face{
	font-family: "FiraSans-Regular";
	src: url("../fonts/FiraSans-Regular.eot") format("eot"),
	     url("../fonts/FiraSans-Regular.woff") format("woff"),
	     url("../fonts/FiraSans-Regular.ttf") format("truetype");
}

@font-face{
	font-family: "FiraSans-Medium";
	src: url("../fonts/FiraSans-Medium.eot") format("eot"),
	     url("../fonts/FiraSans-Medium.woff") format("woff"),
	     url("../fonts/FiraSans-Medium.ttf") format("truetype");
}


/* Main */

html {
	height: 100%;
	overflow: hidden;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	text-align: center;
	font-family: "FiraSans-Regular", Helvetica, Verdana, sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-drag: none;
}

a:link,
a:visited {
	text-decoration: none;
}

.link-blue,
.link-blue a:link,
.link-blue a:visited {
	color: rgb(16, 128, 225);
}

.num:hover,
.prev:hover,
.next:hover,
.theme-link:hover {
	cursor: pointer;
}

.slide-frame,
.settings-top,
.themes {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}

.blank-start {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgb(4, 8, 16);
	z-index: 100;
	transition: opacity 300ms linear;
}


/* Page layouts */

.slide-frame,
.page-1,
.page-2,
.left-blank,
.middle-blank,
.right-blank,
.shadow {
	position: absolute;
	height: 100%;
}

.slide-frame {
	width: 100%;
}

.page-1 {
	left: 95%;
	width: 100%;
}

.page-2 {
	left: 195%;
	width: 100%;
}

.left-blank {
	left: 90%;
	width: 6%;
	transition: color 250ms linear, background-color 250ms linear;
}

.middle-blank {
	left: 194%;
	width: 2%;
}

.right-blank {
	left: 289%;
	width: 101%;
}

.shadow {
	left: 90%;
	width: 4%;
	z-index: -10;
	box-shadow: -5px 0 20px 10px black;
}

/* In theory, I shouldn't need this, but don't let anyone tell iOS is perfect.
   This removes iOS translate and opacity transition flicker,
   and it also seem to result in smoother translate animations. */
.slide-frame,
.page-1,
.page-2,
.left-blank,
.middle-blank,
.right-blank,
.shadow {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}


/* Numbers */

.num-list {
	position: relative;
	width: 100%;
}

.num-circle {
	display: inline-block;
	position: relative;
	margin: 2%;
	padding: 12.5%;
	border-style: solid;
	border-width: 2px;
	border-color: rgb(245, 245, 235);
	border-radius: 50%;
	transition-property: border-color;
	transition-duration: 200ms;
	transition-timing-function: cubic-bezier(0, 0, 0.5, 1);
}

.num {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	font-size: 12.5vw;
	line-height: 200%;
	border-radius: 50%;
}

.small-num {
	font-size: 10vw;
	line-height: 250%;
}


/* Settings */

.settings {
	position: absolute;
	width: 90%;
	height: 100%;
	color: rgb(164, 164, 170);
	background-color: rgb(36, 36, 40);
	text-align: left;
	font-size: 1.5em;
	z-index: 0;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.settings-top {
	padding-top: 0.1em;
	text-align: right;
}

.back-text {
	vertical-align: top;
	font-size: 1.15em;
	line-height: 1.8em;
}

.arrow {
	margin-left: 0.1em;
	margin-right: 0.2em;
	font-size: 1.75em;
}

.heading {
	padding: 0 0.25em;
	font-size: 1.1em;
}

.themes {
	margin-bottom: 1em;
	border-top: solid;
	border-bottom: solid;
	border-width: 2px;
	border-color: rgb(164, 164, 170);
	background-color: rgb(48, 48, 54);
}

.theme-link {
	height: 2em;
	line-height: 2em;
}

.color-box {
	display: inline-block;
	margin-right: 0.25em;
	width: 2em;
	height: 100%;
	text-align: center;
	transition: color 250ms linear;
}

.settings p {
	margin: 0.75em;
	font-size: 0.85em;
	line-height: 110%;
}

.settings ul {
	margin-top: -0.5em;
	margin-right: 0.25em;
	font-size: 0.85em;
	line-height: 110%;
}

.settings li {
	margin: 0.25em 0;
}


/* Navigation bar */

.nav-top {
	min-height: 13.5%;
	font-size: 3rem;
	line-height: 150%;
}

.left {
	display: inline-block;
	width: 42.5%;
	text-align: left;
}

.right {
	display: inline-block;
	width: 42.5%;
	text-align: right;
}

.small-blank {
	display: inline-block;
	width: 0.5em;
	height: 0.67em;
	vertical-align: middle;
}

.gear {
	font-size: 0.67em;
}


/* Zoom transitions */

.zoom-in {
	animation-name: zoom-in-keyframe;
	animation-duration: 300ms;
	animation-timing-function: cubic-bezier(0.25, 0.75, 0.5, 1);
	-webkit-animation-name: zoom-in-keyframe;
	-webkit-animation-duration: 300ms;
	-webkit-animation-timing-function: cubic-bezier(0.25, 0.75, 0.5, 1);
}

@keyframes zoom-in-keyframe {
	from {
		transform: scale(1);
		-ms-transform: scale(1);
	} to {
		transform: scale(5);
		-ms-transform: scale(5);
	}
}

@-webkit-keyframes zoom-in-keyframe {
	from {
		-webkit-transform: scale(1);
	} to {
		-webkit-transform: scale(5);
	}
}

.zoom-out {
	animation-name: zoom-out-keyframe;
	animation-duration: 300ms;
	animation-timing-function: cubic-bezier(0.25, 0.75, 0.5, 1);
	-webkit-animation-name: zoom-out-keyframe;
	-webkit-animation-duration: 300ms;
	-webkit-animation-timing-function: cubic-bezier(0.25, 0.75, 0.5, 1);
}

@keyframes zoom-out-keyframe {
	from {
		transform: scale(5);
		-ms-transform: scale(5);
	} to {
		transform: scale(1);
		-ms-transform: scale(1);
	}
}

@-webkit-keyframes zoom-out-keyframe {
	from {
		-webkit-transform: scale(5);
	} to {
		-webkit-transform: scale(1);
	}
}