:root{
	--shadow-tone: #B97D5F90;
	--darker-tone: #533831FF;
	--dark-tone-selected: #CC9D75FF;
	--dark-tone: #ebb787FF;
	--middle-tone: #fee3c6FF;
	--light-tone: #fef7deFF;

	--border-rad: 10px;

	--aside-button-pos: 0.5vh;
	--aside-width: 20vw;
	--reading-zone-width: 80vw;
	--reading-zone-diff: 0px;
}

*{
	margin: 0;
	padding: 0;

	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-family: "Fredoka", sans-serif;

	color: var(--dark-tone);

	transition-property: color, background-color, box-shadow, transform, max-height;
    transition-duration: 400ms;
    transition-timing-function: ease-out;

	user-select: none;
}
*::-moz-selection, *::selection{
	color:var(--shadow-tone);
	background-color: var(--light-tone);
}

body{
	background-color: var(--middle-tone);
	display: flex;
	flex-direction: column;
	header{
		#reading-zone-resize-container{
			position: fixed;
		  width: var(--reading-zone-width);
		  top: 5em;
		  left: 50%;
		  transform: translateX(-50%); /* better centering */
		  
		  transition: opacity;
		  transition-duration: 500ms;

		  opacity: 0.2;
		  *{
		  	opacity: 0.2;
		  }

		  display: flex;
		  flex-direction: column;
		  align-items: center;
			#reading-zone-resize-line{
				border-bottom: var(--dark-tone) dashed 3px;
				width: 100%;
			}
			#reading-zone-resize-cursor{
				position: absolute;
			  right: 0;          /* starting point */
			  cursor: ew-resize;
			  margin: 0;        /* remove margin hacks */
			  align-self: unset;
			}
		}
		#reading-zone-resize-container:hover{
			opacity: 1;
			*{
				opacity: 1;
			}
		}
	}
	#aside-button{
		z-index: 11;
		position: fixed;
		left: 0;
		top: var(--aside-button-pos);
		background-color: var(--dark-tone);
		padding: 0.6em 0.8em;
		border-radius: var(--border-rad);
		align-self: flex-start;
		margin: 0.3em 0.4em;
		text-align: center;
		p{
			color: var(--light-tone);
		}
	}
	#aside-button.selected{
		transform: rotate(180deg);
	}
	aside{
		z-index: 10;
		display: flex;
		align-items: center;
		height: 100vh;
		position: fixed;
		top: 0;

		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;

		transform: translateX(-125%);
		#aside-content{
			width: var(--aside-width);
			min-width: fit-content;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100%;

			background-color: var(--middle-tone);
			border-right: var(--dark-tone) dashed 3px;
			#aside-title, #aside-edit-button, .button{
				font-size: 1.5em;
				text-align: center;
				width: 70%;
				min-width: fit-content;
				height: 1.5em;
				align-content: center;
				margin: var(--border-rad);

				color: var(--darker-tone);
				background-color: var(--dark-tone);
				border-radius: var(--border-rad);
			}
			#aside-controls{
				display: flex;
				#aside-edit-button, .button{
					font-size: 1em;
					cursor: pointer;

					color: var(--light-tone);
					box-shadow: var(--shadow-tone) 2px 3px 0px;
				}
				#aside-edit-button:hover, .button:hover{

					/*background-color: var(--dark-tone-selected);*/
					box-shadow: var(--shadow-tone) 0px 0px 0px;
				}
				#aside-edit-button.editing, .button.selected{
					background-color: var(--dark-tone);
					box-shadow: var(--shadow-tone) inset 1px 2px 0px;
				}
				.button{
					width: fit-content;
					min-width: 2vw;
					padding: 0.1em 0.4em;
				}
			}
			#aside-jump-to{
				align-self: flex-start;
				margin-left: 1vw;
				.jump{
					margin-left: 1vw;
					cursor: pointer;

					transition: margin;
					transition-duration: 250ms;
				}
				.jump:hover{
					margin-left: 2vw;
				}
			}
		}
	}
	aside.selected {
  	transform: translateX(0);
	}
	aside::-webkit-scrollbar {
		 	display: none;
	}

	article{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 2vh;
		#reading-zone{
			min-height: 15vh;
			width: calc(var(--reading-zone-width) - var(--reading-zone-diff));
			padding: 2vh 1vw;

			border: var(--dark-tone) solid 2px;		
			color: var(--dark-tone);
			background-color: var(--middle-tone);
			border-radius: var(--border-rad);
			box-shadow: var(--shadow-tone) 2px 3px 0px;
			word-wrap: normal;
		}
	}
}

/*font families*/
.fontfamily-roboto{ font-family: "Roboto", sans-serif; }
.fontfamily-nunito{ font-family: "Nunito", sans-serif; }
.fontfamily-lora{ font-family: "Lora", serif; }
.fontfamily-pt-serif{ font-family: "PT Serif", serif; }
.fontfamily-baskerville{ font-family: "Libre Baskerville", serif; }
.fontfamily-garamond{ font-family: "EB Garamond", serif; }
.fontfamily-lobster{ font-family: "Lobster", sans-serif; }
.fontfamily-satisfy{ font-family: "Satisfy", cursive; }
.fontfamily-caveat{ font-family: "Caveat", cursive; }
.fontfamily-shadows-into-light{ font-family: "Shadows Into Light", cursive; }
.fontfamily-indie-flowers{ font-family: "Indie Flower", cursive; }
.fontfamily-great-vibes{ font-family: "Great Vibes", cursive; }
.fontfamily-cause{ font-family: "Cause", cursive; }
.fontfamily-fredoka{ font-family: "Fredoka", sans-serif; }
.fontfamily-google-code{ font-family: "Google Sans Code", monospace; }
.fontfamily-kaushan{ font-family: "Kaushan Script", cursive; }
.fontfamily-allura{ font-family: "Allura", cursive; }
.fontfamily-comic-relief{ font-family: "Comic Relief", system-ui; }



.fontcolor-light{ color: var(--light-tone)  }
.inline{display: inline;}

.message{
	margin: 1em 0em;
	*{
		user-select: text;
	}
	.message-header{
		display: flex;
		align-items: center;
		.message-author{
			margin-left: 1vw;
			user-select: text;
		}
		.message-profile-picture{
			width: 2em;
			border-radius: var(--border-rad);
			border: var(--dark-tone) solid 2px;
		}
	}
	.message-text{
		flex-wrap: wrap;
		color: var(--light-tone);
		background-color: var(--dark-tone);
		box-shadow: var(--shadow-tone) inset 1px 2px 0px;
		border-radius: var(--border-rad);
		margin: 5px;
		padding: 1vh 1vw;
		user-select: text;
		hyphens: auto;
	    -webkit-hyphens: auto;
	    -ms-hyphens: auto;
	    text-wrap: wrap;

	  overflow-wrap: normal;
	  word-break: normal;
	  *{
	  	color: var(--light-tone);
	  }
	}
}

.chapter-group-container{
	width: 100%;
	.chapter-group{
		.chapter-group-header{
			display: flex;
			justify-content: space-between;
			margin-right: 15px;
			
			.chapter-group-title{
				font-size:1.2em;
				text-align: left;
				margin-left: 0.4em;
				cursor: pointer;
			}
			.chapter-group-arrow{
				transform: rotate(0deg);
			}
			.chapter-group-arrow.selected{
				transform: rotate(90deg);
			}
		}
		.chapter-container{
			
			max-height: 0px;
			overflow: scroll;

			background-color: var(--dark-tone);
			box-shadow: var(--shadow-tone) inset 1px 2px 0px;
			border-radius: var(--border-rad);
			margin: 5px;

			
			*{color: var(--light-tone);}
			.chapter{
				padding-left: 1.2em;
				padding: 5px;
				cursor: pointer;
			}
			.chapter:hover{
				background-color: var(--darker-tone);
			}
		}
		.chapter-group-header:hover{
			.chapter-group-title{
				font-weight: 600;
			}
		}
		.chapter-container.selected{
			max-height: 20vh;
		}
	}
}
.thread{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	.thread-box{
		width: 80%;
	}
}
.paragraph{
	margin: 0.5em 0;
	display: block;
}
.word{
	color: var(--light-tone);
	margin: 0 0.1em;
}
em{
	font-style: italic;
}
strong{
	font-weight: 800;
}
.cit{
	display: flex;
	border-left: var(--darker-tone) solid 3px;
	.cit-lining{
		width: 3px;
		border-radius: 3px;
		background-color: var(--darker-tone);
		margin-right: 1em;
	}
}
.comment{
	font-size: 0.8em;
	font-weight: 300;
}

@media screen and (max-width: 600px) {
  :root {
  	--aside-width: 50vw;
  	--reading-zone-width: 95vw;
  }
  #reading-zone-resize-container{
  	display: none !important;
  }
	.thread{
		.thread-box{
			width: 93%;
		}
	}
    
}