/*=============================================================================
  File:         bluephrase.com/css/darkphrase.css
  Language:     CSS
  Copyright:    Read Write Tools © 2019
  License:      CC-BY-NC-ND 4.0
  Initial date: Sep 13, 2019
  Contents:     Not yet fully destructured 9/13/2019
=============================================================================*/

@charset "UTF-8";

html {
	font-size: 14pt;
	font-family: 'Source Serif Pro', serif;
	font-weight: normal;
	font-variant-ligatures: none;
}
*:focus {
	outline-offset: 4px;
	outline: 1px dotted #777;
}

/* ------------------- typography ------------------- */
h1, h2, h3, h4, h5, h6, .title {
	font-family: 'Source Sans Pro', sans-serif;
}
h1 { /* title */
	font-size: 1.4rem;
	margin: 0 auto 1.6rem auto;	font-weight: bold;
	text-transform: uppercase;
}
h2 { /* major section */
	font-size: 1.1rem;
	margin: 5rem auto 1.2rem auto;
	letter-spacing: 1px;
	text-transform: uppercase;
}
h3 { /* subhead */
	margin: 3rem auto 1.0rem auto;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
}
h4 { /* kicker */
	font-size: 0.8rem;
	margin: 0 auto 0 auto;
	padding-top: 2rem;
	padding-right: calc(var(--spotlight-size) + 2.5rem);
	letter-spacing: 1px;
	font-style: italic;
	box-sizing: border-box;
}
h5 { /* nav title */
	font-size: 1.0rem;
	margin: 1.0rem auto;
	letter-spacing: 0px;
}
h6 { /* sidebar title */
	font-size: 1.6rem;
	margin: 1.6rem auto;
	letter-spacing: 0px;
}
p {
	font-family: 'Source Serif Pro', serif;
	text-align: left;
	font-size: 1.0rem;
	line-height: 1.6em;
	margin: 1rem auto;
}
dl {
	margin: 0 auto 3rem auto;
}
dt, dd, li {
	font-family: 'Source Serif Pro', serif;
	text-align: left;
	font-size: 1.0rem;
	line-height: 1.6em;
}
dt {
	margin-top: 2rem;
}
dd {
	margin-left: 4rem;
}
dl table {
	margin-top: 1rem;
	margin-left: 4rem;
}
.code,
code {
	font-family: 'Source Code Pro', monospace;
	font-size: 0.9em;
	font-style: normal;
	padding: 0 0.25em;
}
code.brk {
	word-break: break-all;
}
code.nobr {
	white-space: nowrap;
}
table {
	font-size: 0.9rem;
	margin: 0 auto;
}
th, td {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	padding: 0.5em 1em;
}
td.code {
	font-size: 0.8rem;
}
pre {
	font-family: 'Source Code Pro', monospace;
	font-size: 0.8rem;
	box-sizing: border-box;
}
figure {
	box-shadow: 5px 5px 8px var(--pure-black);
}
figure pre,
pre.example {
	border-style: solid solid none solid;
	border-color: var(--pure-black);
	border-width: 1px;
}
figure figcaption,
pre.example ~ figcaption {
	font-size: 0.9em;
	font-style: italic;
	text-align: center;
	margin: 0 auto 0 auto;
	padding: 1rem 0 0.5rem 0;
	border-style: none solid solid solid;
	border-color: var(--pure-black);
	border-width: 1px;
	box-sizing: border-box;
}

/* ---------------------- color --------------------- */
body {
	color: var(--white);
}
h1, h2, h3, h5, h6 {
	color: var(--title-blue);
}
h4 {
	color: var(--yellow);
}
b,
.white {
	color: var(--pure-white);
}
.yellow {
	color: var(--yellow);
}
pre {
	border: 1px solid var(--pure-black);
	background-color: var(--light-black);
	margin: 0 auto;
}
table::-webkit-scrollbar,
pre::-webkit-scrollbar {
    height: 0.5rem;
}
table::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
    background-color: var(--pure-black);
}
table::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
    background-color: var(--dark-gray);
}
pre br:last-child {
	display: none;
}
table {
	background-color: var(--light-black);
	border: none;
}
th {
	color: var(--yellow);
	background-color: var(--nav-black);
	border-bottom: 1px solid var(--pure-black);
}
td {
	border-bottom: 1px solid var(--black);
}
figure figcaption,
pre.example ~ figcaption {
	color: var(--yellow);
	background-color: var(--medium-black);
}

/* ------------------- decorations ------------------ */
th {
	letter-spacing: 1px;
	padding: 0.5em 1em;
}
td {
	border-bottom: 1px solid var(--pure-black);
}

/* --------------------- layout --------------------- */
body {
	margin: 0;
	padding: 0;
}

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

/* add hscroll to wide tables and pre*/
table,
pre {
	display: block;
	overflow-x: auto;
}

td.center {
	text-align: center;
}

abbr[title] {
	text-decoration: none;
	border-bottom: 1px dashed;
}

/* ---------- layout: story width ---------- */
pre {
	padding: 1em 2em 1em 2em;
	line-height: 1.4em;
}
h1, h2, h3, h4, h5, h6, .title {
	max-width: var(--column-max-width);
}
ul,
ol {
	max-width: var(--column-max-width);
	margin: 0 auto;
	padding-left: 4rem;
}
dl ul {
	padding-left: 6rem;
}
details {
	max-width: var(--column-max-width);
	margin: 1em auto 0 auto;
}
summary {
	margin-bottom: 1rem;
}
table {
	max-width: var(--column-max-width);
}
pre {
	max-width: var(--column-max-width);
}
figure {
	margin: 0 auto 0 auto;
	max-width: var(--column-max-width);
}
figure figcaption,
pre.example ~ figcaption {
	max-width: var(--column-max-width);
}

/* ------------------- media queries ------------------- */
@media only screen and (max-width: 564px) {
	html {
		font-size: 12pt;
	}
	div#banner {
		display: none;
	}
	div#story {
		padding: 0 0.5rem 7rem 0.5rem;
	}
}


/* ======================================
    MediaQuery-Reporter Styles
========================================= */
/*
body:after {
    content: "More than 900px";
    font-size: 300%;
    font-weight: bold;
    position: fixed;
    bottom: 60px;
    width: 100%;
    text-align: center;
    background-color: hsla(1,60%,40%,0.7);
    color: #fff;
}
@media only screen and (max-width: 900px) {
    body:after {
        content: "564px to 900px";
        background-color: hsla(90,60%,40%,0.7);
    }
}
@media only screen and (max-width: 564px) {
    body:after {
        content: "less than 564px";
        background-color: hsla(180,60%,40%,0.7);
    }
}
*/