/*=============================================================================
  File:         readwritetools.com/css/headings.css
  Language:     CSS
  Copyright:    Read Write Tools © 2023
  License:      CC-BY-NC-ND 4.0
  Initial date: Jan 13, 2023
  Contents:     h1, h2, h3, h4, h5 and horizontal lines
=============================================================================*/

h1, h2, h3, h4, h5 {
    font-style: normal;
}
h1:first-of-type {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--title-color);
    margin: 3.0rem auto 0.8rem auto;
}
h1 {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 2px;
    color: var(--header-color);
    margin: 3.0rem auto 1.0rem auto;
}
h2 {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
    color: var(--header-color);
    margin: 3.0rem auto 1.0rem auto;
}
h3 {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0px;
    color: var(--header-color);
    text-align: center;
    margin: 3.0rem auto 1.0rem auto;
}
h3:before {
    content: '— ';
}
h3:after {
    content: ' —';
}
h4:before {
    content: '• ';
}
h4:after {
    content: ' •';
}
h4,
h5 {
	font-size: 0.8rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--light-gray);
    text-align: left;
    margin: 2.0rem auto 0.8rem auto;
}
h4 + h1:first-of-type {
	margin-top: 0rem;
}
@media only screen and (max-width: 564px) {
	div#story h4 {
		margin: 0;
		padding: 0.8rem 0 0 0;
	}
}

/*--------------------------------- special headings --------------------------------*/
h1.headline {
	font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--title-color);
    margin: 1rem auto 0.8rem auto;
	text-transform: initial;
}
h2.subtitle {
	font-size: 1.6rem;
    font-weight: 400;
    color: var(--title-color);
    margin: 1.0rem auto 1.0rem auto;
	text-transform: initial;
	border-top: none !important;
}
h4.kicker {
}

/* ----- horizontal lines ----- */
hr {
  border: none;
  margin: 2rem;
}
hr:before {
    content: '...';
    display: inline-block;
    font-size: 1.4rem;
    letter-spacing: 1.6rem;
    color: var(--hr-color);
    position: relative;
    top: -1rem;
    text-align: center;
    width: 100%;
}

#examples hr {
	max-width: 35%;
	margin: 3rem auto 3rem auto;
	border: none;
}