:root {
	--body-bg: #fafafa;
	--lightgray-bg: #ccc; /* proud vs broken bg */
	--dark-bg: #404040; /* nav bg */
	--dark-bg-hover: #555;
	--arrow-bg: #06f;
	--arrow-bg-hover: #05d;
	--green: #4c0;
	--green-hover: #3a0;
	--yesterday: orange;
	--today: var(--green);
	--tomorrow: #39f;
}

html, body {
	margin: 0;
	padding: 0;
}
body {
	font-family: calibri, arial, sans-serif;
	font-size: 15pt;
	background-color: var(--body-bg);
	line-height: 1.6;
	font-weight: 300;
}
article {
	font-weight: 400;
}
hr {
	border: none;
	border-top: 1px solid var(--lightgray-bg);
}

nav {
	background-color: #000; /* Fallback for kindle */
	background-color: var(--dark-bg);
	color: #fff;
	font-weight: bold;
	overflow: hidden;
}
nav a,
nav a:visited {
	color: #fff;
	text-decoration: none;
	padding: 4pt;
}
nav a:hover {
	background-color: var(--dark-bg-hover);
}
.nav-title {
	font-size: 30pt;
}
.nav-input {
	border: none;
	background-color: #fff;
	font-size: 12pt;
	margin: 4pt 0;
}
.flex-left {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.dark-bg {
	background-color: var(--lightgray-bg);
}

.section,
.container {
	margin: 0 auto;
	max-width: 640px;
	padding: 0 0.5em;
}
.section {
	margin-bottom: 2em;
}
.complete-button {
	background-color: var(--green);
	color: #130;
	cursor: pointer;
	margin-bottom: 0;
	padding-top: 2em;
	padding-bottom: 2em;
	user-select: none;
}
.complete-button:hover {
	background-color: var(--green-hover);
}
.change-day {
	display: flex;
	flex: 0 1 auto;
	justify-content: space-between;
}
.change-day > .arrow {
	color: #fff;
	display: flex;
	margin: 1em 0.5em;
	user-select: none;
	background-color: #000; /* Fallback for kindle */
    background-color: var(--body-bg);
}
.change-day > .arrow > .header:hover,
.change-day > .arrow.prev-day:hover,
.change-day > .arrow.next-day:hover {
	--arrow-bg: var(--arrow-bg-hover);
	cursor: pointer;
}
.change-day > .arrow.prev-day::before,
.change-day > .arrow.next-day::after {
	content: '';
	border: 55px solid var(--arrow-bg);
	border-top-color: transparent;
	border-bottom-color: transparent;
}
.change-day > .arrow.prev-day::before {
	border-left: none;
}
.change-day > .arrow.next-day::after {
	border-right: none;
}
.change-day > .arrow > .header {
	/*padding: 5px 10px;*/
	background-color: var(--arrow-bg);
	align-self: center;
}
.change-day > .arrow.prev-day > .header { padding-right: 15px; }
.change-day > .arrow.next-day > .header { padding-left:  15px; }
#background-message,
.header {
	font-size: 2em;
	display: block;
	text-align: center;
}

/* Month and Day header at the top of each day */
#month-and-day.yesterday::after { content: ' (Yesterday)'; }
#month-and-day.today::after     { content: ' (Today)'; }
#month-and-day.tomorrow::after  { content: ' (Tomorrow)'; }
#month-and-day.yesterday { background-color: var(--yesterday); }
#month-and-day.today     { background-color: var(--today); }
#month-and-day.tomorrow  { background-color: var(--tomorrow); }


#background-message {
	margin-top: 40vh;
}
.book-structure {
	border: 2px solid var(--dark-bg);
	font-size: 0.8em;
}
.book-structure > ul {
	margin: 0.25em;
}
.book-structure ul {
	padding: 0;
	padding-left: 1em;
}

.chapter, .verse {
	display: none;
}

.paragraph,
.stanza {
	display: block;
	margin: 1em 0;
}
.stanza .line {
	display: block;
}

.subheader {
	font-size: 1.6em;
	display: block;
	text-align: center;
}
.subsubheader {
	font-size: 1.4em;
	display: inline;
	padding-right: 1em;
}
.subsubheader.pvb {
	display: inline-block;
	width: 3.5em;
}
.checkmark {
	display: none;
	font-family: consolas, sans-serif;
	font-weight: normal;
}
.checkmark:after {
	content: '✓';
}
.complete-button .checkmark {
	padding-left: 15px;
}

/* Calendar */
#calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(53, calc(640px / 7));
	margin: 0 auto;
	max-width: 640px;
	line-height: 1.25;
}
.cal-today,
.cal-date-leap-year,
.cal-date {
	margin: 6px;
	background-color: var(--dark-bg);
	text-align: center;
	color: var(--body-bg);
	font-weight: bold;
	text-decoration: none;
	display: block; /* Fallback for kindle */
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20pt;
}
.cal-today:hover,
.cal-date:hover {
	background-color: var(--dark-bg-hover);
}
.cal-date.completed {
	background-color: var(--green); /*#1b1;*/
}
.cal-date-leap-year {
	background-color: var(--lightgray-bg);
}
.cal-date-spacer {
	grid-column-start: 1;
}
.cal-today {
	text-align: center;
	grid-column-start: 1;
	grid-column-end: 8;

	font-size: 40pt;
}

@media (max-width: 640px) { /* container size */
	#calendar {
		grid-template-rows: repeat(54, calc(100vw / 7));
	}
	.cal-date-leap-year,
	.cal-date {
		font-size: 15pt;
		margin: 1vw;
	}
	.cal-today {
		font-size: 30pt;
		margin: 1vw;
	}
}
@media (max-width: 400px) { /* small phone screens */
	.cal-date-leap-year,
	.cal-date {
		font-size: 10pt;
	}
	.cal-today {
		font-size: 20pt;
	}
}
@media (max-width: 319px) { /* tiny phone screens */
	#calendar {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.cal-date-leap-year,
	.cal-date {
		width: 35px;
		height: 35px;
	}
	.cal-date-spacer {
		display: none;
	}
	.cal-today {
		flex-basis: 100%;
	}
}

/* Bulk Edit */
.simple-button-green,
.simple-button-gray {
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	margin-bottom: 0;
	padding: .2em .5em;
	user-select: none;
}

.simple-button-green {
	background-color: var(--green);
}
.simple-button-green:hover {
	background-color: var(--green-hover);
}
.simple-button-gray {
	background-color: var(--dark-bg);
}
.simple-button-gray:hover {
	background-color: var(--dark-bg-hover);
}