@font-face {
    font-family: 'Archivo Narrow';
    src: url('/resources/ArchivoNarrow-Medium.ttf');
	font-weight: 500;
}
@font-face {
    font-family: 'Archivo Narrow';
    src: url('/resources/ArchivoNarrow-MediumItalic.ttf');
	font-weight: 500;
	font-style: italic;
}
@font-face {
    font-family: 'Source Code Pro';
    src: url('/resources/SourceCodePro-Regular.ttf');
}

/* site organization */

:root {
	--color-teal: #009990;
	--color-pink: #ffaaee;
	--color-dawn: #fcc777;
	--color-gray: #a0a0a0;
}
html {
	scroll-behavior: smooth;
}
#site {
	overflow-x: hidden;
}
body {
	width: 100%;
	height: 100%;
	margin: 0;
	--nav-height: 7em;
	padding-top: var(--nav-height);
}
@media only screen and (min-width: 48em) {
    body {
    	--nav-height: 6.5em;
		padding-top: var(--nav-height);
    }
}
.sectionMasthead {
}
.sectionAbout {
}
.sectionEntry {
	margin-top: -1em;
}
.sectionComments {
	background-color: var(--color-pink);
}
.sectionArchive {
	background-color: var(--color-teal);
}
.content {
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: black;
    text-align: left;
	margin-left: 1em;
    margin-right: .5em;	
}
@media only screen and (min-width: 48em) {
    .content {
        font-size: 18px;
        margin-left: 5%;
    }
}

/*first order text styles*/

h1 { /*entry title*/
	font-family: 'Archivo Narrow', sans-serif;
    font-size: 150%;
    font-weight: 500;
    margin-top: 0px;
    margin-bottom: 1px;
}
h2 { /*website title*/
	font-family: 'Archivo Narrow', sans-serif;
    font-size: 125%;
    font-weight: 500;
    margin-top: 0px;
    margin-bottom: 1px;
}
h3 { /*section title*/
	font-family: 'Archivo Narrow', sans-serif;
    font-size: 125%;
	font-weight: 500;
	font-style: normal;
    line-height: 125%;
    max-width: 40em;
    margin-left: 0em;
	margin-bottom: 0em;
	color: var(--color-dawn);
}
h4 { /*byline*/
	font-family: 'Archivo Narrow', sans-serif;
    font-size: 100%;
	font-weight: 500;
    margin-top: 0px;
    margin-bottom: 1px;
}
p {
	font-family: 'Archivo Narrow', sans-serif;
    font-size: 100%;
    line-height: 125%;
    max-width: 40em;
    margin-left: 0em;
}
blockquote {
	font-family: 'Archivo Narrow', sans-serif;
	color: var(--color-teal);
    font-size: 100%;
    line-height: 108%;
    max-width: 40em;
    margin-left: 2em;
}
h6 { /*footnote*/
	font-family: 'Archivo Narrow', sans-serif;
    color: var(--color-gray);
    font-weight: 500;
    font-size: 16px;
    max-width: 70em;
    margin-left: 2em;
    margin-top: 0px;
    margin-bottom: 1px;
}

/* secondary text styles */

b {
    color: var(--color-teal);
    font-weight: 500;
}
em {
    color: var(--color-pink);
    font-weight: 500;
    font-style: normal;
}
strong {
	 color: var(--color-dawn);
    font-weight: 500;
    font-style: normal;
}
i {
    font-weight: 500;
    font-style: italic;
}
a {
    font-family: 'Archivo Narrow', sans-serif;
	text-decoration: underline;
	text-decoration-line: underline;
    color: var(--color-teal);
	text-decoration-color: var(--color-teal);
	text-decoration-thickness: 2px;
}
a:hover {
    color: #fcc777;
}
a:active {
   color: #fcc777;
	text-decoration-color: inherit;
}
sup {
    color: var(--color-pink);
    font-size: 16px;
    line-height: 0px;
    vertical-align: super;
}
.indent{
	max-width: 70em;
    margin-left: 2em;
}
.abstract{
	color: var(--color-gray);
	margin-left: 2em;
	text-indent: -2em;
	font-weight: 500;
    font-style: italic;
}

/* homepage */

.home{
	height: 100%;
	width: 100%;
	position: absolute;
	display: block;
	top: 0;
}
.homeSection {
	height: 25%;
	max-height: 25%;
	width: 100%;
	display: inline-block;
	align-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
	border: 0;
}
.home h3, .content .homeTitle {
	color: inherit;
	font-size: 30pt;
	margin: 0;
	margin-top: .4em;
}
.home a {
	text-decoration-thickness: 2.5px;
}
#home1 {
	background: var(--color-dawn);
	color: black;
}
#home2 {
	background: white;
	color: var(--color-pink);
}
#home3 {
	background: var(--color-gray);
	color: white;
	display: none;
}
#home4 {
	background: var(--color-pink);
	color: var(--color-teal);
}
#home5 {
	background: var(--color-teal);
	color: var(--color-dawn);
}

/* masthead */

#masthead {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
.navMenu {
	width: 100%;
	height: var(--nav-height);
	position: fixed;
	top: 0;
	left: 0;
	align-items: baseline;
	transition: transform .6s linear;
	background: rgba(252,199,119,.94);
	border-bottom: 2px solid #fcc777;
	z-index: 950;
}
.navMenu--hidden {
	transform: translateY(calc(-1 * (var(--nav-height) + 2px)));
}
.topMenu {
	width: 100%;
	top: 0;
	position: absolute;
	background: white;
}
.dropMenu {
	position: fixed;
	top: 0;
	right: 1em;
}
.navLink {
	color: var(--color-teal);
    text-decoration-color: var(--color-pink);
	text-decoration-thickess: inherit;
}
.navMenu h2 {
	color: black;
}
.navMenu p {
	color: black;
}
.navMenu .navLink {
	color: inherit;
	text-decoration-color: var(--color-teal);
	text-decoration-thickess: inherit;
}
.mallard {
	width: 4em;
	height: 4em;
	transition: transform .6s cubic-bezier(0.6,-0.5, 0.35, 0.6);
}
.mallard--hidden {
	transform: translateY(-6em) scale(0) rotate(360deg); 
}

/*archive*/

.archive {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archiveItem {
	color: white;
    line-height: 60%;
}
@media only screen and (min-width: 48em) {
    .archiveItem {
        line-height: 0;
    }
}
.archiveEntry {
    color: black;
    text-decoration-color: var(--color-pink);
	text-decoration-thickess: inherit;
}
.archiveVolume {
    color: var(--color-pink);
    text-decoration-color: var(--color-pink);
	text-decoration-thickess: inherit;
}
.archiveLive {
	color: #fcc777;
    text-decoration-color: var(--color-pink);
	text-decoration-thickess: inherit;
}
.archiveLive:hover {
    color: black;
}
.archiveLive:active {
   color: black;
}
.hidden {
    display: none;
}
.unhidden {
    display: block;
}

/*definition*/
.column {
    column-count: 1;
}
@media only screen and (min-width: 48em) {
    .column {
        column-count: 2;
        max-width: 60em;
    }
}
.cell {
    display: inline-block;
    break-inside: avoid;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 10px;
    min-width: 10em;
    max-width: 30em;
	width: 100%;
}
.definition {
    width: 90%;
    margin-top: 16px;
    margin-bottom: 0px;
    break-inside: avoid-column;
}
.definition_cont {
    width: 90%;
    margin-top: 0px;
    margin-bottom: 0px;
    break-inside: avoid-column;
}
.example {
    width: 75%;
    margin-bottom: 0px;
}
.IPA {
    color: #fcc777;
    font-family: 'Source Code Pro', monospace;
    font-size: 16px;
    vertical-align: top;
    font-weight: 500;
}

/* media */
iframe {
    width: 100%;
}
.image {
    display: inline;
    max-height: 1120px;
    max-width: 1120px;
    overflow: hidden;
}
.landscape {
    margin-top: .5em;
    margin-left: .5em;
    margin-right: .5em;
    display: inline-block;
    width: 90%;
    max-width: 1120px;
}
@media only screen and (min-width: 48em) {
    .landscape {
        width: 75%;
    }
}
.portrait {
    margin-top: .5em;
    margin-left: .5em;
    margin-right: .5em;
    display: inline-block;
    width: 75%;
    max-height: 1120px;
}
@media only screen and (min-width: 48em) {
    .portrait {
        width: 50%;
    }
}
.caption{
    width: 0;
}
.video {
    width: 90%;
    max-height: 1120px;
    max-width: 1120px;
    overflow: hidden;
}
.aspect {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.aspect iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}
@media only screen and (min-width: 48em) {
    .video {
        width: 75%;
	}}

/* comments */

#HCB_comment_box  {
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: white;
    text-align: left;
    width: 80%;
    max-width: 20em;
    min-height: 1.5em;
}
@media only screen and (min-width: 48em) {
    #HCB_comment_box {
        font-size: 18px;
    }
}
#HCB_comment_box h3 {
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 125%;
	font-weight: 500;
	font-style: normal;
    line-height: 125%;
    max-width: 40em;
    margin-left: 0em;
    color: var(--color-teal);
}
#HCB_comment_box span {
	font-family: 'Archivo Narrow', sans-serif;
    font-weight: 500;
    font-size: 16px;	
}
#HCB_comment_box img, #HCB_comment_box a, #HCB_comment_box .home-desc, #HCB_comment_box button {
    display: none;
}

	
/* unused
	
	.glossary_index{
	font-family: 'Source Code Pro', monospace;
    font-size: 16px;
    color: black;
	font-weight: 500;
}
.gi_row{
	height: 30px;
	font-weight: 500;
}
@media only screen and (min-width: 48em) {
    .gi_row {
        height: 20px;
		font-weight: 500;
    }
}
.gi_head{
	text-align: left;
	font-weight: 500;
	width: 67px;
}
.gi_cell{
	text-align: center;
	font-weight: 500;
	width: 30px;
}@media only screen and (min-width: 48em) {
    .gi_cell {
        height: 20px;
		font-weight: 500;
    }
}