/* ----------------------GOVERNING HTML -----------------------------------*/
html {font-size: 20.33px;}

/* ---------------------------DIVs------------------------------*/
body {margin: 1.5% auto 0; background-color: black; max-width: 900px;}

.container {width: 900px; background-color: black; margin: 0 auto 0; padding-bottom: 12px;}

.header {
background-color: #ffffcc;
max-width: 900px;
margin: 0 auto;
margin-bottom: 1.5em;
padding: 2% 3% .94% 3%;
border: .6em double #990000;
border-radius: .8em;
}

.template {
background-color: #ffe4b3;
max-width: 900px;
margin: 0 auto;
margin-bottom: 1.5em;
padding: 2.2% 4.8% 2% 4.9%;
border: .44em double #990000;
border-radius: .8em;
}

.ToC {
background-color: #d3f8d3;
max-width: 900px;
margin: 0 auto;
margin-bottom: 1.5em;
padding: 2% 3% .94% 3%;
border: .44em double #990000;
border-radius: .8em;
}

.schedule {
background-color: #ffe4b3;
max-width: 900px;
margin: 0 auto;
margin-bottom: 1.5em;
padding: 2.2% 4.8% 2% 4.9%;
border: .44em double #990000;
border-radius: .8em;
}

.footer {
background-color: #ffffcc;
max-width: 900px;
margin: 0 auto;
margin-bottom: 1.5em;
padding: 2% 3% .94% 3%;
border: .6em double #990000;
border-radius: .8em;
}

/* ---------------------TYPOGRAPHY--------------------------------------*/
h1 {
font-size: 1.67em;
color: #800000;
font-weight: bold;
line-height: 1;
text-align: center;
margin: 0 0 .17em 0;
font-family: Georgia, serif;
font-variant: small-caps;
}

h2 {
font-size: 1.43em;
color: #800000;
font-weight: bold;
text-align: center;
margin: 0 0 .2em 0;
font-family: Georgia, serif;
text-decoration: none;
}

h3 {
font-size: 1.31em;
color: #800000;
font-weight: bold;
text-align: center;
margin-top: .27em;
font-family: Georgia, serif;
}

h4 {
font-size: 1.2em;
color: #800000;
font-weight: bold;
text-align: left;
font-family: Georgia, serif;
}

p {
font-size: 1em;
color: black;
line-height: 1.33;
margin: 0 0 1% 0;
font-family: Verdana, sans-serif;
}

p.index {
font-size: .86em;
color: black;
line-height: 1.33;
margin: 0 0 1% 0;
font-family: Verdana, sans-serif;
}

p.head {
font-size: 1.1em;
color: #800000;
line-height: 1.2;
font-weight: 100;
margin: 0 0 1% 0;
font-family: Georgia, serif;
}

p.h3 {
font-size: 1.15em;
color: #800000;
font-weight: bold;
margin-top: .3em;
font-family: Georgia, serif;
}

p.footerh1, p.footerh2 {
font-size: 1.75em;
color: #b30000;
font-weight: bold;
line-height: 1;
text-align: center;
margin: 0 0 .2em 0;
font-family: Georgia, serif;
}

/* ----------------------LINKS-------------------------------------*/
a.toc {
color: #0000FF;
font-size: 1.3em;
margin-bottom: 7em;
}

a.toc:visited {
color: #9999ff;
}

a.toc:hover {
color: #009900;
text-decoration: none;
}

a.intext {
color: #0000e6;
}

a.intext:visited {
color: #8080ff;
}

a.intext:hover {
color: #009900;
text-decoration: none;
}

/* ------------------------SPANS-----------------------------------*/
.italic {
font-style: italic;
}

.bold {
font-weight: bold;
}

.linkblue {
color: #0000ff;
}

.underline {
text-decoration: underline;
}

.green {
color: #009900;
}

.red {
color: red;
}

/* ----------------------MEDIA ELEMENTS-------------------------------------*/
.video {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}

img {
max-width: 100%;
height: auto;
margin-top: .3em;
border: .21em solid #990000;
}

/* -----------------------------OTHER LINKS------------------------------*/
a.navlink {
color: #0000ff;
font-weight: bold;
}

a.navlink:visited {
color: #8080ff;
}

a.navlink:hover {
color: #009900;
text-decoration: none;
}

/* ----------------------SPECIAL PARAGRAPH CLASSES-------------------------------------*/
p.headersubtitle1 {
font-family: Georgia, serif;
font-size: 1.254em;
color: #b30000;
text-align: center;
}

p.headersubtitle2 {
font-family: Georgia, serif;
font-size: 1.254em;
color: #b30000;
text-align: center;
}

p.toplinks {
font-size: 1.146em;
font-family: Georgia, serif;
font-weight: bold;
text-align: center;
}

p.navlinks {
font-size: 1.11em;
font-family: Georgia, serif;
font-weight: bold;
text-align: center;
}

p.listen {
font-family: Georgia, serif;
font-size: 1.172em;
text-align: center;
color: #b30000;
}

p.signature {
font-style: italic;
margin-left: 2em;
}

p.below {
font-family: Georgia, serif;
font-size: 1.24em;
text-align: center;
color: #b30000;
font-weight: bold;
}

p.otherinfo {
font-family: Georgia, serif;
font-size: 1.2em;
text-align: center;
color: #b30000;
font-weight: bold;
}

/* ------------------------HR STYLES-----------------------------------*/
hr {
border: .1em solid red;
border-left-color: #ffe4b3;
border-right-color: #ffe4b3;
width: 69%;
height: .16em;
margin: .72em auto .35em;
}

hr.entrydivider {
border-top: .3em dashed green;
border-bottom: none;
width: 98%;
}

/*----------BREAKPOINTS----------*/

/* _______________  710 to 100000 _______________  */
@media screen and (min-width: 710px) and (max-width: 10000px) {
html {font-size: 20.31px;}
.container {width: 93%; margin: auto;}
}

/* _______________  670 to 709 _______________  */
@media screen and (min-width: 670px) and (max-width: 709px) {
html {font-size: 18px;}
.container {width: 93%; margin: auto;}
}

/* _______________  630 to 669 _______________  */
@media screen and (min-width: 630px) and (max-width: 669px) {
html {font-size: 17px;}
.container {width: 93%; margin: auto;}
}

/* _______________  590 to 629 _______________  */
@media screen and (min-width: 590px) and (max-width: 629px) {
html {font-size: 16px;}
.container {width: 93%; margin: auto;}
}

/* _______________  550 to 589 _______________  */
@media screen and (min-width: 550px) and (max-width: 589px) {
html {font-size: 15px;}
.container {width: 93%; margin: auto;}
}

/* _______________  510 to 549 _______________  */
@media screen and (min-width: 510px) and (max-width: 549px) {
html {font-size: 14px;}
.container {width: 93%; margin: auto;}
p.centerimage {text-align: center;}
}

/* _______________  470 to 509 _______________  */
@media screen and (min-width: 470px) and (max-width: 509px) {
html {font-size: 13px;}
.container {width: 93%; margin: auto;}
p.centerimage {text-align: center;}
}

/* _______________  430 to 469 _______________  */
@media screen and (min-width: 430px) and (max-width: 469px) {
html {font-size: 12px;}
.container {width: 93%; margin: auto;}
p.centerimage {text-align: center;}
}

/* _______________  390 to 429 _______________  */
@media screen and (min-width: 390px) and (max-width: 429px) {
html {font-size: 11px;}
.container {width: 93%; margin: auto;}
}

/* _______________  250 to 389 _______________  */
@media screen and (min-width: 250px) and (max-width: 389px) {
html {font-size: 10px;}
.container {width: 93%; margin: auto;}
p.centerimage {text-align: center;}
}