/* (c) Cory Ondrejka 2020 */

* {
  padding: 0;
  margin: 0;
  border: none;
  font-family: Helvetica, sans-serif;
}

a {
  font-weight: 200;
  color: var(--white-text);
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: pointer;
}

html {
  --alert-text:#ff8f40;
  --dark-text:#ffa86d;
  --light-text:#ffc199;
  --white-text:#f3f3f3;
  --good-text:#488f31;
  --bad-text:#ff4f40;
  --gray:#282226;
  --gray-text:#5f2109;
  --background:#040103;
  --graphic_background:#10080a;
  --graph-color0:#ff4f40;
  --graph-color1:#ff8040;
  --graph-color2:#ffa84e;
  --graph-color3:#ffcb6b;
  --graph-color4:#ffec91;
  --graph-color-ug0:#488f31;
  --graph-color-ug1:#75a861;
  --graph-color-ug2:#a0c190;
  --graph-color-ug3:#c9dac1;
  --graph-color-ug4:#f3f3f3;
  --graph-color-divergent0:#ff4f40;
  --graph-color-divergent1:#ff8c78;
  --graph-color-divergent2:#ffbfb3;
  --graph-color-divergent3:#f1f1f1;
  --graph-color-divergent4:#bad0af;
  --graph-color-divergent5:#83af70;
  --graph-color-divergent6:#488f31;
  --graph-line0:#ff8f40;
  --graph-line1:#ff4f40;
  --graph-line2:#28df29;
  --graph-line3:#bf6ee3;
  --graph-line4:#ff51ab;
  --graph-line5:#bebe00;
  --graph-background:#080206;
  --graph-shelter:#043201;
  --graph-masked:#010442;
  --graph-zero:#aaa2a0;
  --graph-level:#666260;
  --graph-guide:#ffc199;
  --graph-base:#f3f3f3;
  --graph-box:#a39393;
  --left-offset: 2%;
  --vert-space: 1.5em;
}

body {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--background);
  color: var(--light-text);
  font-size: 150%;
}

.content {
  opacity: 0;
  transition: opacity 1s ease-in;
  width: 100%;
  margin: auto;
}

h1, h2, h3, h4, p, ol, ul, .datelink {
  width: 625px;
  margin: auto;
}

.datelink {
  display: block;
}

h1 {
  font-weight: 700;
  font-size: 200%;
  color: var(--white-text);
  line-height: 1.5em;
}

h2 {
  font-weight: 400;
  font-size: 155%;
  color: var(--white-text);
  line-height: 1.5em;
}

h3 {
  font-weight: 400;
  font-size: 125%;
  color: var(--white-text);
  line-height: 1.5em;
}

h4 {
  font-weight: 200;
  font-size: 100%;
  color: var(--white-text);
  line-height: 1.5em;
}

.covidtitle {
  font-weight: 700;
  font-family: "Times New Roman", serif;
  font-size: 300%;
  color: var(--white-text);
}

.covidsubtitle {
  font-weight: 400;
  font-family: "Times New Roman", serif;
  padding-top: 0.9%;
  color: var(--white-text);
}

.no-scroll {
  height: 100vh;
  overflow-y: hidden;
  padding-right: 15px
}

ol {
  padding-left: 2em;
}

ol li {
  margin-top: var(--vert-space);
}

sup {
  margin-left: 0.1em;
  margin-right: 0.2em;
  line-height: 0px;
}

ul {
  padding-left: 1em;
}

.result {
  font-weight: 700;
  color: var(--alert-text);
}

.entry {
  color: var(--dark-text);
  border-bottom: var(--dark-text) 1px dashed;
  cursor: pointer;
}

.entry::after {
  content: " \25BC "
}

.fakeentry {
  color: var(--dark-text);
  border-bottom: var(--dark-text) 1px dashed;
}

.title {
  opacity: 0;
  transition: opacity 0.5s ease-in;
  width: 98%;
  margin-bottom: 1%;
  padding: 1% 0% 1% 1%;
  justify-content: left;
  position: relative;
}

p {
  font-weight: 400;
  font-size: 100%;
  line-height: 1.5em;
}

canvas + p, a + p, p + p, p + h1, p + h2, p + h3, p + h4, ol + p, ul + p, ul + h1, ol + h1, ul + h2, ol + h2, ul + h3, ol + h3, ul + h4, ol + h4 {
  margin-top: var(--vert-space);
}

li {
  font-weight: 100;
  font-size: 90%;
  line-height: 1.25em;
}

.graphic, .svggraphic {
  position: relative;
  width: 96%;
  padding: var(--left-offset);
  background-color: var(--graphic_background);
}

.graphic_temp {
  width: auto;
  display: block;
  padding: var(--left-offset);
  padding-left: 100px;
  background-color: var(--graphic_background);
}

.svggraphic {
  height: 600px;
  margin-top: var(--vert-space);
}

input:focus {
  outline: none;
}

.pubg {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: RGBA(0, 0, 0, .1);
}

.pu {
  position: absolute;
  margin-top: var(--vert-space);
  padding: 0.25em;
  border: none;
  height: 2em;
  width: 20em;
  background-color: var(--gray);
  color: var(--light-text);
  margin-bottom: 0.25em;
}

.pu input {
  width: 100%;
  height: 100%;
  background-color: var(--gray);
  color: var(--light-text);
  font-size: 150%;
}

.options {
  width: 20em;
  height: 10em;
  line-height: 1.25em;
  overflow-y: auto;
  background-color: var(--gray);
  color: var(--light-text);
  font-size: 125%;
}

.legend {
  position: relative;
  font-size: 80%;
  display: flex;
  padding-top: 1em;
  justify-content: center;
}

.hlegend {
  line-height: 2em;
  padding-top: 2em;
  font-size: 70%;
}

.legendrow {
  display: flex;
  padding-left: 1em;
  padding-right: 1em;
  justify-content: space-between;
  margin-bottom: 1em;
  background-color: black;
}

.side {
  font-size: 30%;
  padding-top: 3em;
  width: 100px;
}

.side > h4 {
  width: auto;
}

.cbox {
  width: 1em;
  margin-left: 10px;
}

.tbox {
  height: 100%;
  white-space: nowrap;
}

.table {
  color: var(--dark-text);
  margin-bottom: 1%;
  font-size: 75%;
  border: 1px solid var(--light-text);
  padding: 0.5em;
}

.theader {
  font-size: 80%;
  margin-top: var(--vert-space);
  padding-bottom: 0.1em;
  display: flex;
  border-bottom: 1px solid var(--light-text);
}

.tscroll {
  overflow-y: auto;
  margin-top: var(--vert-space);
}

.trow {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  display: flex;
  justify-content: space-between;
}

.tplace {
  font-weight: 400;
  width: 30%;
  flex: 0 0 auto;
}

.tvalue {
  font-weight: 100;
  width: 20%;
  flex: 0 0 auto;
  text-align: right;
}

.tdelta {
  font-weight: 100;
  width: 10%;
  text-align: right;
  flex: 0 0 auto;
}

.tspark {
  width: 40%;
  flex: 0 0 auto;
}

.tcanvas {
  width: 0;
  height: 0;
}

.mapbox {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}

.tablebox {
  flex: 1 0 auto;
  padding-left: 5%;
}

.glabel {
  position: absolute;
  top: 0px;
}

.labelx {
  position: absolute;
  top: 100%;
}

.labely {
  font-size: 50%;
  position: absolute;
  right: 100%;
  padding: 0.5em;
  margin-top: var(--vert-space);
  color: var(--light-text);
}

.labelKeyY {
  font-size: 50%;
  position: absolute;
  left: 0%;
  line-height: 1em;
  color: var(--white-text);
  text-align: center;
}

.labelKeyYBig {
  font-size: 80%;
  font-weight: 400;
  line-height: 1.1em;
  text-align: left;
  white-space: nowrap;
  padding-left: 1em;
}

.labelKeyYSmall {
  font-size: 50%;
  line-height: 1.1em;
  text-align: left;
  white-space: nowrap;
}

.labelKeyX {
  position: absolute;
  top: 100%;
  font-size: 50%;
  padding: 0 0.5em 0 0.5em;
  margin-top: var(--vert-space);
  line-height: 1em;
  color: var(--white-text);
  border-right: 1px solid var(--white-text);
  text-align: center;
}

.dot {
  position: absolute;
  width: 4px;
  height: 4px;
  line-height: 0.5em;
  border: 1px solid;
  border-radius: 50%;
  white-space: nowrap;
}

.dot span {
  padding-left: 0.5em;
  z-index: 0;
  font-size:75%;
  position: relative;
}

.dot .popup {
  padding: 1em;
  font-size: 125%;
  background-color: var(--gray);
  border: 1px solid var(--white-text);;
  visibility: hidden;
  width: fit-content;
  z-index: 1;
  position: relative;
  margin-left: -25%;
}

.dot:hover .popup {
  visibility: visible;
}

.grapharea {
  border-left: 1px solid var(--white-text);
  border-bottom: 1px solid var(--white-text);
}

.biggraph {
  height: 5%;
}

.svg {
  display: inline-block;
  position: relative; 
  width: 100%; 
  padding-top: 63%;
  vertical-align: middle; 
  margin-top: var(--vert-space);
  margin-bottom: 1em;
}

.svgBackground {
  display: inline-block;
  position: relative; 
  width: 100%; 
  padding-top: 63%;
  vertical-align: middle; 
  overflow: hidden;  
}

.navbar {
  width: 10%;
  display: flex;
  text-align: left;
  flex-direction: column;
  position: absolute;
  top: 120%;
  left: 1%;
}

.navbar a {
  border: none;
  font-weight: 400;
}

.copyright {
  width: 90%;
  text-align: center;
  padding: 5%;
  font-size: 70%;
  color: var(--gray-text);
}

.textWithNotes {
  display: flex;
  width: 90%;
  padding-left: 10%;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.block {
  display: block;
  width: 100%;
  padding-bottom: 4em;
}
.story {
  margin-top: var(--vert-space);
}
.footnote {
  margin-top: var(--vert-space);
}
.col {
  width: 100%;
}

.person {
  position: relative;
}

.opacityZero {
  opacity: 0.0;
}

.opacityFifty {
  opacity: 0.5;
}

.graphText, .circle {
  transition: opacity 0.25s ease-in;
}

.overlay {
  position: absolute;
  height: 100%;
  top: 0px;
  border-left: 1px solid white;
}