/*================================
Body
================================*/

	* {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	html {
		font-family: 'Avenir Next', sans-serif;
		font-size: 1.125em;
		line-height: 1.56em;
	}

	body {
		color: #282828;
		background: white;
		overscroll-behavior: none;
	}

	strong, b {
		font-weight: bold;
	}

	em, i {
		font-style: italic;
	}

	h1 {
		font-size: 2.67rem;
		line-height: 3.11rem;
		font-weight: bold;
		text-align: center;
		opacity: 0.95;
	}

	a {
		font-weight: bold;
		color: #00CC66;;
	}

	ol {
		list-style: none;
	}

	.aside {
		font-weight: 600;
		font-style: italic;
		color: #00CC66;
	}

	.text-list {
		margin-left: 1.5rem;
	}

/*================================
Sections
================================*/

	#sections {
		display: flex;
		justify-content: center;
		padding: 0 2rem;
	}

	.wide {
		margin-left: -2.22rem;
		margin-right: -2.22rem;
	}

	.section {
		display: none;
		opacity: 0;
		max-width: 640px;
		margin: 3.56rem auto 8.89rem;
	}

	.section.selected {
		display: block;
	}

	.content {
		margin-top: 1.78rem;
	}

	p:not(:first-child),
	#anxiety-types:not(:first-child),
	.text-list:not(:first-child) {
		margin-top: 0.89rem;
	}

	#anxiety-types {
		list-style: none;
	}

	#anxiety-types li {
		display: flex;
		column-gap: 0.67rem;
		height: 3.11rem;
		border: 2px solid rgba(40, 40, 40, 0.1);
		border-radius: 16px;
		box-sizing: border-box;
		cursor: pointer;
		transition: margin 0.1s, background 0.1s, border 0.1s;
	}

	#anxiety-types li:not(:first-child) {
		margin-top: 8px;
	}

	.type-selector {
		display: flex;
		justify-content: center;
		align-self: center;
		width: 12px;
		height: 12px;
		border: 2px solid rgba(40, 40, 40, 0.3);
		border-radius: 50%;
		margin-left: 16px;
	}

	.type-selector-icon {
		visibility: hidden;
		opacity: 0;
		align-self: center;
		width: 12px;
		height: 12px;
	}

	.type-label {
		align-self: center;
		margin-top: 0.05rem;
		font-weight: 600;
		pointer-events: none;
	}

	#anxiety-types li.selected {
		border-color: #00CC66;
		background: rgba(0, 204, 102, 0.1);
	}

	#anxiety-types li.selected .type-selector {
		border-color: #00CC66;
		background: #00CC66;
	}

	#anxiety-types li.selected .type-selector-icon {
		visibility: visible;
		opacity: 1;
	}

	#anxiety-types li:hover {
		margin-left: -0.67rem;
		margin-right: -0.67rem;
	}

	.tag-container {
		display: flex;
		justify-content: center;
		height: 1.78rem;
		margin-top: 0.44rem;
	}

	.tag {
		height: 100%;
		font-size: 0.89rem;
		font-weight: bold;
		line-height: 1.68rem;
		color: #00CC66;
		text-align: center;
		padding: 0 1.5rem;
		border: 2px solid #00CC66;
		border-radius: 28px;
		box-sizing: border-box;
	}

	#instructions-container {
		background: rgba(0, 204, 102, 0.1);
		margin-top: 1.78rem;
		margin-bottom: 1.78rem;
		border-radius: 16px;
		overflow: auto;
	}

	.instruction {
		display: flex;
		column-gap: 0.67rem;
		font-weight: bold;
		margin: 1.11rem;
	}

	.instruction-number {
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		line-height: 1.6rem;
		width: 1.56rem;
		height: 1.56rem;
		color: #00CC66;
		background: white;
		border: 2px solid #00CC66;
		border-radius: 50%;
	}

	.instruction-content {
		margin-top: 0.15rem;
	}

	.divider {
		width: 100%;
		height: 2px;
		background: white;
	}

	.divider.onion-divider {
		width: auto;
		margin: 1.33rem -0.89rem;
	}

	.onion {
		background: rgba(0, 204, 102, 0.1);
		margin-top: 1.78rem;
		margin-bottom: 0.89rem;
		padding: 1.78rem 0.89rem 0;
		border-radius: 16px;
	}

	#onion-example {
		padding: 1.78rem 0.89rem 1.33rem;
		margin-bottom: 1.78rem;
	}

	.onion-heading {
		display: block;
		font-weight: bold;
		font-size: 1.33rem;
		text-align: center;
		margin-bottom: 1.78rem;
		opacity: 0.95;
	}

	.onion-question {
		display: block;
		font-weight: 600;
		/*opacity: 0.75;*/
		padding-left: 0.44rem;
	}

	.onion-input-container {
		display: grid;
		height: 3.11rem;
		margin-top: 0.44rem;
	}

	.onion-input-label {
		grid-row: 1;
		grid-column: 1;
		font-size: 0.78rem;
		line-height: 2.67rem;
		font-weight: bold;
		text-align: center;
		color: white;
		align-self: center;
		width: 4.89rem;
		height: 2.67rem;
		margin-left: 0.22rem;
		background: #00CC66;
		border-radius: 12.5px 0 0 12.5px;
		z-index: 1;
	}

	.onion-input {
		grid-row: 1;
		grid-column: 1;
		font-weight: 600;
		width: 100%;
		box-sizing: border-box;
		align-self: center;
		height: 100%;
		border: 2px solid rgba(40, 40, 40, 0.1);
		border-radius: 16px;
		padding: 0 0.89rem 0 5.78rem;
	}

	#onion-example .onion-input-container {
		height: auto;
	}

	#onion-example .onion-input-label {
		display: flex;
		height: calc(100% - 0.44rem);
	}

	#onion-example .onion-input-label span {
		align-self: center;
		margin: 0 auto;
	}

	#onion-example .onion-input {
		display: flex;
		background: white;
	}

	#onion-example .onion-input span {
		align-self: center;
		padding: 0.67rem 0;
	}

	.onion-input::placeholder {
		color: #282828;
		opacity: 0.5;
	}

	.onion-input:focus {
		border-color: rgba(0, 204, 102, 1);
	}

	.onion-button-container {
		display: flex;
		max-width: 100%;
	}

	#onion-add-layer-button {
		flex-grow: 1;
		height: 48px;
		margin: 0.44rem -0.44rem;
		border-radius: 8px;
	}

	#onion-button-divider {
		margin-bottom: 0;
	}

	#onion-save-message {
		text-align: center;
		color: rgba(40, 40, 40, 0.6)
	}

	#signup-container {
		/*display: flex;*/
		display: none;
		flex-direction: row;
		flex-wrap: wrap;
		max-width: 400px;
		margin: 1.78rem auto 0;
		padding: 1.11rem 0.44rem 0.44rem;
		background: rgba(0, 204, 102, 0.1);
		border-radius: 16px;
	}

	#signup-container h2 {
		width: 100%;
		font-size: 1.11rem;
		font-weight: bold;
		text-align: center;
		opacity: 0.9;
	}

	#mc_embed_signup {
		width: 100%;
		margin-top: 0.89rem;
	}

	#mce-EMAIL {
		width: 100%;
		font-weight: 600;
		box-sizing: border-box;
		height: 3.11rem;
		border: 2px solid rgba(40, 40, 40, 0.1);
		border-radius: 16px;
		padding: 0 0.89rem;
	}

	#mce-EMAIL:focus {
		border-color: #00CC66;
	}

	#mc-embedded-subscribe {
		width: 100%;
		height: 48px;
		margin-top: 0.44rem;
	}

	#mce-responses {
		font-size: 0.89rem;
		text-align: center;
	    font-weight: bold;
	    margin-top: 0.25rem;
	    color: #00CC66;
	}

	#mce-error-response {
		color: #FF3F3F;
	}

	#mc_embed_signup input.mce_inline_error {
		border-color: #FF3F3F !important;
	}

	#mc_embed_signup div.mce_inline_error {
		font-size: 0.89rem;
		text-align: center;
		background-color: #FF3F3F !important;
		margin: 0rem 1rem 1rem 1rem !important;
	    padding: 0.3rem 1rem !important;
	    border-radius: 0 0 16px 16px;
	}

	#book-rec {
		text-align: center;
		margin-top: 1.78rem;
	}

/*================================
Nav Bar
================================*/

	#nav-bar {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: -92px;
		width: 100%;
		background: #F4F4F4;
		padding: 8px 0 100px;
		z-index: 2;
	}

	#progress-bar,
	.section-button,
	.section-connector {
		align-self: center;
	}

	.button {
		display: flex;
		justify-content: center;
		height: 40px;
		width: 240px;
		background: #00CC66;
		border-radius: 8px;
		font-weight: bold;
		font-size: 0.9rem;
		line-height: 1rem;
		color: white;
		transition: background 0.1s, opacity 0.2s, max-width 0.2s, margin 0.2s;
		transition-timing-function: cubic-bezier(.6,0,.4,1);
		cursor: pointer;
	}

	.button:disabled {
		opacity: 0;
		pointer-events: none;
	}

	.button:hover {
		background: #04BC60;
	}

	.button:active {
		background: #08AB5A;
	}

	.button.active {
		background: #08AB5A;
	}

	.button-label {
		display: flex;
		column-gap: 0.33rem;
		transition: opacity 0.2s;
		align-self: center;
	}

	.button-label span {
		margin-top: 0.1rem;
	}

	.arrow-icon {
		align-self: center;
	}

	.button:hover .arrow-icon path {
		d: path('M2 8H24M24 8L18 2M24 8L18 14');
		transition: d 0.1s;
	}

	.button:not(:hover) .arrow-icon path {
		d: path('M2 8H16M16 8L10 2M16 8L10 14');
		transition: d 0.1s;
	}

	#back-button {
		background: rgba(40, 40, 40, 0.1);
		color: #282828;
		margin-left: 8px;
	}

	#back-button:hover {
		background: rgba(40, 40, 40, 0.2);
	}

	#back-button:hover .button-label {
		opacity: 100%;
	}

	#back-button:active {
		background: rgba(40, 40, 40, 0.3);
	}

	#back-button.active {
		background: rgba(40, 40, 40, 0.3);
	}

	#back-button.active .button-label {
		opacity: 100%;
	}

	#back-button .button-label {
		opacity: 75%;
		margin-left: -8px;
	}

	#back-button .arrow-icon {
		transform: rotate(180deg);
	}

	#back-button .arrow-icon path {
		stroke: #282828;
	}

	#next-button {
		margin-right: 8px;
	}

	#next-button .button-label {
		margin-right: -8px;
	}

	#progress-bar {
		display: flex;
		width: 400px;
		margin: 0 32px;
	}

	.section-button {
		display: grid;
		width: 24px;
		height: 24px;
		background: none;
		border-radius: 50%;
		border: 2px solid #B7B7B7;
		transition: background 0.2s, border 0.2s;
		cursor: pointer;
	}

	.section-button.complete {
		background: #00CC66;
		border-color: #00CC66;
	}

	.section-button.selected {
		background: none;
		border: 2px solid #FCA86C;
	}

	.selected-indicator {
		width: 16px;
		height: 16px;
		background: #FF8F3F;
		border-radius: 50%;
	}

	.incomplete-icon,
	.complete-icon,
	.selected-indicator {
		grid-column: 1;
		grid-row: 1;
		margin: 2px 0 0 2px;
		transition: opacity 0.2s;
	}

	.selected .selected-indicator,
	.complete .complete-icon {
		opacity: 1;
	}

	.complete-icon,
	.selected-indicator, 
	.selected .incomplete-icon,
	.selected .complete-icon,
	.complete .incomplete-icon {
		opacity: 0;
	}

	.section-button:hover.complete:not(.selected) {
		background: none;
		border-color: #B7B7B7;
	}

	.section-button:hover.complete:not(.selected) .complete-icon {
		opacity: 0;
	}

	.section-button:hover.complete:not(.selected) .incomplete-icon {
		opacity: 1;
	}

	.section-connector {
		flex-grow: 1;
		height: 2px;
		background: #282828;
		border-radius: 1px;
		opacity: 0.1;
		margin: 0 4px;
	}

	.section-tooltip {
		position: absolute;
		visibility: hidden;
		margin-top: -52px;
		padding: 0.7rem 1rem 0.6rem;
		text-align: center;
		color: #00CC66;
		font-weight: 600;
		line-height: 1;
		background: white;
		border-radius: 64px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
		opacity: 0;
		transition: visibility 0.2s, opacity 0.2s;
	}

	.section-button:hover .section-tooltip {
		visibility: visible;
		opacity: 1;
	}

/*================================
Responsiveness
================================*/

	@media (max-width: 800px) {
		.wide {
			margin-left: 0;
			margin-right: 0;
		}

		#onion-add-layer-button {
			max-width: calc(100% + 0.88rem);
		}

		#nav-bar {
			flex-wrap: wrap;
			padding-top: 16px;
		}

		#progress-bar {
			order: 1;
			width: 100%;
		}

		.button {
			order: 2;
			flex-grow: 1;
			width: 0;
			max-width: 100%;
			margin-top: 16px;
		}

		#back-button {
			margin-right: 8px;
		}
	}

	@media (max-width: 500px) {
		h1 {
			font-size: 1.78rem;
			line-height: 2.22rem;
		}

		#sections {
			min-width: 0;
			max-width: 100%;
			padding: 0 1.5rem;
		}

		.section {
			margin-top: 2.67rem;
		}

		#signup-container {
			max-width: 100%;
		}

		#progress-bar {
			margin: 0 12px;
		}
	}

	@media (pointer: coarse) {
		#anxiety-types li:hover {
			margin-left: 0;
			margin-right: 0;
		}

		.section-button:hover .section-tooltip {
			visibility: hidden;
			opacity: 0;
		}

		.button:hover {
			background: #00CC66;
		}

		#back-button:hover {
			background: rgba(40, 40, 40, 0.1);
		}

		.button:hover .arrow-icon path {
			d: path('M2 8H16M16 8L10 2M16 8L10 14');
		}
	}