/*
Note: This was adapted from http://motsuka.com/web-typography-workshop
*/
:root {
  --pad: 1em;
  --size-small: 0.6em;
  --height-imgmax: 70vh;

  --bgcolor: #f7f4f0;
  --brown: #9e6b28;
  --blue: #2160ff;
  --lightgrey: #eee;
  --yellow: #fceb7c;
  --green: #3e8044;
  --red: #f54538;
  --grey: #a4a4a4;
}

body{
  line-height: 1.35;
  font-size: 1.5rem;
  background-color: var(--bgcolor);
  color: var(--wood);
}
main{
  max-width: none;
}

a {
  color: var(--blue);
}

blockquote{
  text-indent: -0.3em;
  border: 0;
}

figure{
  height: 80vh;
}
figcaption{
  font-size: var(--size-small);
}
img, video {
  mix-blend-mode: normal;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.horizontal{
  height: auto;
}
.horizontal img{
  width: 100%;
  height: auto;
  margin-bottom: 1em;
}

sup{
  font-size: 0.5em;
}

.slide {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--pad);
}

.slide.divider {
  text-align: center;
  padding-bottom: 5em;
}

.slide.divider .text {
  margin: 0 auto;
  max-width: 100%;
}

/* .slide.divider h2{
  border: 1px solid var(--brown);
  border-radius: 50%;
} */

.slide footer{
  width: 100%;
  position: absolute;
  bottom: var(--pad);
  left: 0;
  border-top: 1px solid var(--brown);
  padding-top: var(--pad);
  font-size: var(--size-small);
}

.slide.divider h1 {
  font-size: 3rem;
}

.slide h2 {
  font-size: 2rem;
  text-align: center;
  line-height: 1.15;
}
.slide h2 + p{
  text-align: center;
}
.slide ul{
  padding: 0;
}
.slide li{
  /* list-style-type: none; */
  /* margin-bottom: 1em; */
  text-indent: -1em;
}

/* ul li::before{
  content: " — ";
} */

.text {
  width: 36rem;
  margin: 0 auto;
}

.image{
  height: var(--height-imgmax);
}
.image,.images{
  margin: auto;
}
.img-group{
  max-width: none;
  display: flex;
  height: var(--height-imgmax);
  justify-content: center;
}
.img-group .img{
  width: 50%;
  padding:10px;
}
.img-group .img:first-child{
  margin-right: 1em;
}


/*slide-specific overrides*/


/*.source:before{
  content: '— ';
}*/
.code, code{
  text-transform: none;
}

.table{
  margin: auto;
  margin-top: var(--pad);
}
table{
  font-size: .75em;
  width: 100%;
}
th{
  text-align: left;
  font-weight: normal;
  border-bottom: 1px solid var(--brown);
}
td, th{
  padding: 1rem;
  vertical-align: top;
}
td{
  text-transform: none;
  width: 30%;
  min-width: 25%;
}
/* td:first-child, th:first-child{
  padding-left: 0;
} */

.white-box {
  background-color: white;
  padding: 1rem;
}
.green {
  color: var(--green);
}
.grey-box {
  background-color: var(--lightgrey);
  padding: 0.2rem 0.5rem;
}
.blue {
  color: var(--blue);
}
.red {
  color: var(--red);
}
.yellow {
  background-color: var(--yellow);
}

.grey {
  color: var(--grey);
}

.box1 {
  background-color: white;
  padding: 1rem;
  margin: 1rem;
}

.box2 {
  background-color: white;
  margin: 1rem;
  padding: 2rem;
  border: 2px var(--blue) dashed;
}
.box2 p {
  background-color: var(--lightgrey);
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.inline {
  display: inline;
}

.end {
  color: var(--brown);
}

table, tr, td {
  border: 1px black solid;
}

table {
  width: 1000px;
  border-collapse:collapse;
}

td.symbol {
  padding: 5px;
}

td.word {
  font-weight: bold;
}

.hosting-box1 {
  border: 3px dashed var(--blue);
  text-align: center;
  margin:10px;
  margin: 1rem;
}

.hosting-box2 {
  border: 1px solid var(--brown);
  text-align: center;
  margin:10px;
  margin: 1rem;
}

.hosting-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.hosting-grid .box2 {
  border: 1px solid var(--brown);
  text-align: center;
  background-color: rgba(0,0,0,0);
  margin: 0 1rem;
}

.hosting-grid .box2 p {
  background-color: rgba(0,0,0,0);
  padding: none;
}

.hosting-grid .hosting-box2 {
  margin: 0 1rem;
}

.hosting-box3 {
  border: 3px solid var(--blue);
  text-align: center;
  background-color: rgba(0,0,0,0);
  margin: 1rem;
}