:root
{
--solofontsize: 1rem;
--ff-primary: Georgia, Garamond, Times New Roman, Times, serif;

--clr-dark: #333;
--clr-light: #fff;
/* 
--clr-darkbg: #1e0d0a;
 */
 --clr-darkbg: black;
--clr-darklighter0: #301612;
--clr-darklighter1: #3e1b15;
--clr-darklighter2: #8b3e30;
--clr-darklighter3: #8e4235;
--clr-textlight: #white;
--clr-textmed1: #7a151e; /* DEEP RED */
--clr-textmed2: #9b5245;

--controlwidth: 1400px;
--heightcontrol: 950px;
}

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

body {
background-color: var(--clr-darkbg);

/* NO BG */
background-image: url('');
  background-repeat: no-repeat;

/* END NO BG */
  background-attachment: scroll;
  background-position: center top;
}

body,
h1,
h2,
h3,
p,
ul
{
	margin: 0;
	font-family: var(--ff-primary);
	font-size: var(--solofontsize);
	font-weight: 100;
	line-height: 1.6;
	color: var(--clr-textlight);
}

/* Typography */



/* Layout */

header {
border-bottom: 1px solid var(--clr-darklighter2);
background-color: var(--clr-darklighter1);
background-image: url("dd4-asset-bgstripes.gif");
}

section {
/* background-color: #666; */
padding-top:0;
}

footer {
margin-top: 1em;
height: 8em;
/* background-color: #444; */
}

footer .container {
height:100%;
padding-top:1.6em;

background-image: url("dd4-asset-bgfooter.png");
background-repeat: no-repeat;
background-size:50%;
background-position: top center;
}

.container {
/* background-color: red; */
width: var(--controlwidth);
margin: 0 auto;
}


.headerboth {
display: flex;
flex-direction: row;
padding: 0em;
width: 100%;
}

.headerleft {
/* background-color: lightgreen; */
flex-basis:50%;
display: flex;
}

.headerright {
/* background-color: yellow; */
flex-basis:50%;
}

.homebutton {
display: inline-block;
color: transparent;
font-size: 0.9em;
font-style: italic;
text-decoration:none;
padding: 0.5em 0.5em;
background-image: url("dd4-asset-homebtn.png");
background-size: 40%;
background-repeat: no-repeat;
background-position: center center;
}

.homebutton:hover {
background-size:44%;
}

.title {
display: inline-block;
text-align: center;
margin: 0px auto;
padding-right:0em;
font-weight: 700;
font-style: italic;
width: 500px;
height: 60px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-image: url("dd4-asset-title.png");
background-size: 80%;
background-repeat: no-repeat;
background-position: 40% center;
}

.pagenumbers {
text-align: center;
margin: 1em auto;
font-weight: 300;
font-style: italic;
}

.pagecontainer {
display:flex;
flex-direction: row;
justify-content:space-around;
align-items: center;
}

.page {
flex-basis: 100%;
height:var(--heightcontrol);
}

.pagetext{
margin: auto;
width: 100%;
height: 100%;
padding: 4rem;
display: flex;
flex-direction: column;
}

.pagetext * {
font-size:0.9em;
}

.pagetext p:first-of-type{
margin-top:6em;
}

.btn {
background-color: #d9452a;
border-radius: 5px;
color:white;
margin: 0.5em 0;
padding: 0.6em 3em;
align-self:flex-start;
text-decoration:none;
font-weight:600;
}

.btn:first-of-type {
margin-top:2em;
}

.btn:hover {
background-color: #f45d41;
}

.pageimage {
height:95%;
width: 95%;
object-fit: contain;
pointer-events: none;

}

.navbuttons {
display:flex;
justify-content: space-between;
}

.navbuttons a,
.navbuttons p {
/* background-color: var(--clr-darklighter1); */
padding: 1em 5%;
margin: 1em 0;
text-decoration: none;
font-style: italic;
color: transparent;
background-size: 60%;
background-repeat: no-repeat;
}

.navbuttons p {
opacity:0.4;
}

.navprev {
background-image: url("dd4-asset-arrowprev.png");
background-position: center center;
}

.navnext {
background-image: url("dd4-asset-arrownext.png");
background-position: center center;
}

.navbuttons a:hover {
background-size:62%;
}

.footerp {
text-align: center;
color: var(--clr-textmed1);
}

.footerp a {
color: var(--clr-textmed2);
font-style: italic;
font-weight: 600;
text-decoration: none;
}

.footerp a:hover {
color: var(--clr-textlight);
}

.smaller {
font-size: 0.75rem;
margin-top: 2em;
}

/* BELOW: ADJUSTMENTS FOR NARROW SCREENS, THEORETICALLY. */

@media screen and (max-width: 1200px) { /* This does not work if you try to pass a variable to it */
  	.container {
 	   width:100%;
	}
  	.headerboth {
	flex-direction: column;
	padding: 0;
	}
	.headerright{
	background-color:var(--clr-darklighter0);
	}
	.pagecontainer {
	flex-direction: column;
	}
	.page{
	width:97%;
	height:auto;
	}
	footer .container {
	background-size:75%;
	}

}

}