html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	font-family: 'Gotham';
}

.fas {
	cursor: pointer;
}

#ruler {
	position: fixed;
	top: 0;
	font-size: 3.25vw;
	visibility: hidden;
}

.tables {
	width: 100%;
	height: 100%;
	position: fixed;
}

table {
	width: 100%;
	height: 100%;
	position: absolute;
	transition: transform 1000ms ease 0ms;
}

table.next {
	transform: translateX(100%);
}

table.active.move {
	transform: translateX(-100%);
}

table.next.move {
	transform: translateX(0);
}

table.switch {
	transition: none;
}

.verse-container {
	width: 75%;
	margin: auto;
}

.reference {
	margin-bottom: 2vw;
	font-size: 5vw;
	font-weight: bold;
}

.verse {
	font-size: 2.5vw;
}

.blank {
	display: inline-block;
	border-bottom: .1vw solid;
}

.answer {
	width: 100%;
	border: none;
	font-family: 'Gotham';
	font-size: 2.5vw;
	text-align: center;
}

.answer:focus {
	outline: 0;
}

.answer.incorrect {
	color: red;
}

.next-verse {
	margin-top: -2vw;
	position: fixed;
	top: 50vh; right: 5vw;
	font-size: 4vw;
	user-select: none;
}

.guide {
	width: 75vw;
	padding: 1vw;
	border-top-right-radius: .5vw;
	border-top-left-radius: .5vw;
	box-sizing: border-box;
	position: fixed;
	bottom: 0; left: 12.5vw;
	background-color: #eaeaea;
	user-select: none;
}

.answer-next {
	position: relative;
	z-index: 1;
	font-size: 1.75vw;
}

.difficulty {
    margin-left: 6vw;
    position: relative;
    z-index: 1;
    font-size: 1.75vw;
}

.difficulty .level {
	font-weight: bold;
	cursor: pointer;
}

.progress {
    width: 73vw;
    margin-top: -.5vw;
    position: absolute;
    top: 50%;
    font-size: 1vw;
    text-align: center;
}

.progress .fa-circle {
	margin: 0 .25vw;
	color: #adadad;
	cursor: default;
}

.progress .fa-circle.active {
	color: black;
}

.results {
	position: absolute;
	top: 1vw; right: 1vw;
	z-index: 1;
	font-size: 1.75vw;
}