:root {
    --background-color: white;
    --subgrouped-background-color: rgb(255, 255, 255);
    --grouped-background-color: rgb(245, 245, 245);
    --navbar-background-color: rgba(255, 255, 255, 0.98);
    --footer-background-color: rgb(245, 245, 245);
    --text-color: black;
    --title-text-color: black;/*rgb(27, 27, 27);*/
    --subject-text-color: #4a5568;/*rgba(0, 0, 0, 0.65);*/
    --body-text-color: rgb(27, 27, 27);
    --accent-color: rgb(255, 147, 1); /*rgb(90, 200, 250);*/
	--link-color: rgb(255, 140, 0);
	--hover-color: rgb(255, 89, 41);
    --blockquote-text-color: rgba(0, 0, 0, 0.72);
    --blockquote-border-color: rgba(0, 0, 0, 0.1);
    --horizontal-line-color: rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: rgb(18, 18, 18);
        --subgrouped-background-color: rgb(32, 32, 32);
        --grouped-background-color: rgb(48, 48, 48);
	    --navbar-background-color: rgba(18, 18, 18, 0.95);
	    --footer-background-color: rgb(10, 10, 10);
        --text-color: white;
        --title-text-color: white;/*rgba(255, 255, 255, 0.78);*/
        --subject-text-color: rgba(255, 255, 255, 0.65);
        --body-text-color: rgba(255, 255, 255, 1.0);
        --accent-color: rgb(255, 147, 1); /*rgb(90, 200, 250);*/
		--link-color: rgb(255, 140, 0);
		--hover-color: rgb(255, 59, 61);
        --blockquote-text-color: rgba(255, 255, 255, 0.78);
        --blockquote-border-color: rgba(255, 255, 255, 0.1);
        --horizontal-line-color: rgb(111, 111, 111);
    }
}

:root {
	background-color: var(--footer-background-color);
	letter-spacing: 0;
	line-height: 1.5;
}

/* Allows for Dynamic Type on iOS */
html {
    font: -apple-system-body;
} 

/* Setting font-family here to override -apple-system-body */
body {
	height: 100vh;
    display: flex;
	flex-direction : column;	
    font-family: -apple-system-font, Helvetica, sans-serif;
}

main {
	background-color: var(--background-color);
	padding-top: 2rem;
	padding-bottom: 2rem;
	flex: 1;
}

.peek-top {
    position: fixed;
    z-index: -1;
    top: 0;
}

.peek-bottom {
    position: fixed;
    z-index: -1;
    bottom: 0;
}

.page {
	max-width: 50rem;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	margin-right: auto;
	margin-left: auto;
}

.index {
	max-width: 70rem;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	margin-right: auto;
	margin-left: auto;
}

.excerpt {
	margin-right: auto;
	margin-left: auto;
	border-bottom-width: 1px;
	margin-bottom: 2rem;
}

article {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

article header {
	text-align: center;
	padding-top: 0.25rem;
	padding-bottom: 2rem;
}

/* Text */
.pagetitle {
    font-size: 3rem;
    color: #fff;
	text-align: center;
	padding-top: 5rem; 	
	padding-bottom: 2rem;
}

.title {
    font-size: 2.5rem;
	text-align: center;
}

.subtitle {
	text-align: center;
    color: var(--subject-text-color);
	padding-top: 0.2em; 	
}

.subject {
    color: var(--subject-text-color);
	padding-top: 0.2em; 		
}

h1 {
    font-size: 2.25rem;
    font-weight: bold;
    color: var(--title-text-color);
    line-height: 1.2em;
	padding-top: 0.4em; 	
}

h2 {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--title-text-color);
    line-height: 1.27275em;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

h3 {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--title-text-color);
    margin-top: 0.5em;
    margin-bottom: 0em;
}

h4 {
    font-size: 1em;
    color: var(--text-color);
    margin: 1em 0;
}

h5 {
    font-size: 0.875em;
    font-weight: normal;
    font-style: italic;
    color: var(--text-color);
    margin: 1em 0;
}

td {
	color: var(--body-text-color);
}

mark {
	background-color: var(--accent-color);
    color: var(--body-text-color);
} 

del, u {
	text-decoration-color: var(--accent-color);
	color: var(--body-text-color);
}

blockquote {
	border-left:3px solid var(--accent-color);
	padding-left:.6em;
	color: var(--body-text-color);
}



/* Paragraph & Typographic */
p {
    color: var(--body-text-color);
    font-size: 1.2rem;
    line-height: 28px;
    margin-bottom: 25px;
}

time {
    font-size: 1.5em;
    font-weight: normal;
    color: var(--subject-text-color);
    line-height: 1.27275em;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}


article ul {
	padding-left: 2.5rem;
	padding-bottom: 1.5rem; 
}

article li {
    color: var(--body-text-color);
    font-size: 1.25rem;
    line-height: 1.875rem;
	list-style-type: disc;
}


@media only screen and (max-width: 639px) {
	.pagetitle {
	    font-size: 2.25rem;
	}
	.title {
	    font-size: 2.25rem;
	}
	h1 {
	    font-size: 1.875rem;
	}
	h2 {
	    font-size: 1.25rem;
	}
	h3 {
	    font-size: 1.125rem;
	}
	time {
		font-size: 1.25rem;
	}
	article li {
	    font-size: 1.125rem;
	}
}

/* Links and buttons */
main a {
    color: var(--link-color);	
    word-wrap: break-word;
}

p a {
	text-decoration: underline;	
}

.light-link {
	color: white;
}

.light-link:hover {
	color: var(--link-color);	
}

.footnote, .reversefootnote {
	text-decoration: none;	
}

main a:hover,
a:focus {
	color: var(--hover-color);
}

main button {
    font-color: #fff;
	background-color: var(--accent-color);
}

main button:hover {
	background-color: var(--hover-color);
}

.button-separator {
	color: var(--body-text-color);
	font-size: 1.5em;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--horizontal-line-color);
    margin: 1em 0;
    padding: 0;
}

/* Images */

img {
    margin-left: auto;
    margin-right: auto;
}

picture {
    margin-bottom: 25px;
}

figure {
	padding-bottom: 1em;
}

figcaption { 
	color: var(--body-text-color);
	font-style: italic;
	caption-side: bottom;
	text-align: center;
}

/* Nav bar */

#navProButton:hover {
	color: var(--navbar-background-color);
	background-color: var(--text-color);
}

nav a:hover {
	color: var(--link-color);
}

.nav-text-color {
	color: var(--text-color);
}

.nav-bg {
	background-color: var(--navbar-background-color);
} 


/* Hero header */

.h-header {
	height: 95vh;
	min-height: 800px;
	max-height: 1024px;
}

.w-header {
	width: 320px;
}

.bg-wave {
	fill: var(--background-color);
}

.bg-wave2 {
	background-image: url(/img/svg/wave.svg);
	background-size: cover;
	background-repeat: no-repeat;
}

.blank-background {
	background-color: var(--background-color);
}

/* Footer */

footer {
	background-color: var(--footer-background-color);
}

footer a {
	color: var(--text-color);
}

footer a:hover {
	color: var(--link-color);
}

*[id]:before {
	display: block;
	content: " ";
	margin-top: -50px;
	height: 50px;
	visibility: hidden;
  }

.bottom-wave {
	transform: rotate(180deg);
}

.gradient {
	background: linear-gradient(to right, 
	    hsl(13.76,94.44%,64.71%) 0%,
	    hsl(13.38,94.39%,64.82%) 8.62%,
	    hsl(12.3,94.25%,65.13%) 16.56%,
	    hsl(10.58,94.03%,65.59%) 23.93%,
	    hsl(8.3,93.75%,66.16%) 30.85%,
	    hsl(5.52,93.41%,66.79%) 37.42%,
	    hsl(2.29,93.03%,67.46%) 43.77%,
	    hsl(358.72,92.76%,67.49%) 50%,
	    hsl(355.24,92.77%,66.3%) 56.23%,
	    hsl(352.04,92.8%,65.08%) 62.58%,
	    hsl(349.22,92.83%,63.88%) 69.15%,
	    hsl(346.86,92.88%,62.78%) 76.07%,
	    hsl(345.05,92.92%,61.85%) 83.44%,
	    hsl(343.88,92.95%,61.22%) 91.38%,
	    hsl(343.46,92.96%,60.98%) 100%
  );
}

.gradient2 {
	background: linear-gradient(to right, 
	    hsl(228.75,52.46%,52.16%) 0%,
	    hsl(227.94,52.83%,52.19%) 8.62%,
	    hsl(225.77,53.86%,52.27%) 16.56%,
	    hsl(222.72,55.44%,52.4%) 23.93%,
	    hsl(219.25,57.47%,52.54%) 30.85%,
	    hsl(215.69,59.82%,52.68%) 37.42%,
	    hsl(212.29,62.4%,52.81%) 43.77%,
	    hsl(209.19,65.08%,52.91%) 50%,
	    hsl(206.45,67.76%,52.96%) 56.23%,
	    hsl(204.11,70.32%,52.98%) 62.58%,
	    hsl(202.18,72.66%,52.95%) 69.15%,
	    hsl(200.66,74.66%,52.9%) 76.07%,
	    hsl(199.54,76.22%,52.83%) 83.44%,
	    hsl(198.85,77.23%,52.77%) 91.38%,
	    hsl(198.61,77.59%,52.75%) 100%
	);
}

.gradient3 {
	background: linear-gradient(to left, rgb(0, 0, 0), rgb(155, 155, 155));
}

.bg-grouped {
	background-color: var(--grouped-background-color);
}

.bg-subgrouped {
	background-color: var(--subgrouped-background-color);
}

.bg-orange {
	background: linear-gradient(to bottom,
	    hsl(13.76,94.44%,64.71%) 0%,
	    hsl(12.25,94.25%,65.14%) 5.72%,
	    hsl(10.5,94.02%,65.61%) 12.1%,
	    hsl(8.53,93.78%,66.1%) 19.02%,
	    hsl(6.36,93.51%,66.61%) 26.38%,
	    hsl(3.99,93.23%,67.12%) 34.07%,
	    hsl(1.43,92.93%,67.63%) 41.98%,
	    hsl(358.72,92.76%,67.49%) 50%,
	    hsl(356.09,92.77%,66.6%) 58.02%,
	    hsl(353.57,92.78%,65.68%) 65.93%,
	    hsl(351.2,92.81%,64.73%) 73.62%,
	    hsl(348.98,92.84%,63.77%) 80.98%,
	    hsl(346.95,92.87%,62.82%) 87.9%,
	    hsl(345.1,92.92%,61.88%) 94.28%,
	    hsl(343.46,92.96%,60.98%) 100%
	);
}

.bg-pink {
	background: linear-gradient(to bottom,
	    hsl(343.46,92.96%,60.98%) 0%,
	    hsl(340.89,89.28%,60.11%) 5.72%,
	    hsl(338.03,85.28%,59.12%) 12.1%,
	    hsl(334.9,81.08%,58.03%) 19.02%,
	    hsl(331.5,76.75%,56.85%) 26.38%,
	    hsl(327.85,72.38%,55.59%) 34.07%,
	    hsl(323.94,68.02%,54.26%) 41.98%,
	    hsl(319.77,63.74%,52.87%) 50%,
	    hsl(315.33,59.57%,51.44%) 58.02%,
	    hsl(310.63,55.6%,49.99%) 65.93%,
	    hsl(305.67,54.91%,48.54%) 73.62%,
	    hsl(300.48,54.17%,47.1%) 80.98%,
	    hsl(295.48,55.34%,47.69%) 87.9%,
	    hsl(291.17,56.55%,48.4%) 94.28%,
	    hsl(287.5,57.6%,49.02%) 100%
	);
}

.bg-purple {
	background: linear-gradient(to bottom,
	    hsl(287.5,57.6%,49.02%) 0%,
	    hsl(286.43,56.94%,49.22%) 5.72%,
	    hsl(285.21,56.24%,49.45%) 12.1%,
	    hsl(283.84,55.49%,49.69%) 19.02%,
	    hsl(282.34,54.72%,49.93%) 26.38%,
	    hsl(280.71,54.34%,50.18%) 34.07%,
	    hsl(278.98,54.11%,50.44%) 41.98%,
	    hsl(277.15,53.87%,50.69%) 50%,
	    hsl(275.25,53.64%,50.94%) 58.02%,
	    hsl(273.31,53.41%,51.18%) 65.93%,
	    hsl(271.33,53.2%,51.4%) 73.62%,
	    hsl(269.37,52.99%,51.62%) 80.98%,
	    hsl(267.45,52.79%,51.82%) 87.9%,
	    hsl(265.61,52.62%,52%) 94.28%,
	    hsl(263.91,52.46%,52.16%) 100%
	);
}

.bg-magenta {
	background: linear-gradient(to bottom,
	    hsl(263.91,52.46%,52.16%) 0%,
	    hsl(262.35,52.15%,52.47%) 5.72%,
	    hsl(260.55,51.8%,52.81%) 12.1%,
	    hsl(258.53,51.43%,53.17%) 19.02%,
	    hsl(256.28,51.04%,53.54%) 26.38%,
	    hsl(253.83,50.64%,53.92%) 34.07%,
	    hsl(251.17,50.22%,54.31%) 41.98%,
	    hsl(248.34,49.81%,54.68%) 50%,
	    hsl(245.34,49.4%,55.05%) 58.02%,
	    hsl(242.22,48.99%,55.41%) 65.93%,
	    hsl(239.01,49.02%,55.39%) 73.62%,
	    hsl(236,49.96%,54.55%) 80.98%,
	    hsl(233.28,50.85%,53.72%) 87.9%,
	    hsl(230.86,51.69%,52.92%) 94.28%,
	    hsl(228.75,52.46%,52.16%) 100%
	);
}

.bg-blue {
	background: linear-gradient(to bottom,
	    hsl(228.75,52.46%,52.16%) 0%,
	    hsl(227.94,52.83%,52.19%) 8.62%,
	    hsl(225.77,53.86%,52.27%) 16.56%,
	    hsl(222.72,55.44%,52.4%) 23.93%,
	    hsl(219.25,57.47%,52.54%) 30.85%,
	    hsl(215.69,59.82%,52.68%) 37.42%,
	    hsl(212.29,62.4%,52.81%) 43.77%,
	    hsl(209.19,65.08%,52.91%) 50%,
	    hsl(206.45,67.76%,52.96%) 56.23%,
	    hsl(204.11,70.32%,52.98%) 62.58%,
	    hsl(202.18,72.66%,52.95%) 69.15%,
	    hsl(200.66,74.66%,52.9%) 76.07%,
	    hsl(199.54,76.22%,52.83%) 83.44%,
	    hsl(198.85,77.23%,52.77%) 91.38%,
	    hsl(198.61,77.59%,52.75%) 100%
	);
}

.bg-cyan {
	background: linear-gradient(to bottom,    
	    hsl(198.61,77.59%,52.75%) 0%,
	    hsl(198.05,77.03%,52.57%) 0.86%,
	    hsl(196.49,75.47%,52.06%) 3.34%,
	    hsl(194.05,73.1%,51.28%) 7.26%,
	    hsl(190.84,70.13%,50.26%) 12.48%,
	    hsl(186.99,69.34%,49.05%) 18.82%,
	    hsl(182.57,69.26%,47.69%) 26.13%,
	    hsl(177.79,69.96%,47.45%) 34.25%,
	    hsl(173.33,71.52%,48.58%) 43.01%,
	    hsl(169.4,72.95%,49.62%) 52.25%,
	    hsl(166.05,75.79%,50.53%) 61.81%,
	    hsl(163.32,79.23%,51.28%) 71.52%,
	    hsl(161.27,81.94%,51.86%) 81.24%,
	    hsl(159.97,83.72%,52.22%) 90.78%,
	    hsl(159.51,84.36%,52.35%) 100%
	);
}

.bg-green {
	background: linear-gradient(to top,    
	    hsl(152.34,76.26%,42.94%) 0%,
	    hsl(152.5,76.27%,43.09%) 9.22%,
	    hsl(152.96,76.3%,43.52%) 18.76%,
	    hsl(153.62,76.34%,44.16%) 28.48%,
	    hsl(154.39,76.4%,44.96%) 38.19%,
	    hsl(155.21,76.45%,45.89%) 47.75%,
	    hsl(156.02,76.51%,46.87%) 56.99%,
	    hsl(156.77,76.57%,47.88%) 65.75%,
	    hsl(157.46,76.62%,48.87%) 73.87%,
	    hsl(158.06,76.66%,49.79%) 81.18%,
	    hsl(158.56,78.65%,50.63%) 87.52%,
	    hsl(158.96,80.93%,51.33%) 92.74%,
	    hsl(159.26,82.74%,51.88%) 96.66%,
	    hsl(159.45,83.93%,52.23%) 99.14%,
	    hsl(159.51,84.36%,52.35%) 100%
	);
}


.bg-dark {
	background: radial-gradient(    
		hsl(0,0%,32.94%) 0%,
	    hsl(0,0%,32.71%) 0.86%,
	    hsl(0,0%,32.06%) 3.34%,
	    hsl(0,0%,31.03%) 7.26%,
	    hsl(0,0%,29.66%) 12.48%,
	    hsl(0,0%,27.99%) 18.82%,
	    hsl(0,0%,26.03%) 26.13%,
	    hsl(0,0%,23.82%) 34.25%,
	    hsl(0,0%,21.38%) 43.01%,
	    hsl(0,0%,18.75%) 52.25%,
	    hsl(0,0%,15.97%) 61.81%,
	    hsl(0,0%,13.12%) 71.52%,
	    hsl(0,0%,10.35%) 81.24%,
	    hsl(0,0%,8.06%) 90.78%,
	    hsl(0,0%,7.06%) 100%
	);
}

.glyph path {
	fill: #eee;
}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}