:root {
	--fs-xl: clamp(3.5rem, 12vw + 1rem, 12rem);
	--fs-l: clamp(1.5rem, 2.25vw + 1rem, 2.25rem);
	--fs-m: clamp(1.25rem, 1.8vw + 1rem, 1.8rem);
	--fs-s: 1rem;
	--off-black: #2F4858;
	--off-white: #FFFFFF;
	--brand-color: #800020;
	--highlight-color: #00C7FB;

}

@media (min-width: 40em) {
	:root {
		--fs-l: clamp(2.5rem, 3.75vw + 1rem, 3.72rem);
		--fs-m: clamp(2rem, 3vw + 1rem, 3rem);
		--fs-s: 1.5rem;
	}
}

* {margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: Arial, Helvetica, Sans-serif; 
	background-color: var(--off-white);
	color: var(--off-black);
	font-size: var(--fs-s);

}

div {
	margin: 1.2em;
}

h1 {
	font-size: var(--fs-l);
	color: var(--off-black);
	/*text-shadow: 1px 1px 0px #444;*/ 
	width: 100%;
	white-space: pre-wrap;
	margin-bottom: 1.5em;
	text-align: center;
}

h2 {
	font-size: var(--fs-m);
	text-align: center;
	white-space: pre-wrap;
	padding: 1em;
}

.off-white-h2 {
	font-size: var(--fs-m);
	text-align: left;
	color: var(--off-white);
	white-space: pre-wrap;
	padding: 1em;
	left: -2em;
}

p {
	font-size: var(--fs-s);
	color: var(--off-black);
	margin-bottom: 0.5em;
	text-align: center;
	white-space: pre-wrap;
}

.off-white-p {
	font-size: var(--fs-s);
	color: var(--off-white);
	margin-bottom: 0.5em;
	text-align: left;
	left: -2em;
	white-space: pre-wrap;
}

.header {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--off-white);
	padding: 0 25px;
	transition: 0.3s;
}

.logo {
	display: block;
}

.logo svg {
	display: block;
	width: 100%
}

.navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.menu {
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	z-index: 1;
	transition: 0.5s;
}

.menu li {
	list-style-type: none;
}

.menu li a {
	color: #2F4858;
	text-decoration: none;
	display: block;
	padding: 40px 25px;
	font-size: var(--fs-s);
	line-height: 1;
	transition: 0.3s;
}

.menu li a:hover {
	box-shadow: 0 -5px 0px #2F4858 inset, 500px 0 0 rgba(255,255,255,0.5) inset;
	padding: 35px 25px 45px 25px;
}

.hamburger {
	position: relative;
	width: 30px;
	height: 4px;
	background: #2F4858;
	border-radius: 10px;
	cursor: pointer;
	z-index: 2;
	transition: 0.3s;
}

.hamburger:before, .hamburger:after {
	content: "";
	position: absolute;
	height: 4px;
	right: 0;
	background: #2F4858;
	border-radius: 10px;
	transition: 0.3s;
}

.hamburger:before {
	top: -10px;
	width: 30px;
}

.hamburger:after {
	top: 10px;
	width: 30px;
}

.toggle-menu {
	position: absolute;
	top: 0.5vh;
	right: 8vw;
	width: 30em;
	height: 100%;
	z-index: 3;
	cursor: pointer;
	opacity: 0;
}

.hamburger, .toggle-menu {
	display: none;
}

.navigation input:checked ~ .hamburger {
	background: transparent;
}

.navigation input:checked ~ .hamburger:before {
	top: 0;
	transform: rotate(-45deg);
}

.navigation input:checked ~ .hamburger:after {
	top: 0;
	transform: rotate(45deg);
}

.navigation input:checked ~ .menu {
	right: 0;
	box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}

main {
	overflow: auto;
	margin: auto;
}

footer {
	padding: 1em;
	color: var(--brand-color);
	background-color: var(--burgundy) ; 
	font-size: var(--fs-s);
	/*position: absolute;
	bottom: 0;*/
}


/**START template div containers display rules**/

.drop-shadow-container {
	padding: 2em;
	border-radius: 5px;
	background: #ffffff;
	box-shadow: 5px 5px 13px #ededed, -5px -5px 13px #ffffff;
}

.drop-shadow-container h2 {
	text-align: center;
}

.columns-to-rows-grid{
        --min-column-size: 30rem;
        position: relative;
        display: grid;
        /*gap: 1 rem;*/
        grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size),100%), 1fr));
        margin: 0;
        box-sizing: content-box;
        /*border: 5px solid lime;*/
}

.scaling-text-container{
        display: inline-block;
        position: relative;
        width: 100%;
        max-width: 100%;
        margin: auto;
        padding: min(2.5vh, 2.5rem)  clamp(1rem, 18%, 18rem);
        /*word-break: break-all;*/
        /*overflow-wrap: break-word;*/
        vertical-align: middle;
        overflow: hidden;
        /*border: 5px solid blue;*/
}


.scaling-svg-container{
        position: relative;
        height: 0;
        width: 100%;
        padding: 0;
        padding-bottom: 100%;
        margin: auto;
        /*border: 5px solid red;*/
}

.scaling-svg{
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        /*border: 5px solid orange;*/

}


.stacked-divs-container{
        --min-column-size: 30rem;
        display: grid;
        /*gap: 1 rem;*/
        grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size),100%), 1fr));
        position: relative;
        margin: 0;
}

.stacked-div-layer1-leftmost{
        grid-column: 1;
        grid-row: 1;
        translate: -20%;
        scale: 80%;

}

.stacked-div-layer1-centered{
        grid-column: 1;
        grid-row: 1;

}

.stacked-div-layer1-rightmost{
        grid-column: 1;
        grid-row: 1;
        translate: 40%;
        scale: 80%;

}

.stacked-div-layer2-leftmost{
        grid-column: 1;
        grid-row: 1;
        z-index: -1;
        /*border: 5px solid orange;*/
}

.stacked-div-layer2-centered{
        grid-column: 1;
        grid-row: 1;
        z-index: -1;
        /*border: 5px solid orange;*/
}

.stacked-div-layer2-rightmost{
        grid-column: 1;
        grid-row: 1;
        z-index: -1;
        translate: 40%;
        scale: 80%;
        /*border: 5px solid orange;*/
}

.stacked-div-layer3-centered{
        grid-column: 1;
        grid-row: 1;
        z-index: -2;
        overflow: hidden;
        /*border: 5px solid orange;*/
}

/**END template div containers display rules**/


/***START Flexbox layout rules*/
/*Edits entire container*/
#Flexbox {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: center;
}
#FlexboxCols{
        display: grid;
        /*grid-auto-flow: column;*/
        grid-auto-columns: 1fr;
}
/*Formats flexbox contents*/
.FlexboxContent {
        flex-grow: 1;
}
/*Formats specific flexbox contents*/
.FlexboxContent-cols {
        /*enables equal column widths dynamically*/
        grid-auto-columns: 1fr;
}
.FlexboxContent-1{
        width: 50%;
}
.FlexboxContent-2{
        width: 50%;
}
/***END Flexbox layout rules*/

/**START Hero sections**/
.hero {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}


/**END Hero sections**/

/**START embedded YouTube video rules**/
.video-container-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0;
}

.video-responsive {
    position: absolute;
    inset: 0;
    margin: 0;
}

.video-responsive iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

/**END embedded YouTube video rules**/

/**START form display rules**/
input, label, select, textarea {
        float: left;
        width: max(18em, 21em);
        margin-bottom: 1em;
        padding: 0.5em;
	font-size: var(--fs-s);
        }

label {
        font-family: Arial, Sans-serif, futura;
        color: var(--off-black);
        clear: left;
        padding: 0;
        margin: 0;
}

input[type="file"] {
        border: 2px solid #0080FE;
}

input[type="submit"] {
        margin-left: 10em;
        width: auto;
        padding: 10px 28px;
        clear: both;
        font-size: 15px;
        font-weight: bold;
        letter-spacing: 0.03em;
        background: #4a4a8a;
        color: #fff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        }

input[type="submit"]:hover{
        background: #3a3a7a;
}

form {
        overflow: auto;
        padding-top: 1em;
        clear: both;
        display: block;
        }

/**END form display rules**/

@media screen and (max-width: 992px) {
	.hamburger, .toggle-menu {
		display: block;
	}

	.header {
		padding: 2vh 20px;
	}

	.menu {
		justify-content: start;
		flex-direction: column;
		align-items: center;
		position: fixed;
		top: 0;
		right: -300px;
		background: var(--off-white);
		width: 300px;
		height: 100%;
		padding-top: 13vh;
	}

	.menu li a, .menu li a:hover {
		padding: 30px;
		font-size: 24px;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
	}

	.columns-to-rows-grid{
		--min-column-size: 35rem;
		display: grid;
		/*gap: 1 rem;*/
		grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size),100%), 1fr));
		margin: 0;
	}

}

















nav {background-color: #443A5C;}

nav a {color: white; text-decoration: none;}
nav a:hover {color: #ddd;}
nav ul {display: table; width: 1000px; margin: auto;}
nav li {display: table-cell; text-align: center; padding: 1em;}




blockquote {display: table; margin-bottom: 1em; border-bottom: 1px solid #ccc; padding: 0.5em; }
blockquote p {display: table-cell; width: 70%; vertical-align: top;}
blockquote form {  display: table-cell; width: 10%;}

.errors {padding: 1em; border: 1px solid red; background-color: lightyellow; color: red; margin-bottom: 1em; overflow: auto;}
.errors ul {margin-left: 1em;}


.itemlist {display: table;}
.categories {display: table-cell; width: 20%; background-color: #333; padding: 1em; list-style-type: none;}
.categories a {color: white; text-decoration: none;}
.categories li {margin-bottom: 1em;}
.itemlist .items {display: table-cell; padding: 1em;}

.currentpage:before { content: "["; }
.currentpage:after { content: "]"; }

#pdf-canvas {
	max-width: 100%;
	height: auto;
}

/**START voice lesson media layout**/
.media-pdf-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1em;
    margin: 0;
}

@media (min-width: 768px) {
    .media-pdf-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.media-section {
    margin: 0;
}

.pdf-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.pdf-controls {
    margin: 0 0 0.5em 0;
}

.pdf-canvas-wrapper {
    width: 100%;
    overflow: auto;
    border: 1px solid #ccc;
    margin: 0;
}
/**END voice lesson media layout**/