@charset "UTF-8";
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto/Roboto-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Slabo 13px";
  src: url("/fonts/Slabo_13px/Slabo13px-Regular.ttf");
  font-display: swap;
}
html {
  background: rgba(34, 40, 49, 0.9490196078);
  font-weight: normal;
}
html.debug #container > * {
  border: 1px solid blue;
}
html.debug ul.nav.internal {
  border: 1px solid blue;
}
html.loading {
  background-color: #202020;
}
html body {
  margin: 0;
  margin: 0;
  background: #1b2533;
  color: #ECECEC;
  background: radial-gradient(circle at top, #0c447c, #470d0d);
  height: 100%;
}
html body .honey {
  /* clean-css ignore:start */
  background: top url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(25,25,25)' viewBox='0 0 100 169.5'%3E%3Cpolygon points='50,34.75 93.5,59.75 93.5,109.75 50,134.75 6.5,109.75 6.5,59.75'%3E%3C/polygon%3E%3Cpolygon points='0,-50 43.5,-25 43.5,25 0,50 -43.5,25 -43.5,-25'%3E%3C/polygon%3E%3Cpolygon points='100,-50 143.5,-25 143.5,25 100,50 56.5,25 56.5,-25'%3E%3C/polygon%3E%3Cpolygon points='0,119.5 43.5,144.5 43.5,194.5 0,219.5 -43.5,194.5 -43.5,144.5'%3E%3C/polygon%3E%3Cpolygon points='100,119.5 143.5,144.5 143.5,194.5 100,219.5 56.5,194.5 56.5,144.5'%3E%3C/polygon%3E%3C/svg%3E");
  background-size: 10px;
  display: block;
  overflow: hidden;
  /* clean-css ignore:end */
}
html body #container {
  position: relative;
  z-index: 100;
  padding-bottom: 10em;
  padding-top: 3em;
  transition: transform 2s;
}

html .honey-teir1 {
  border-top: 1px solid #1b2533;
  border-bottom: 4px solid #470d0d;
  background: center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='$background' viewBox='0 0 100 169.5'%3E%3Cpolygon points='50,34.75 93.5,59.75 93.5,109.75 50,134.75 6.5,109.75 6.5,59.75'%3E%3C/polygon%3E%3Cpolygon points='0,-50 43.5,-25 43.5,25 0,50 -43.5,25 -43.5,-25'%3E%3C/polygon%3E%3Cpolygon points='100,-50 143.5,-25 143.5,25 100,50 56.5,25 56.5,-25'%3E%3C/polygon%3E%3Cpolygon points='0,119.5 43.5,144.5 43.5,194.5 0,219.5 -43.5,194.5 -43.5,144.5'%3E%3C/polygon%3E%3Cpolygon points='100,119.5 143.5,144.5 143.5,194.5 100,219.5 56.5,194.5 56.5,144.5'%3E%3C/polygon%3E%3C/svg%3E");
  background-size: 9px;
  display: block;
  overflow: auto;
}

html section,
.section,
footer {
  min-height: 30vh;
  border-radius: 5px;
  background: #ccc;
  padding: 0.5em;
  border: 2px solid #2e2a2a;
  border-radius: 3px;
  min-height: 40px;
  margin-bottom: 1em;
  margin: 2em;
  background: rgba(34, 40, 49, 0.9490196078);
}

.section {
  transition: border-color 0.4s 0.3s ease-in, transform 0.4s ease-in;
  border: 2px solid #0c447c;
}

hr {
  border-color: #52473f;
}

h4 {
  margin: 0.4em;
  padding-bottom: 1em;
  text-align: center;
}

#content {
  font-family: "Slabo 13px", serif;
  letter-spacing: 0.3px;
  line-height: 1.3em;
  width: 100vw;
  font-size: 1.2em;
  overflow-x: hidden;
}

@media only screen and (min-width: 900px) {
  #content .contained {
    padding-left: 20%;
    padding-right: 20%;
  }
}
a {
  color: #ECECEC;
}

a span {
  text-decoration: none;
}

ul.items {
  padding: 1em;
}

header {
  background-color: rgba(14, 25, 41, 0.95);
  position: sticky;
  top: 0;
  border-bottom: 2px solid #1561ad;
  z-index: 600;
  margin: 0;
  padding: 3em;
  padding-top: 4.5em;
}
header.category {
  padding: 0;
}

header a.title {
  font-size: 2em;
  font-family: "Source Serif Pro", Serif;
}

header.shared {
  z-index: 100;
}

h1 {
  font-size: 3em;
  margin: 0;
  color: #a7a5b1;
  line-height: 0.9em;
  font-family: "Slabo 13px";
}

h1.author-title {
  font-size: 0.6em;
}

h1.title {
  text-align: center;
  margin: 0 1.5em;
}

h2 {
  line-height: 1.5em;
  padding: 0;
  color: #a7a5b1;
  text-shadow: 1px 1px #202020;
}

h3 {
  color: white;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  font-weight: normal;
}

h4,
.post-full h1.title {
  color: #de6b48;
  font-size: 1.5em;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5 {
  margin-left: 0;
}

ul {
  margin: 0;
  padding: 0px 0px;
}

.nav li,
nav li,
footer li {
  margin: 5px 0;
  list-style-type: none;
}

ul.panels li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #d4d4d4;
}

.warning {
  background-color: rgba(255, 235, 59, 0.53);
  padding: 1em;
  margin: 0;
  border-radius: 0.1em;
}

.hire-notice {
  background-color: rgba(133, 75, 156, 0.9490196078);
  border-bottom: 1px solid black;
  color: white;
  padding: 1em;
  margin: 0;
  border-radius: 0.1em;
  position: absolute;
  z-index: 1010;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1.5;
  overflow: hidden;
  animation: 0.6s ease-in 0s 1 alternate slideDown;
}

html[data-speclate-url="/tags/index.html"] a.tag {
  display: block;
  margin: 1em;
}

html[data-speclate-page=home]:not(.loading) ul.nav li {
  transition: all 0.33333s ease-in;
  animation-iteration-count: infinite;
  animation-name: twitch;
  animation-duration: 25s;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

html[data-speclate-page=home]:not(.loading) ul.nav li .spinner {
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  animation-name: twitch-rev;
  animation-duration: 10s;
}

ul.nav.internal {
  position: relative;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  top: 2.2em;
  flex-wrap: wrap;
  z-index: 400;
  width: 100%;
}

ul.nav.internal li {
  max-width: 4.5em;
  flex-basis: 100%;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  text-align: center;
  margin-bottom: 1em;
}

ul.nav.internal li a {
  font-family: "Slabo 13px", Serif;
  display: inline-block;
  position: relative;
  border: 1px solid #ECECEC;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 3em;
  border-radius: 3em;
  height: 3em;
  width: 3em;
  text-align: center;
}

ul.nav.internal li a .spinner {
  transform-origin: center;
  border-radius: 3em;
  height: 3em;
  width: 3em;
  margin: 0;
  top: 0;
  position: absolute;
  padding: 0;
}

ul.nav.internal li a svg {
  width: 1.5em;
  top: 0.4em;
  position: relative;
}

ul.nav.internal li .spinner:after {
  content: "";
  width: 0;
  position: absolute;
  bottom: -0.5em;
  transform: scale(0.6) translateY(0px);
  left: 1em;
  border-top: 0.5em solid;
  border-color: inherit;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
}

html[data-speclate-page] body ul.nav li a {
  transition: transform 0.5s;
}

html[data-speclate-page=links] ul.nav li:not(.links) a,
html[data-speclate-page=posts] ul.nav li:not(.posts) a,
html[data-speclate-page=tag] ul.nav li:not(.tags) a,
html[data-speclate-page=talks] ul.nav li:not(.talks) a,
html[data-speclate-page=about] ul.nav li:not(.about) a {
  transform: translateY(-5em) scale(0.9);
}

html[data-speclate-page=links] ul.nav li.links a .spinner,
html[data-speclate-page=posts] ul.nav li.posts a .spinner,
html[data-speclate-page=tags] ul.nav li.tags a .spinner,
html[data-speclate-page=talks] ul.nav li.talks a .spinner,
html[data-speclate-page=about] ul.nav li.about a .spinner {
  animation-name: spin;
  animation-timing-function: ease-in;
  animation-iteration-count: once;
  animation-direction: forwards;
  animation-duration: 0.6s;
}

html ul.nav li a.loading {
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

html ul.nav li a.loading .spinner {
  animation-iteration-count: infinite;
  animation-name: spin;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-direction: reverse;
  animation-duration: 1s;
}

html body li.links a {
  border-color: #92B558;
  background: #92B558;
}

html body li.hire a {
  border-color: #8e44ad;
  background: #8e44ad;
}

html[data-speclate-page=hire] section,
html[data-speclate-page=hire] li.section.link {
  border: 2px solid rgba(142, 68, 173, 0.3);
}
html[data-speclate-page=hire] section.visible,
html[data-speclate-page=hire] li.section.link.visible {
  border: 2px solid rgba(142, 68, 173, 0.7);
}

html[data-speclate-page=hire] .tags {
  display: inline-flex;
}

html[data-speclate-page=hire] .tags .tag {
  white-space: nowrap;
  border: 1px solid #8e44ad;
  color: white;
  background: #522764;
}

html[data-speclate-page=hire] ul.nav li.hire a h3 {
  color: #8e44ad;
}

html body li.contact a {
  border-color: #8e44ad;
  background: #8e44ad;
}

html body li.talks a {
  border-color: #d35400;
  background: #d35400;
}

html body li.posts a {
  border-color: #C48F65;
  background: #C48F65;
}

/*load icon*/
.loader {
  transition: opacity 0.2s ease-in 0.5s;
  opacity: 0;
  height: 5px;
  width: 84%;
  position: relative;
  margin: 2%;
  overflow: hidden;
}

html.loading .loader {
  opacity: 1;
  background: #f5f7f4;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f5f7f4 0%, #ffffff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f5f7f4 0%, #ffffff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f5f7f4 0%, #ffffff 100%);
}

html.loading .loader:before {
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 3px;
  animation: loading 2s linear infinite;
  background: #dddddd;
  /* Old browsers */
  background: -moz-linear-gradient(left, #dddddd 0%, #2989d8 50%, #207cca 67%, #dddddd 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #dddddd 0%, #2989d8 50%, #207cca 67%, #dddddd 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #dddddd 0%, #2989d8 50%, #207cca 67%, #dddddd 100%);
}

html #container {
  opacity: 1;
  transition: opacity 1s ease-in 0s;
}

html #container {
  opacity: 1;
  transition: opacity 1s ease-in 0s;
}

html.loading #container {
  opacity: 0;
}

html.loading[data-speclate-url="/index.html"] .loader,
html.loading[data-speclate-url="/"] .loader {
  opacity: 0;
}

.button {
  color: white;
  padding: 0.3em;
  background-color: white;
  color: #1b2533;
  margin: 0 0.5em 0 0;
  line-height: 2.2em;
}

.button:hover {
  color: rgba(34, 40, 49, 0.9490196078);
}

html.loading footer {
  display: none;
}

.simonmcmanus-container {
  position: absolute;
  height: 4em;
  right: 4%;
  z-index: 20000;
  border-radius: 50%;
  top: 3em;
  border: 2px solid #1561ad;
}

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

.panels li {
  border: 0;
  position: relative;
  margin: 1em 4em;
  text-align: center;
  width: 100%;
  transition: all 0.4s;
}
.panels li.visible::after {
  animation: pop-big 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 1s !important;
}

.panels li:nth-child(even) {
  padding-right: 3em;
  animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.33333s;
}

.panels li:nth-child(even):after {
  right: -0.5em;
}

.panels li:nth-child(odd) {
  padding-left: 3em;
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.33333s;
}

.panels li:nth-child(odd):after {
  left: 0;
}

.panels li.garden::after {
  background-image: url("/icons/gardener.png");
  background-size: 100%;
  background-repeat: no-repeat;
  display: block;
  top: -1em;
  content: " ";
  width: 5em;
  height: 5em;
  position: absolute;
}

.panels li.resident::after {
  background-image: url("/icons/loughton.png");
  background-size: 100%;
  background-repeat: no-repeat;
  display: block;
  top: -1em;
  content: " ";
  width: 5em;
  height: 5em;
  position: absolute;
}

.panels li.web::after {
  background-image: url("/icons/web.png");
  background-size: 100%;
  background-repeat: no-repeat;
  display: block;
  top: -1em;
  content: " ";
  width: 5em;
  height: 5em;
  position: absolute;
}

.panels li.organiser::after {
  background-image: url("/icons/events.png");
  background-size: 100%;
  background-repeat: no-repeat;
  display: block;
  top: -1em;
  content: " ";
  width: 5em;
  height: 5em;
  position: absolute;
}

.panels li.lead::after {
  background-image: url("/icons/lead.png");
  background-size: 100%;
  background-repeat: no-repeat;
  display: block;
  top: -1em;
  content: " ";
  width: 5em;
  height: 5em;
  position: absolute;
}

.panels li a {
  padding-top: 4em;
  width: auto;
  border-radius: 4px;
  padding: 1em;
  position: relative;
  display: block;
  background-color: rgba(34, 40, 49, 0.9490196078);
  border: 2px solid black;
}

.link.section {
  transform: scale(0.96);
  margin: 2em 0;
  border-radius: 5px;
  min-height: 40px;
  list-style: none;
  font-size: 1em;
  padding-top: 0.5em;
  border: 1px solid rgba(34, 40, 49, 0.9490196078);
}
.link.section.visible {
  transform: scale(1);
}

.link.section a h5 {
  color: #8e9297;
  margin: 0;
  font-size: 1.3em;
  font-weight: normal;
  margin-bottom: 0.5em;
}

.link.section a h5 .favIcon {
  margin-right: 6px;
  top: 1px;
  position: relative;
}

.link.section a h5 .title {
  color: #d4d4d4;
}

.link.section .created {
  text-align: right;
  font-size: 0.7em;
  color: #cfccd2;
  margin: 0;
  padding: 0;
  height: 2em;
}

.link.section blockquote {
  font-family: "SLABO 13PX";
  margin: 0 1em;
  line-height: 1.5em;
  padding: 0.5em 10px;
  quotes: "“" "”" "‘" "’";
  overflow: hidden;
  font-size: 0.8em;
}

.link.section blockquote p {
  display: inline;
}

.link.section .tags,
ul.tags {
  font-size: 0.8em;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-grow: 3;
  align-items: flex-end;
  flex-flow: row wrap;
  display: flex;
}

.all-tags {
  display: block;
}

.tags span {
  line-height: 4em;
}

.link.section .tag {
  border-radius: 3px;
  padding: 0 10px;
  -webkit-column-break-inside: avoid;
  margin: 5px;
}

.section .tags .tag {
  transition: opacity 0.5s 0.5s;
  opacity: 0.7;
}

.section.visible .tags .tag {
  opacity: 1;
}

html[data-speclate-page=hire] section {
  padding: 1em;
}

html[data-speclate-page=hire] #container li {
  list-style: circle;
  margin-left: 2.5em;
}

html[data-speclate-page=posts] section.post-full {
  border: 3px solid #222;
  margin: 3em 1em;
  padding-top: 1em;
  border-radius: 1em;
}

.post-full hr {
  border: 1px solid #273849;
  margin: 2em;
}

.post-full a {
  text-decoration: underline;
}

.post-full pre {
  background: #1b2533;
  padding: 1em;
}

.post-full .summary {
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-size: 1.2em;
  line-height: 1.8em;
  margin: 1em 0;
}

.post-full .summary p {
  margin: 1em 0;
}

.post-full .summary pre {
  margin: 2em 1em;
  overflow: scroll;
}

.post-full img {
  max-width: 80%;
}

.post-full a.tags {
  margin-top: 1em;
  margin-bottom: 1em;
}

.post-full .tags li {
  background-color: red;
  display: inline-block;
}

.post-full a.tag {
  color: white;
  border-radius: 7px;
  line-height: 2em;
  padding: 0.3em 0.8em;
  margin: 0.5em;
}

.category .summary {
  padding: 1em;
}

html[data-speclate-page=tag] .category-summary h4 {
  text-align: left;
  padding-left: 1em;
}

ul .post_item {
  margin-left: 15px;
}

ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

ul:empty::before {
  content: "- no items - ";
  height: 100px;
  width: 100%;
  display: block;
  text-align: center;
}

footer {
  text-align: center;
}

.recent-heading {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
}
.recent-heading a {
  align-self: flex-end;
  margin: 2em;
}

code {
  font-size: 0.8rem !important;
}

.overlay div {
  width: var(--overlay-w);
  height: var(--overlay-h);
  border-radius: 1em;
  box-shadow: 0 0 0 0.5em var(--body-bg);
}

@keyframes pop {
  from {
    transform: scale(0.7);
  }
  to {
    transform: scale(1);
  }
}
@keyframes pop-big {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  to {
    transform: scale(1);
  }
}
@keyframes swoosh-in {
  from {
    opacity: 0;
  }
  10% {
    transform: scale(0.8);
    filter: blur(15px);
    opacity: 0.6;
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
@keyframes popout {
  from {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}
@-webkit-keyframes popout {
  from {
    -webkit-transform: scale(0);
  }
  80% {
    -webkit-transform: scale(1.2);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@keyframes hide-then-show {
  from {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes switch-on {
  from {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes twitch {
  from {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(6deg);
  }
  50% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-4deg);
  }
  85% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes twitch-rev {
  from {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(4deg);
  }
  90% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes pop-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes slideDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
@-webkit-keyframes bounce-in-bottom {
  0% {
    -webkit-transform: translateY(500px);
    transform: translateY(500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(65px);
    transform: translateY(65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(28px);
    transform: translateY(28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-bottom {
  0% {
    -webkit-transform: translateY(500px);
    transform: translateY(500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(65px);
    transform: translateY(65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(28px);
    transform: translateY(28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes slide-in-blurred-bottom {
  0% {
    transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
    transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-bottom {
  0% {
    transform: translateY(50px) scaleX(0.8);
    filter: blur(5px);
    opacity: 0;
  }
  70% {
    transform: translateY(0) scaleY(1) scaleX(1);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
    transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes blink-1 {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes swing-top-bck {
  0% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  100% {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
@keyframes swing-top-bck {
  0% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  100% {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
@keyframes loading {
  from {
    left: -200px;
    width: 30%;
  }
  50% {
    width: 30%;
  }
  70% {
    width: 70%;
  }
  80% {
    left: 50%;
  }
  95% {
    left: 120%;
  }
  to {
    left: 100%;
  }
}
html.loading footer {
  opacity: 1;
}

html body footer {
  border-top: 1px solid #1b2533;
  overflow-y: hidden;
  position: relative;
  transition: transform 0.3s ease-in-out;
  margin: 0;
  padding-bottom: 3em;
  padding-top: 1em;
  background-color: 191a1c;
  display: flex;
  bottom: 0;
  transform: translateY(0);
  justify-content: center;
}
html body footer ul {
  display: inline-flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 18em;
}
html body footer ul li {
  z-index: 100 !important;
  animation: popout 0.3s ease;
  border-radius: 1.5em;
  height: 1.5em;
  width: 1.5em;
  min-width: 1.5em;
  transition: transform 0.2s ease-in-out;
}
html body footer ul li svg {
  stroke: white;
  transform: scale(0.7);
  position: relative;
  top: -0.4em;
  left: -0.4em;
  transition: transform 0.2s ease-in-out;
}
html body footer ul li a {
  height: 1.5em;
  align-items: center;
}
html body footer ul li a:hover svg {
  transform: scale(1);
}
html body footer ul li a h3 {
  display: none;
}
html body footer li.twitter {
  border-color: #1da1f2;
  background: #1da1f2;
}
html body footer li.github {
  border-color: #c6cbd1;
  background: #c6cbd1;
}
html body footer li.vimeo {
  border-color: #F2552C;
  background: #F2552C;
}
html body footer li.flickr {
  border-color: #ff0084;
  background: #ff0084;
}
html body footer li.youtube {
  border-color: #ff0000;
  background: #ff0000;
}
html body footer li.facebook {
  border-color: #29487d;
  background: #29487d;
}
html body footer li.codepen {
  border-color: #000000;
  background: #000000;
}
html body footer li.codesandbox {
  border-color: #000000;
  background: #000000;
}
html body footer li.linkedin {
  background: #0b66c2;
}
html body footer li.linkedin svg {
  left: -0.24em;
}

html[data-speclate-page=about] section,
html[data-speclate-page=about] li.section.link {
  border: 2px solid rgba(142, 68, 173, 0.3);
}
html[data-speclate-page=about] section.visible,
html[data-speclate-page=about] li.section.link.visible {
  border: 2px solid rgba(142, 68, 173, 0.7);
}

html[data-speclate-page=about] .tags {
  display: inline-flex;
}

html[data-speclate-page=about] .tags .tag {
  white-space: nowrap;
  border: 1px solid #8e44ad;
  color: white;
  background: #522764;
}

html[data-speclate-page=about] ul.nav li.about a h3 {
  color: #8e44ad;
}

html body li.about a {
  border-color: #8e44ad;
  background: #8e44ad;
}

[data-speclate-page=talks] #container ul {
  margin-left: 1em;
}

[data-speclate-page=talks] #container li {
  list-style-type: circle;
  margin-left: 3em;
}

[data-speclate-page=talks] #container .resources li {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 10px;
  background-size: 1em;
  padding-left: 2em;
  margin-left: 1em;
}

[data-speclate-page=talks] #container .resources li.video {
  background-image: url(/client/icons/play.svg);
}

[data-speclate-page=talks] #container .resources li.slides {
  background-image: url(/client/icons/monitor.svg);
}

html[data-speclate-page=talks] section,
html[data-speclate-page=talks] li.section.link {
  border: 1px solid rgba(211, 84, 0, 0.3);
}

html[data-speclate-page=talks] .tags {
  display: inline-flex;
}

html[data-speclate-page=talks] .tags .tag {
  white-space: nowrap;
  border: 1px solid #d35400;
  color: white;
  background: #6d2b00;
}

html[data-speclate-page=talks] ul.nav li.talks a h3 {
  color: #d35400;
}

html[data-speclate-page=tag] #container {
  transform: translateY(-9em);
}

html[data-speclate-page=tag] .posts_holder {
  text-align: center;
}

html[data-speclate-page=tag] header h2 {
  margin: 0;
  padding-top: 2em;
  padding-left: 0.5em;
}

html[data-speclate-page=tag] header .title {
  font-size: 2em;
  z-index: 100;
}

html[data-speclate-page=tag] header.category {
  background-size: cover;
  min-height: 6em;
  max-width: 100%;
  height: auto;
  background-position: bottom;
  object-fit: cover;
  padding: 0;
  font-family: "Headland One", serif;
  position: sticky;
  z-index: 1;
}

html[data-speclate-page=tags] .button {
  white-space: nowrap;
  border: 1px solid rgb(17, 13, 34);
  color: white;
  background: rgb(57, 46, 100);
}

html[data-speclate-page=tags] li.section {
  border: 2px solid rgba(142, 68, 173, 0.3);
}
html[data-speclate-page=tags] li.section.visible {
  border: 2px solid rgba(142, 68, 173, 0.7);
}

html[data-speclate-page=contact] section,
html[data-speclate-page=contact] li.section.link {
  border: 1px solid rgba(142, 68, 173, 0.3);
}

html[data-speclate-page=contact] .tags {
  display: inline-flex;
}

html[data-speclate-page=contact] .tags .tag {
  white-space: nowrap;
  border: 1px solid #8e44ad;
  color: white;
  background: #522764;
}

html[data-speclate-page=contact] ul.nav li.contact a h3 {
  color: #8e44ad;
}

.recent-links .section,
.recent-links .section.link {
  border: 2px solid rgba(146, 181, 88, 0.3);
}
.recent-links .section.visible,
.recent-links .section.link.visible {
  border: 2px solid rgba(146, 181, 88, 0.7);
}

.recent-links .tags {
  display: inline-flex;
}
.recent-links .tags .tag {
  white-space: nowrap;
  border: 1px solid #92B558;
  color: white;
  background: #5b7433;
}

html[data-speclate-page=links] ul.nav li.links a h3 {
  color: #92B558;
}

.recent-posts section,
.recent-posts li.section.link {
  border: 2px solid rgba(196, 143, 101, 0.3);
}
.recent-posts section.visible,
.recent-posts li.section.link.visible {
  border: 2px solid rgba(196, 143, 101, 0.7);
}

.recent-posts .tags,
.post-full .tags {
  display: inline-flex;
}
.recent-posts .button,
.post-full .button {
  white-space: nowrap;
  border: 1px solid #C48F65;
  color: white;
  background: #8d5c36;
}
.recent-posts ul.nav li.posts a h3,
.post-full ul.nav li.posts a h3 {
  color: #C48F65;
}

ul.posts.linear {
  display: flex;
  margin: 0.2em 0;
}
ul.posts.linear a {
  list-style: none;
  width: 50%;
  background-color: #222;
  display: flex;
  flex-direction: column;
  border: 0;
}
ul.posts.linear a.previous {
  border-bottom-left-radius: 0.5em;
}
ul.posts.linear a.next {
  border-bottom-right-radius: 0.5em;
}
ul.posts.linear a .describe {
  font-size: 0.6em;
  margin: 0;
  padding: 0;
  height: 3em;
}
ul.posts.linear a .title {
  margin-top: 0;
  padding-top: 0;
}

/*# sourceMappingURL=style.css.map */