:root {
  --c-accent: #FF530D;
  --c-accent-alt: #FF9132;
  --c-light: #EFEFEF;
  --c-light-gray: #DDD;
  --c-light-blue: #BDD4DE;
  --c-med-blue: #3F5765;
  --c-dark-blue: #2B3A42;
}

h1,h2,h3,p,ul,li {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: inside
}

strong {
    font-weight: 500;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  background: var(--c-light);
  font-family: 'Work Sans', sans-serif;
}

a,a:visited {
  color: var(--c-med-blue);
}

h1,h2,h3 {
  color: var(--c-dark-blue);
}


body > header {
  background: linear-gradient(to left, var(--c-accent-alt), var(--c-accent), var(--c-accent-alt));
}

body > header h1 {
  padding-top: 20px;
  color: white;
  font-weight: 800;
  font-size: 3rem;
  text-align: center;
}
body > header h2 {
  color: var(--c-light);
  font-weight: 300;
  font-size: 1.2rem;
  text-align: center;
}

body > header .mast {
  text-decoration: none;
  display: block;
  padding-bottom: 16px;
}

body > header nav {
  background-color: var(--c-med-blue);
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/*body > header > nav .logo {*/
  /*display: none;*/

  /*position: fixed;*/
  /*left: 35px;*/

  /*border: 1px solid white;*/
  /*border-radius: 50%;*/
  /*padding: 8px;*/
  /*background-color: var(--c-accent);*/
  /*color: white;*/
  /*font-weight: 900;*/
/*}*/

body > header > nav {
  height: 20px;
}

body > header.scrolled > nav {
  height: 37px;
  transition: height 0.2s;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
}

/*body > header.scrolled > nav .logo {*/
  /*display: inherit;*/
/*}*/

body > header.scrolled > nav .home {
  display: none;
}

body > header.scrolled {
  padding-bottom: 40px;
}

body > header > nav ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

body > header > nav li {
  display: inline-block;
  margin: 0 5px;
}
@media only screen  and (min-width : 801px) {
  body > header > nav li {
    margin: 0 20px;
  }
}

body > header > nav li > a:visited {
  color: var(--c-light);
}
body > header > nav li > a {
  color: var(--c-light);
  text-decoration: none;
}

body > header > nav .contact a {
  padding: 3px;
  background-color: var(--c-med-blue);
  border: 2px solid var(--c-light-gray);
}

body > main > * > header {
  margin: 30px 0;
}

body > main > * > header > h1 {
  color: var(--c-med-blue);
  font-size: 4rem;
  font-style: italic;
  font-weight: 200;
  text-align: center;
}

@media only screen  and (min-width : 801px) {
  body > main > * > header > h1 {
    font-size: 5rem;
  }
}

body > main .posts-list > .post-listing {
    margin-bottom: 30px;
}

body > main .posts-list > .post-listing > .date {
  font-weight: 100;
  font-style: italic;
}

body > main .posts-list > .post-listing > h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

body > main {
  margin: 0 auto;
  max-width: 800px;
}

body > main > article {
  margin: 0 2rem 5rem 2rem;

  display: flex;
  flex-direction: column;
}

body > main > article p,ul {
  margin: 10px 0;
  font-weight: 300;
  font-size: 15pt;
  line-height: 1.3;
}

@media only screen  and (max-width : 425px) {
  body > main > article p {
    font-size: 13pt;
  }
}

body > main > article > h1 {
  font-size: 2.5rem;
  margin-top: 3.5rem;
  margin-bottom: 1rem;
}

body > main > article > h2 {
  font-size: 2rem;
  margin-top: 2.5rem;
}

body > main > article > h3 {
  margin-top: 1.5rem;
  font-size: 1.7rem;
}


body > main > article.post > header {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 60px;

  padding-bottom: 15px;
  border-bottom: 1px dashed var(--c-light-blue);
}

body > main > article.post > header > h1 {
  text-align: center;
  color: var(--c-med-blue);
  font-size: 9vw;
  font-style: normal;
  font-weight: 800;
}

body > main > article.post > header > h2 {
    text-align: center;
    color: var(--c-med-blue);
    font-size: 5vw;
    font-style: normal;
    font-weight: 200;
}

@media only screen  and (min-width : 801px) {
  body > main > article.post > header > h1 {
    font-size: 4rem;
  }

  body > main > article.post > header > h2 {
      font-size: 2.5rem;
  }
}

body > main > article.post > header .date {
  text-align: center;
  font-weight: 100;
  font-style: italic;
}

body > main > article.post > p > code {
  background: #fff;
  border: 1px solid var(--c-light-gray);
  border-radius: 0.4em;
  padding: 0 0.3em;
}

body > main > article.post img.jekyll-img {
  display: block;
  margin: 0 auto;
  max-width: 90%;
}


figure.diagram {
  display: inline-flex;
  flex-direction: column;
  background-color: white;
  margin: 30px 5px;
  box-shadow: 2px 2px 16px 0px rgba(0,0,0,0.31);
}
figure.diagram > figcaption {
  background-color: var(--c-light-blue);
  padding: 0.6rem 0.3rem;
  font-style: italic;
}
figure.diagram > img {
  margin: 10px;
  max-width: 100%;
  max-height: 50vh;
  object-fit: contain;
}

figure.code {
  display: inline-flex;
  flex-direction: column;
  
  background-color: var(--c-light-blue);

  margin: 10px 0;
  min-width: 300px;
  max-width: 100%;

  overflow: auto;

  box-shadow: 2px 2px 16px 0px rgba(0,0,0,0.31);
}
figure.code pre {
  margin: 0; 
  padding: 10px;
  font-size: 10pt;
}
figure.code > figcaption {
  padding: 0.6rem 0.3rem;
  font-style: italic;
}

figure figcaption h4 { /* hugo's figure shortcode puts the title in as an h4 */
  margin: 0;
  padding: 0.3rem;
  font-size: 12pt;
  font-style: italic;
  font-weight: normal;
}

/*article.about .pete-rait {*/
  /*margin: 0 auto;*/
  /*margin-bottom: 30px;*/
  /*display: block;*/
  /*max-width: 100%;*/
/*}*/

article > p > img {
  margin: 0 auto;
  display: block;
  max-width: 100%;
}


.pullquote-container .pullquote {
  padding: 0;
  float: right;
  width: 45%;
  margin: .5em 0 1em 1.5em;
  position: relative;
  top: 7px;
  font-size: 1.1em;
  font-style: italic;
  color: var(--c-med-blue);
  line-height: 1.45em
}

.pullquote-container .pullquote:before {
  content: '\201C';
  position: absolute;
  top: 0.25em;
  left: -0.15em;
  color: var(--c-light-blue);
  font-size: 6em;
  font-style: normal;
  z-index: -1;
}

@media only screen  and (max-width : 800px) {
  .pullquote-container .pullquote {
    display: none;
  }
}


.contact-form {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.contact-form input {
  flex-grow: 1;
  font-size: 2rem;
  margin: 0.1em;
  padding: 0.2em 0.5em;
  display: inline-block;
}

.contact-form textarea {
  width: 100%;
  font-size: 2rem;
  margin: 0.1em;
  padding: 0.2em 0.5em;
}

.contact-form button {
  width: 100%;
  margin: 0.1em 0.1em;
  font-size: 3rem;
  padding: 0.3em 0;
  background-color: var(--c-accent);
  color: white;
  font-weight: 100;
}

textarea, input, button {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  color: inherit;
  outline: none;
  border: none;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  box-shadow: none;
}



.reference-quote {
  font-style: italic;
  font-size: 1.1em;
  quotes: "“" "”" "‘" "’";
  margin-bottom: 1em;
  text-align: right;
}

.reference-quote:before {
    content: open-quote;
}
.reference-quote:after {
    content: close-quote;
}

.reference-logos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;

  margin: 30px 0 10px 0;
}

.reference-logos > img {
  max-width: 120px;
  padding: 0 10px;
}

.social-ctas {
  align-self: flex-end;
}

@media only screen  and (max-width : 800px) {
  .social-ctas {
    align-self: inherit;
  }
}

/* courtesy https://codepen.io/miyano/pen/oMREdZ */
.mastodon-follow-button{
  display:inline-block;
  background-color:#282c37;
  color:#d9e1e8 !important;
  text-decoration:none;
  padding:4px 10px 4px 30px;
  border-radius:4px;
  font-size:16px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2261.076954mm%22%20height%3D%2265.47831mm%22%20viewBox%3D%220%200%20216.4144%20232.00976%22%3E%3Cpath%20d%3D%22M211.80734%20139.0875c-3.18125%2016.36625-28.4925%2034.2775-57.5625%2037.74875-15.15875%201.80875-30.08375%203.47125-45.99875%202.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125%200%202.53375.15625%204.94625.46875%207.2025%203.38375%2025.68625%2025.47%2027.225%2046.39125%2027.9425%2021.11625.7225%2039.91875-5.20625%2039.91875-5.20625l.8675%2019.09s-14.77%207.93125-41.08125%209.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234%20213.82%201.40609%20165.31125.20859%20116.09125c-.365-14.61375-.14-28.39375-.14-39.91875%200-50.33%2032.97625-65.0825%2032.97625-65.0825C49.67234%203.45375%2078.20359.2425%20107.86484%200h.72875c29.66125.2425%2058.21125%203.45375%2074.8375%2011.09%200%200%2032.975%2014.7525%2032.975%2065.0825%200%200%20.41375%2037.13375-4.59875%2062.915%22%20fill%3D%22%233088d4%22%2F%3E%3Cpath%20d%3D%22M177.50984%2080.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025%200-17.4175%207.5075-17.4175%2022.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375%200-15.74%206.32875-15.74%2018.7975v59.15H38.90484V80.077c0-12.455%203.17125-22.3525%209.54125-29.675%206.56875-7.3225%2015.17125-11.07625%2025.85-11.07625%2012.355%200%2021.71125%204.74875%2027.8975%2014.2475l6.01375%2010.08125%206.015-10.08125c6.185-9.49875%2015.54125-14.2475%2027.8975-14.2475%2010.6775%200%2019.28%203.75375%2025.85%2011.07625%206.36875%207.3225%209.54%2017.22%209.54%2029.675%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
  background-size:16px;
  background-repeat:no-repeat;
  background-position:top 50% left 8px;
  transition:all 0.5s;
}
.mastodon-follow-button:hover{
  background-color:#535863;
}

.mailing-list-signup {
    margin: 20px 0;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.mailing-list-signup .formkit-powered-by-convertkit-container {
    display: none;
}


table {
  margin-top: 20px;
  margin-bottom: 20px;
  border-collapse: collapse;
}

thead {
  background-color: var(--c-light-blue);
}

td, th {
  border: 1px solid #999;
  padding: 10px 5px;
  text-align: left;
}

blockquote {
  font-style: italic;
}

.footnotes ol {
    margin-left: 2rem;
    padding: 0;
}

.footnotes li > p {
    display: inline-block;
}