/**
 * Jolly Nap stylesheet.
 *
 * Modernized: legacy normalize.css fixes for IE 8/9 / Safari 5 / Firefox 4
 * have been dropped, vendor prefixes pruned to only those still required
 * (`-webkit-appearance`, `-webkit-touch-callout`, the Webkit pseudo-elements
 * for `input[type="time"]`).
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0 auto;
	line-height: 20px;
	min-height: 100%;
	background-color: #333333;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAAMFBMVEUjIyMwMDAgICAtLS0rKyslJSUcHBwkJCQeHh4vLy8pKSkoKCgfHx8nJycmJiYqKio9VPPsAAAAMUlEQVR42gXBiQEAIQwCMO7VlgL7b2uCN6tVA9G3JkicfxXC2l2GetrP4JtLVrBNEj46LwIMeq33LwAAAABJRU5ErkJggg==");
	background-size: 7px 7px;
	color: white;
	text-align: center;
	font-size: 16px;
	font-family: "Press Start 2P", sans-serif;
	text-shadow:
		0px 1px 0px #787878,
		0px 2px 0px #787878;
}

a:focus-visible {
	outline: thin dotted;
}

input {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
	border-radius: 0;
}

input:invalid {
	box-shadow: none;
}

em {
	font-style: normal;
	color: #00ff91;
	text-shadow: 0px 2px 1px #005731;
}

@keyframes jn-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes jn-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.jn-fade-in {
	animation: jn-fade-in 150ms ease both;
}

.jn-fade-out {
	animation: jn-fade-out 150ms ease both;
}

.content {
	padding-bottom: 20px;
}

.wrapper {
	min-height: 100%;
	overflow: auto;
	padding-bottom: 165px;
}

.wrapper.no-footer {
	padding-bottom: 40px;
}

.site-header {
	height: 65px;
	padding: 10px 0 0;
	text-align: center;
}

.site-header .logo {
	display: inline-block;
	font-size: 1.7em;
	margin-bottom: 10px;
	text-shadow: -1px 3px 0px #787878;
}

.site-header .accent {
	display: inline-block;
	position: relative;
	font-size: 0.24em;
	top: -3.5em;
}

.site-header .subtitle {
	color: #00ff91;
	text-shadow: 0px 2px 1px #005731;
}

.site-footer {
	border: 1px solid transparent;
	clear: both;
	height: 165px;
	margin-top: -165px;
}

.blurb {
	display: none;
}

.blurb.get-up {
	display: block;
	margin: 12px 0 40px;
}

.blurb.bed-now {
	display: block;
}

.blurb.sleep-at {
	margin: 15px 0 10px;
}

.blurb.wake-time-explanation {
	margin: 5px 0 12px;
}

.blurb.bed-time-explanation {
	margin: 5px 0 28px;
}

.blurb.wake-up-at {
	margin: 20px 0 10px;
}

.share {
	display: none;
	padding-left: 30px;
	text-align: center;
}

.wake-up-container {
	display: inline-block;
	text-align: center;
	border: 3px dashed #99ffd3;
	margin-top: 12px;
	padding: 10px 4px;
}

.wake-up-container input[type="time"] {
	text-align: center;
}

.wake-up-container.set {
	border-color: transparent;
}

label {
	display: none;
}

input[type="time"] {
	text-align: right;
	border: none;
	width: 175px;
	margin: 5px 0;
	font-size: 1.2em;
	color: white;
	background-color: transparent;
}

input[type="time"]:disabled {
	opacity: 1;
}

input[type="time"]::-webkit-clear-button {
	display: none;
}

.time-container {
	font-size: 1.2em;
	margin: 22px 0 12px 16px;
}

.time-container .wake-time[data-wellness="0"],
.time-container .bed-time[data-wellness="0"] {
	color: #ffba52;
	text-shadow:
		0px 1px 0px #523100,
		0px 2px 0px #523100;
}

.time-container .wake-time[data-wellness="1"],
.time-container .bed-time[data-wellness="1"],
.time-container .wake-time[data-wellness="2"],
.time-container .bed-time[data-wellness="2"] {
	color: #ffd447;
	text-shadow:
		0px 1px 0px #473700,
		0px 2px 0px #473700;
}

.time-container .wake-time[data-wellness="3"],
.time-container .bed-time[data-wellness="3"] {
	color: #dfe444;
	text-shadow:
		0px 1px 0px #232405,
		0px 2px 0px #232405;
}

.time-container .wake-time[data-wellness="4"],
.time-container .bed-time[data-wellness="4"] {
	color: #b6ef43;
	text-shadow:
		0px 1px 0px #212f04,
		0px 2px 0px #212f04;
}

.time-container .wake-time[data-wellness="5"],
.time-container .bed-time[data-wellness="5"] {
	color: #3dff40;
	text-shadow:
		0px 1px 0px #003d01,
		0px 2px 0px #003d01;
}

.btn {
	display: block;
	font-size: 18px;
	text-decoration: none;
	color: white;
	background-color: #00f0d0;
	padding: 10px 20px;
	margin: 10px;
	border-radius: 2px;
	box-shadow:
		0px 6px 0 #3cb4a4,
		2px 8px 17px #44746d,
		inset 1px 1px 4px white;
	text-shadow: 0px -1px 0 #5e5e5e;
	transition:
		background-color 200ms ease-out,
		box-shadow 200ms ease-out;
}

.btn:hover {
	background-color: #06eacb;
	box-shadow:
		0 6px 0 #3cb4a4,
		3px 10px 10px #44746d,
		inset 1px 1px 4px white;
}

.btn.primary {
	background-color: #f0003c;
	box-shadow:
		0px 6px 0 #b43c5a,
		2px 8px 18px #921c39,
		inset 1px 1px 4px #ea8080;
	text-shadow: 0px -1px 0 #333333;
}

.btn.primary:hover {
	background-color: #ea063b;
	box-shadow:
		0px 6px 0 #b43c5a,
		3px 10px 10px #921c39,
		inset 1px 1px 4px #ea8080;
}

/* ==========================================================================
   Add-to-home-screen popup (iOS Safari only)
   ========================================================================== */

#addToHomeScreen {
	z-index: 9999;
	user-select: none;
	-webkit-touch-callout: none;
	width: 240px;
	font-size: 15px;
	padding: 12px 14px;
	text-align: left;
	font-family: helvetica;
	background-image: linear-gradient(to bottom, white 0%, #eeeeee 2%, #cccccc 98%, #a3a3a3 100%);
	border: 1px solid #505050;
	border-radius: 8px;
	background-clip: padding-box;
	color: #333;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
	line-height: 130%;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

#addToHomeScreen.addToHomeIpad {
	width: 268px;
	font-size: 18px;
	padding: 14px;
}

#addToHomeScreen.addToHomeWide {
	width: 296px;
}

#addToHomeScreen.addToHomeIpad.addToHomeWide {
	width: 320px;
	font-size: 18px;
	padding: 14px;
}

#addToHomeScreen .addToHomeArrow {
	position: absolute;
	background-image: linear-gradient(
		to bottom right,
		rgba(204, 204, 204, 0) 0%,
		rgba(204, 204, 204, 0) 40%,
		#cccccc 40%
	);
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: #505050;
	width: 16px;
	height: 16px;
	transform: rotateZ(45deg);
	bottom: -9px;
	left: 50%;
	margin-left: -8px;
	box-shadow: inset -1px -1px 0 darkgrey;
	border-bottom-right-radius: 2px;
}

#addToHomeScreen.addToHomeIpad .addToHomeArrow {
	transform: rotateZ(-135deg);
	background-image: linear-gradient(
		to bottom right,
		rgba(238, 238, 238, 0) 0%,
		rgba(238, 238, 238, 0) 40%,
		#eeeeee 40%
	);
	box-shadow: inset -1px -1px 0 white;
	top: -9px;
	bottom: auto;
	left: 50%;
}

#addToHomeScreen .addToHomeClose {
	position: absolute;
	right: 4px;
	top: 4px;
	width: 18px;
	height: 18px;
	line-height: 14px;
	text-align: center;
	text-indent: 1px;
	border-radius: 9px;
	background: rgba(0, 0, 0, 0.12);
	color: #707070;
	box-shadow: 0 1px 0 white;
	font-size: 16px;
}

#addToHomeScreen .addToHomePlus {
	font-weight: bold;
	font-size: 1.3em;
}

#addToHomeScreen .addToHomeShare {
	display: inline-block;
	width: 18px;
	height: 15px;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAQAAABDj1eZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUdJREFUKFNtkLtLw1AYxS/qJLhXVKr2ZRulUNtiqgSb3CziICI6ucTFVYcOnaQOFRwUnNTRwUWXgpP/QdHNUEQUHGxofYBTlRs83iZNjKTncOGe7/vx3QchXUWn6FL3jhfKUdCCr5zuifV5oDiHQM+c+CIhiiCSWNu08iq9oHXKLAiqrgR4UXqlOEYZt++ExEL0wW7+OW0G10muLv9gmqfe5FAWKmTMYQYiFL7PYwyLOD8lSjNh2gdnPzMII4QUBxc4OothbAF7GCBKQ0YbSWyPQsIhqvetS+y0ygGMo/KFZfviDvR4AhwgZU9dGYnA0J/6ndc15i3ouYIMcVVUcEXIoOxCeRCfwP8sXBSdjtpUv/1QW+K16kCCIUC4id9Fa0JtkluwVkSfqPL6RwfSDA0aNlx7k/bWgViB7bMS2/1vk5sdsZLN/ALSuL3tylO4RAAAAABJRU5ErkJggg==);
	background-size: 18px 15px;
	text-indent: -9999em;
	overflow: hidden;
}

#addToHomeScreen .addToHomeTouchIcon {
	display: block;
	float: left;
	border-radius: 6px;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.5),
		inset 0 0 2px rgba(255, 255, 255, 0.9);
	background-repeat: no-repeat;
	width: 57px;
	height: 57px;
	background-size: 57px 57px;
	margin: 0 12px 0 0;
	border: 1px solid #333333;
	background-clip: padding-box;
}

@media all and (min-resolution: 2dppx) {
	#addToHomeScreen .addToHomeShare {
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd9f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC);
	}
}

@media all and (min-width: 600px) {
	body {
		max-width: 450px;
		height: 500px;
	}
}