:root{
	--text-color: #ADB389;
  --bg-color: #555555;
  --heading-bg-color: #444444;
  --outline-color: #ADB389;
  --highlight-bg: #777777;
  --banner-bg: #444444;
  --drop-shadow-b: #444444;
  --drop-shadow-t: #333333;
  --link-color: #ADB389;
  --link-clicked: #ADD389;
}

/* intended format
<div class = "main-text" tag = "section"> -- add CSS for before hight and content.
  <div class="article-body">
		<h2>section heading</h2>
  	<div class = "text-block" tag = "subsection">
			(content)
		</div>
	</div>
</div>
*/

/*body -set everything global*/
body{
	background-color: #26221C;
  background-size: 100% 120%;
	background-position: 0px 0px,0px 0px;
	background-image: radial-gradient(50% 50% at 0% 0%, #D7A528FF 0%, 	#BA972AFF 17%, #3B310D00 100%),linear-gradient(90deg, #3B310DFF 		0%, #7F6323FF 30%, #7F6323FF 70%, #3B310DFF 100%);
  color: var(--text-color);
  font-family: "Merriweather", serif;
}

hr{
  border: none;
	border-top: double;
  overflow: visible;
  text-align: center;
	margin-top: 0em;
  margin-bottom: 0em;
}

hr:after{
	content: "🍞";
  font-size: 1em;
  background-color: var(--bg-color);
  position: relative;
	top: -0.8em;
  justify-self: center;
}



/*Title box*/
header#title-banner{
	background-color: var(--banner-bg);
  text-align: center;
  padding: 0.1em;
  margin: 0;
  margin-top: -1em;
  margin-right: -1em;
  margin-left: -1em;
  box-shadow: 0 2em 2em var(--drop-shadow-b);
}

#title-banner h1{
  font-size: 3em;
  text-shadow: 0 0.4em 10px var(--drop-shadow-t);
  &:before, &:after{
  	content: " --- ";
  }
}

/* meat of the text */
div.text-block{
}

div.text-block:hover{
  background-color: var(--highlight-bg);
}

.text-block p{

}



/*big box for orginizing content*/
div.section{
  display: flex;
  margin: 0em auto;
  margin-bottom: 1em;
  z-index: 0;
}

.section div{
	display: block;
}

.section:before{
  position: sticky;
	top: 0em;
  writing-mode: vertical-rl; 
  text-orientation: upright;
  border-radius: 0px 0px 0px 2em / 0px 0px 0px 2em;
  border: 2px solid var(--outline-color);
  margin-right: -2px;
  padding-top: 0.2em;
  padding-bottom: 1em;
  background-color: var(--bg-color);
  height: 5em;
  content: "text";
  font-weight: bolder;
}

/*sub body*/
.article-body{
	background-color: var(--bg-color);
  padding: 1em;
  margin: 0;
  border: 2px solid var(--outline-color);
  padding: 0;
}

.article-body h2, .article-body h3{
	background-color: var(--heading-bg-color);
  margin: 0;
}

.article-body h2{
  font-size: 2em;
  padding-top: 0.5em;
	padding-left: 0.5em;
  padding-right: 0.5em;
}

.article-body h3{
  font-size: 1.5em;
	position: sticky;
  top: 0em;
  padding-left: 1em;
  padding-right: 1em;
  margin-bottom: 0.5em;
}

.article-body h4{
  font-size: 1.2em;
  padding-left: 1em;
  padding-right: 1em;
  margin-bottom: 0.5em;
}

.article-body p{
	padding-left: 1.5em;
  padding-right: 1.5em;
  margin: 0.5em
}

/* Nav menu */
div.table-pop{
	max-height: 0;
  max-width: 0;
  overflow: hidden;
  transition:0.1s linear;
  position: absolute;
  top: 3em;
  right: 1em;
}

a:focus-within +div.table-pop, div.table-pop:focus-within, a:hover +div.table-pop, div.table-pop:hover{
	max-height: 75vh;
  max-width: 15em;
	padding-left: 1em;
  padding-right: 1em;
  background-color: var(--heading-bg-color);
  border: 2px solid var(--outline-color);
  overflow-y: scroll;
  scrollbar-color: var(--heading-bg-color) var(--outline-color);
}

#table-of-contents-icon{
	height: 2em;
}

nav.floating-menu{
  display: flex;
  flex-direction: column;
  align-items: end;
  margin-left: 0.5em;
  margin-right: 0.5em;
  z-index: 1;
}
.floating-menu>div{
	position: sticky;
  top: 1em;
  right: 1em;
}

/* flex box to make the body and menu play nice */
div.flex-box{
	display: flex;
  flex-direction: row-reverse;
}
div.inner-flex{
  display: flex;
  flex-direction: column;
}

/* links */
.table-pop a:link{
	color: var(--link-color);
}
.table-pop a:visited{
  color: var(--link-clicked);
}


/* section tags */
#s-intro:before{
  content: "Introduction";
  height: 15em;
}
#s-basics:before{
  content: "Basics";
  height: 8em;
}
#s-leavening:before{
  content: "leavening";
  height: 12em;
}
#s-shortening:before{
  content: "Shortening";
  height: 13em;
}

/* fonts */
.merriweather-light {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-black {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: normal;
}

.merriweather-light-italic {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: italic;
}

.merriweather-regular-italic {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}

.merriweather-black-italic {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: italic;
}