/* Fonts from, Velvetyne foundry */
/* Karrik */
/* http://velvetyne.fr/fonts/karrik */
/* (Please play this game: http://karrik-game.velvetyne.fr) */
@font-face {
  font-family: 'Karrik';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Karrik-Regular.woff");
  src: url('../fonts/Karrik-Regular.woff') format('woff'), url('../fonts/Karrik-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Karrik';
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/Karrik-Italic.woff");
  src: url('../fonts/Karrik-Italic.woff') format('woff'), url('fonts/Karrik-Italic.woff2') format('woff2');
}

/* Fonts from, Velvetyne foundry */
/* Minipax */
/* http://velvetyne.fr/fonts/minipax/ */
@font-face {
  font-family: 'Minipax';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Minipax/Minipax-Regular.eot');
  src: url('../fonts/Minipax-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Minipax-Regular.woff') format('woff'), url('../fonts/Minipax-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Minipax';
  font-style: bold;
  font-weight: 900;
  src: url("../fonts/Minipax-Bold.eot");
  src: url('../fonts/Minipax-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Minipax-Bold.woff') format('woff'), url('../fonts/Minipax-Bold.woff2') format('woff2');
}



/* CSS animations */
@keyframes textflicker {
  from {
    text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
  }
  to {
    text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
  }
}
@keyframes glitch-1 {
  0% {
    clip: rect(132px, 350px, 101px, 30px);
  }
  5% {
    clip: rect(17px, 350px, 94px, 30px);
  }
  10% {
    clip: rect(40px, 350px, 66px, 30px);
  }
  15% {
    clip: rect(87px, 350px, 82px, 30px);
  }
  20% {
    clip: rect(137px, 350px, 61px, 30px);
  }
  25% {
    clip: rect(34px, 350px, 14px, 30px);
  }
  30% {
    clip: rect(133px, 350px, 74px, 30px);
  }
  35% {
    clip: rect(76px, 350px, 107px, 30px);
  }
  40% {
    clip: rect(59px, 350px, 130px, 30px);
  }
  45% {
    clip: rect(29px, 350px, 84px, 30px);
  }
  50% {
    clip: rect(22px, 350px, 67px, 30px);
  }
  55% {
    clip: rect(67px, 350px, 62px, 30px);
  }
  60% {
    clip: rect(10px, 350px, 105px, 30px);
  }
  65% {
    clip: rect(78px, 350px, 115px, 30px);
  }
  70% {
    clip: rect(105px, 350px, 13px, 30px);
  }
  75% {
    clip: rect(15px, 350px, 75px, 30px);
  }
  80% {
    clip: rect(66px, 350px, 39px, 30px);
  }
  85% {
    clip: rect(133px, 350px, 73px, 30px);
  }
  90% {
    clip: rect(36px, 350px, 128px, 30px);
  }
  95% {
    clip: rect(68px, 350px, 103px, 30px);
  }
  100% {
    clip: rect(14px, 350px, 100px, 30px);
  }
}
@keyframes glitch-2 {
  0% {
    clip: rect(129px, 350px, 36px, 30px);
  }
  5% {
    clip: rect(36px, 350px, 4px, 30px);
  }
  10% {
    clip: rect(85px, 350px, 66px, 30px);
  }
  15% {
    clip: rect(91px, 350px, 91px, 30px);
  }
  20% {
    clip: rect(148px, 350px, 138px, 30px);
  }
  25% {
    clip: rect(38px, 350px, 122px, 30px);
  }
  30% {
    clip: rect(69px, 350px, 54px, 30px);
  }
  35% {
    clip: rect(98px, 350px, 71px, 30px);
  }
  40% {
    clip: rect(146px, 350px, 34px, 30px);
  }
  45% {
    clip: rect(134px, 350px, 43px, 30px);
  }
  50% {
    clip: rect(102px, 350px, 80px, 30px);
  }
  55% {
    clip: rect(119px, 350px, 44px, 30px);
  }
  60% {
    clip: rect(106px, 350px, 99px, 30px);
  }
  65% {
    clip: rect(141px, 350px, 74px, 30px);
  }
  70% {
    clip: rect(20px, 350px, 78px, 30px);
  }
  75% {
    clip: rect(133px, 350px, 79px, 30px);
  }
  80% {
    clip: rect(78px, 350px, 52px, 30px);
  }
  85% {
    clip: rect(35px, 350px, 39px, 30px);
  }
  90% {
    clip: rect(67px, 350px, 70px, 30px);
  }
  95% {
    clip: rect(71px, 350px, 103px, 30px);
  }
  100% {
    clip: rect(83px, 350px, 40px, 30px);
  }
}



/* Whole page flickers, then headings flicker a bit longer*/
body.calligraphic {
    animation-duration: 0.01s;
    animation-name: textflicker;
    animation-delay: 0s;
    animation-iteration-count: 100;
    animation-direction: alternate;      
}
.calligraphic h1, .calligraphic h2, .calligraphic h3, 
.calligraphic nav.front-nav,
.calligraphic nav.head-nav,
.calligraphic footer.site-footer
 {
    animation-duration: 0.01s;
    animation-name: textflicker;
    animation-delay: 0s;
    animation-iteration-count: 500;
    animation-direction: alternate;    
}




/* main elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  background-color: #333000;
  color: #FFF;
}
body {
  margin-bottom: 5rem;
  max-width: 1684px;
  font-family: Minipax, Garamond, serif;
  font-size: 1em;
  letter-spacing: 1.5px;
}

/* Base background image across site. Overrise in frontmatter */
html {
  background-image: url('/WorkSpace/images/side blur robot-2301646_1920.jpg');
  background-repeat: no-repeat;
  background-position: top 0px left 0px;
  background-attachment: fixed; 
  background-size: cover;
  background-blend-mode: color-dodge;
}




/* Flexbox styles for layout */

body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100vh; /* Make the body take up the full viewport height */
  margin: 0;
}

.flex-container {
  flex: 1; /* Make the main content area grow to fill available space */
  display: flex;
  flex-direction: column;
}

main, .container {
  padding: 2em;
}

.front footer.site-footer {
  align-self: flex-start;
  text-align: left;
}








a {
    color: #ccc;
    border-bottom: none;
    transition: .5s ease;
}
h1, h2, h3 {
    margin-bottom: .5em;
    font-family: Karrik, Arial, sans-serif;
    opacity: 0.6;
}
h1 {
    font-size: 2em;
}
.front h1 {
    font-size: 4em;
}
article h2 {
  margin-top: 1em;
}
h3 {
    font-size: 1.17em;
}
h3.home {
    opacity: 1.0;
}
article p {
  margin-top: 0.5em;
}
article > p:first-child {
  margin-top: 0;
}

/* Site navs */
header {
    padding: 3em 0 1em;
}
footer > *+*, .site-nav > *+* {
    margin-left: 0;
}


nav.front-nav,
nav.head-nav,
nav.site-nav,
footer.site-footer,
nav.content-nav {
    font-family: Karrik, Arial, sans-serif;
    color: rgba(255, 255, 255);
    text-align: center;
    font-size: 1.1rem;
    align-self: center;
}

nav.content-nav {
    margin-top: 2rem;
}
nav.site-nav {
    margin-top: 0.8rem;
}
nav.head-nav {
    text-align: left;
    opacity: 0.6;
}
nav.section-nav {
    margin-top: 0.8rem;
}

footer.site-footer {
    font-size: 0.9rem;
    opacity: 0.6;
    line-height: 1rem;
}
footer.site-footer h3 {
    font-size: 1.1rem;
    margin-top: 1em;
    margin-bottom: 1.5em;
}
footer.site-footer a {
    text-decoration: none;
}

.front nav.big-link a {
    font-family: Karrik, Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.5em;
    text-decoration: none;
}
.front nav.big-link a:hover {
    text-decoration: underline;
}

/* various hyperlinks */
.front p a {
    border-bottom: 0;
}

article a.readmore,
p a {
    font-style: italic;
    text-decoration: underline;
    border-bottom: 0;
}
article a.readmore {
    float: right;
}
body.list article {
  font-size: 0.8em;
  columns: 2;
  max-width: 700px;
}
/* Media queries for responsiveness */
@media (max-width: 700px) {
    body.list article {
        columns: 1;
    }
}
body.single article {
  max-width: 600px;
}

/* other */
blockquote {
    margin: 0 0 2rem;
    color: #6f4107;
}
figure,
figure img,
figure figcaption {
    display: flex;
    justify-content: center;
    margin-top: auto;
}
hr {
    margin: 2rem auto 1rem auto;
    width: 50%;
    border-style: solid;
    border-width: 1px;
    opacity: 0.3;
}
strong {
    color: #d0cda9;    
}
article blockquote {
    background-color: #ccc;
    color: #333000;
    padding: 2rem;
    margin: 2rem 1rem;
    border-radius: 3px;
}
article blockquote a {
    color: black;
}
article blockquote strong {
    color: #6d6000;
}
article li {
    line-height: 2;
    padding-left: 0.4em;
}
ol {
    list-style: decimal outside;
    padding-left: 1em;
    margin-left: 1.5em;
}
ol li {
    color: #d0cda9;
}
ol li::marker {
    content: counter(list-item) " →";
    font-family: Karrik, Arial, sans-serif;
}
ul {
    list-style: none;
    margin-left: 0.5em;
}
ul li {
    color: #d0cda9;
}
ul li span {
    width: 80px;
}
ul li span::after {
    content: " →";
    font-family: Karrik, Arial, sans-serif;
}