:root {
  --bp-phone-upper-boundary: 37.5rem;
  --bp-tablet-portrait-upper-boundary: 56.25rem;
  --bp-tablet-landscape-upper-boundary: 75rem;
  --bp-desktop-upper-boundary: 112.5rem;
}

:root {
  /* main colors */
  --color-primary: #03A9F4;
  --color-primary-light: #63b8f6;
  --color-primary-dark: #0397da;
  --color-primary-bg: #03a9f433;
  --color-primary-contrast: white;
  --color-accent: #aed581;
  --color-accent-light: #bcdc9b;
  --color-accent-dark: #97b870;
  --color-accent-bg:#aed58133;
  --color-accent-contrast: white;
  --color-body-bg: white;
  --black: #1d1d21;
  --gray-10: #2e2e31;
  --gray-6: #7b7a7d;
  --gray-4: #a5a5a6;
  --gray-3: #bbbbbc;
  --gray-2: #d1d0d2;
  --gray-1: #e8e7e8;
  --white: white;
}

:root {
  /* typography */
  --color-text: var(--gray-10);
  --color-text-heading: var(--black);
  --color-text-subtle: var(--gray-4);
  --color-link: var(--color-primary);
  --color-link-visited: var(--color-primary-dark);
  --color-pills-text: var(--white);
  --color-pills-bg: var(--color-primary-dark);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-text: var(--gray-1);
    --color-text-heading: var(--white);
    --color-text-subtle: var(--gray-3);
    --color-link: var(--color-accent);
    --color-link-visited: var(--color-accent-dark);
    --color-body-bg: var(--black);
    --color-primary-contrast: var(--black);
    --color-accent-contrast: var(--black);
    --color-pills-text: var(--black);
    --color-pills-bg: var(--color-accent-dark);
  }
}
.theme--dark {
  /*// not supported yet, but soon!*/
  --color-text: var(--gray-1);
  --color-text-heading: var(--white);
  --color-text-subtle: var(--gray-3);
  --color-link: var(--color-accent);
  --color-link-visited: var(--color-accent-dark);
  --color-body-bg: var(--black);
  --color-primary-contrast: var(--black);
  --color-accent-contrast: var(--black);
  --color-pills-text: var(--black);
  --color-pills-bg: var(--color-accent-dark);
}

.theme--dark {
  color: var(--gray-1);
  background-color: var(--color-body-bg);
}
.theme--dark h1, .theme--dark h2, .theme--dark h3, .theme--dark h4 {
  color: var(--white);
}
.theme--dark .text--subtle {
  color: var(--gray-4);
}
.theme--dark a {
  color: var(--color-accent);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  background-color: var(--color-body-bg);
  overscroll-behavior: none;
}

html {
  border-block-start: var(--color-primary) 1em solid;
  border-block-end: var(--color-accent) 1em solid;
  min-height: 100vh;
}
@media print {
  html {
    border-block-start-width: 0.5em;
    border-block-end-width: 0.5em;
  }
}

.flow > * + * {
  margin-block-start: var(--flow-gap, 1em);
}

.wrapper, .resume-wrapper {
  padding: 0.75rem;
}
@media (min-width: 56.25rem) {
  .wrapper, .resume-wrapper {
    padding: 1.25rem;
  }
}
@media (min-width: 75rem) {
  .wrapper, .resume-wrapper {
    max-width: var(--bp-tablet-landscape-upper-boundary);
    margin: 0 auto;
  }
}
@media print {
  .wrapper, .resume-wrapper {
    padding: 0;
  }
}

/* ubuntu-regular - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/ubuntu-v19-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("fonts/ubuntu-v19-latin-regular.eot?#iefix") format("embedded-opentype"), url("fonts/ubuntu-v19-latin-regular.woff2") format("woff2"), url("fonts/ubuntu-v19-latin-regular.woff") format("woff"), url("fonts/ubuntu-v19-latin-regular.ttf") format("truetype"), url("fonts/ubuntu-v19-latin-regular.svg#Ubuntu") format("svg"); /* Legacy iOS */
}
/* ubuntu-500 - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/ubuntu-v19-latin-500.eot"); /* IE9 Compat Modes */
  src: local(""), url("fonts/ubuntu-v19-latin-500.eot?#iefix") format("embedded-opentype"), url("fonts/ubuntu-v19-latin-500.woff2") format("woff2"), url("fonts/ubuntu-v19-latin-500.woff") format("woff"), url("fonts/ubuntu-v19-latin-500.ttf") format("truetype"), url("fonts/ubuntu-v19-latin-500.svg#Ubuntu") format("svg"); /* Legacy iOS */
}
/* ubuntu-700 - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/ubuntu-v19-latin-700.eot"); /* IE9 Compat Modes */
  src: local(""), url("fonts/ubuntu-v19-latin-700.eot?#iefix") format("embedded-opentype"), url("fonts/ubuntu-v19-latin-700.woff2") format("woff2"), url("fonts/ubuntu-v19-latin-700.woff") format("woff"), url("fonts/ubuntu-v19-latin-700.ttf") format("truetype"), url("fonts/ubuntu-v19-latin-700.svg#Ubuntu") format("svg"); /* Legacy iOS */
}
:root {
  --font-primary: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
  "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
  sans-serif;
  --font-secondary: serif;
  --font-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
  monospace;
  --text-base-size: 1em;
  --text-scale-ratio: 1.2;
  --text-leading: calc(var(--text-base-size) + var(--text-scale-ratio));
  --text-xs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio)));
  --text-sm: calc(1em / var(--text-scale-ratio));
  --text-md: calc(1em * var(--text-scale-ratio));
  --text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --heading-line-height: 1.2;
  --body-line-height: 1.4;
}

@media (min-width: 37.5rem) {
  :root {
    --text-base-size: 1.25em;
    --text-scale-ratio: 1.25;
  }
}
@media print {
  :root {
    --text-base-size: 12px;
    --text-scale-ratio: 1.125;
  }
}
body {
  font-size: var(--text-base-size);
  font-family: var(--font-primary);
  color: var(--color-text);
  line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, form legend {
  color: var(--color-text-heading);
  margin-block-end: var(--space-xxs);
  margin-block-start: 0.6em;
  line-height: var(--heading-line-height);
  font-weight: 300;
  text-wrap: balance;
}

.text--xxxl {
  font-size: var(--text-xxxl);
}

h1, .text--xxl {
  font-size: var(--text-xxl);
  letter-spacing: -0.1rem;
}

h2, .text--xl {
  font-size: var(--text-xl);
  letter-spacing: -0.1rem;
}

h3, .text--lg {
  font-size: var(--text-lg);
  letter-spacing: -0.1rem;
}

h4, .text--md, last-fm h2, last-fm h3 {
  font-size: var(--text-md);
  letter-spacing: -0.08rem;
}

h5, .text--sm, small, .post__tags, .job-item__description--meta, .tag {
  font-size: var(--text-sm);
  letter-spacing: -0.05rem;
}

h6, .text--xs {
  font-size: var(--text-xs);
  letter-spacing: 0;
}

p {
  line-height: var(--body-line-height);
  max-width: 65ch;
  text-wrap: pretty;
}

a {
  color: var(--color-link);
}
a:hover, a:visited {
  color: var(--color-link-visited);
}

b, strong {
  font-weight: bold;
}

mark {
  padding: 0.1ch 0.25ch;
  background-color: var(--color-primary);
}
@media screen and (prefers-color-scheme: dark) {
  mark {
    background-color: var(--color-accent);
  }
}

u {
  text-decoration-color: var(--color-accent);
}
@media screen and (prefers-color-scheme: dark) {
  u {
    text-decoration-color: var(--color-primary);
  }
}

.text-container h2, .text-container h3, .text-container h4 {
  margin-top: var(--space-sm);
}
.text-container ul, .text-container ol, .text-container p {
  margin-bottom: var(--space-md);
}
.text-container ul, .text-container ol {
  list-style-position: outside;
  padding-left: 24px;
}
.text-container ul {
  list-style-type: disc;
}
.text-container ol {
  list-style-type: decimal;
}
.text-container ul li, .text-container ol li {
  line-height: var(--body-line-height);
}
.text-container em {
  font-style: italic;
}
.text-container u {
  text-decoration: underline;
}

code {
  font-family: var(--font-mono);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svg-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: var(--color-text);
  vertical-align: text-top;
}

blockquote {
  padding-left: 1em;
  border-left: 3px solid var(--color-pills-bg);
}

.tag {
  text-transform: capitalize;
  display: inline-block;
  color: var(--color-pills-text);
  background-color: var(--color-pills-bg);
  min-width: 5ch;
  padding: 0.2em 0.5em;
  border-radius: 0.2rem;
}

a.tag {
  color: var(--color-pills-text);
  text-decoration-color: var(--color-pills-bg);
}

a.tag:hover {
  text-decoration-color: var(--color-pills-text);
}

.cta-button {
  border: 1px solid grey;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  text-align: center;
}

.site-navigation {
  position: sticky;
  top: 0;
  padding: 0.75rem;
  z-index: 99;
  background-color: rgba(var(--color-body-bg), 0.5);
  backdrop-filter: blur(16px);
}
@media print {
  .site-navigation {
    display: none;
  }
}

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.nav__list::-webkit-scrollbar {
  display: none;
}
@media (min-width: 37.5rem) {
  .nav__list {
    justify-content: flex-start;
  }
}

.nav__item {
  margin-inline: 1.5em;
  scroll-snap-align: start;
  flex-shrink: 0;
}

.person-header {
  text-align: right;
}

.page-footer {
  position: sticky;
  bottom: 0;
  background: var(--color-body-bg);
  padding-block-start: 0.25rem;
  z-index: 99;
  border-top: 1px solid var(--color-primary);
}
.page-footer .social-media-list {
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.social-media-list {
  padding-inline-start: 0;
}

.social-media-list > li {
  margin-block-end: 1em;
  list-style-type: none;
}

.social-media-list > li .svg-icon {
  margin-inline-end: 0.6em;
  color: var(--color-text);
}

@media print {
  .social-media-list > li a::after {
    display: inline-block;
    content: attr(href);
    font-size: 0.8em;
    margin-inline-start: 0.5em;
  }
}

@media print {
  .social-media-list > li a {
    text-decoration: none;
    color: var(--color-text);
  }
}

@media print {
  .social-media-list > li a > span {
    display: none;
  }
}

.social-media-list .username {
  display: none;
}
@media (min-width: 56.25rem) {
  .social-media-list .username {
    display: inline;
  }
}

.resume-wrapper .social-media-list .username {
  display: inline;
}

.applications {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: var(--flow-gap, 1em);
}

.application {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: var(--flow-gap, 1em);
  padding: 0.5em 1em;
  border: 1px solid gray;
  border-radius: 0.5em;
}

.job-list__history {
  list-style: none;
  padding: 0;
}

.job-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
@media print {
  .job-item {
    page-break-inside: avoid;
  }
}

.job-item__dates {
  flex-basis: 20%;
  margin-inline-end: 1.5em;
  border-inline-end: 1px var(--color-text-subtle) solid;
  padding-inline-end: 0.6em;
  position: relative;
}
@media print {
  .job-item__dates {
    flex-basis: 15%;
  }
}
.job-item__dates:after {
  --width: 0.4em;
  --position: calc(1em * (1 / var(--body-line-height)));
  content: "";
  position: absolute;
  top: var(--position);
  right: calc(var(--position) * -1 - 1px);
  width: var(--width);
  height: var(--width);
  border-radius: 50%;
  background: var(--color-text);
  transform: translate(-50%, -50%);
  border: 3px solid var(--color-body-bg);
}

.job-item__date {
  white-space: nowrap;
}

.job-item__details {
  flex: 1;
  padding-block-end: 2em;
}
@media print {
  .job-item__details {
    padding-block-end: 1em;
  }
}

.job-item__header, .job-item__info {
  width: 100%;
}

.job-item__header {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-block-end: 1em;
}
@media print {
  .job-item__header {
    margin-block-end: 0.5em;
  }
}
.job-item__header:last-child {
  margin-block-end: 0;
}

.job-item__title {
  flex-basis: 100%;
  margin-block-end: 0.5em;
}

.job-item__location {
  flex-basis: 100%;
  white-space: nowrap;
  display: inline;
}

.location__icon {
  margin-inline-end: 0.3em;
}

.job-item__description--meta {
  display: block;
  color: var(--color-text-subtle);
  font-style: italic;
}

@media (min-width: 37.5rem) {
  .job-item__header {
    flex-direction: row;
  }
  .job-item__title {
    flex-basis: 75%;
    margin-block-end: 0;
    margin-inline-end: 0.3em;
  }
  .job-item__location {
    flex-basis: 25%;
    justify-content: flex-end;
    text-align: right;
  }
}
@media print {
  .job-item__header {
    flex-direction: row;
  }
  .job-item__title {
    flex-basis: 75%;
    margin-block-end: 0;
    margin-inline-end: 0.3em;
  }
  .job-item__location {
    flex-basis: 25%;
    justify-content: flex-end;
    text-align: right;
  }
}
.skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
}

.chat {
  margin-top: 1em;
  display: grid;
  justify-content: start;
}

:root {
  --grid-gap: 1em;
}
@media (min-width: 56.25rem) {
  :root {
    --grid-gap: 2em;
  }
}
@media print {
  :root {
    --grid-gap: 2em;
  }
}

.resume {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

.information {
  grid-area: information;
  display: grid;
  gap: var(--grid-gap);
  align-content: start;
}
@media (min-width: 37.5rem) {
  .information {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
@media (min-width: 56.25rem) {
  .information {
    grid-template-columns: unset;
    grid-template-rows: unset;
  }
}

@media (min-width: 37.5rem) {
  .description {
    grid-row: 1/-1;
  }
}
@media (min-width: 56.25rem) {
  .description {
    grid-row: unset;
  }
}
.description > * + *, .skills > * + * {
  margin-block-start: 1em;
}

.description > p {
  max-width: 50ch;
}

.experience {
  grid-area: experience;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

.job-item__description {
  max-width: 55ch;
}

@media print {
  .resume {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "experience information";
    column-gap: calc(var(--grid-gap) * var(--text-scale-ratio));
  }
  .information {
    grid-template-columns: unset;
    grid-template-rows: unset;
  }
  .lets-chat {
    display: none;
  }
}
@media (min-width: 56.25rem) {
  .resume {
    display: grid;
    grid-template-columns: 5fr 3fr;
    grid-template-areas: "experience information";
  }
}
@media print {
  .education {
    page-break-inside: avoid;
  }
}

.uses {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 1em;
}

.used-item__header {
  text-transform: capitalize;
}

.used-item__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.posts {
  --flow-gap: 2em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.post a {
  text-decoration: none;
}

.post-title {
  max-width: 25ch;
}

.post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
}

.weeks {
  --flow-gap: 5em;
}

.bookmarks {
  --flow-gap: 3em;
}

.bookmark {
  display: flex;
  max-width: unset;
  gap: 2rem;
}

.bookmark_image {
  width: 100px;
  min-height: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  display: none;
}
@media (min-width: 37.5rem) {
  .bookmark_image {
    display: unset;
  }
}

.bookmark .title {
  word-break: break-word;
}

.bookmark-description > p {
  grid-row: 1/-1;
  max-width: 60ch;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--flow-gap, 1em) / 2);
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
}

.timestamps {
  text-align: end;
}

.backlinks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: var(--flow-gap, 1em);
}

.links svg {
  height: 1em;
}

code[class*=language-],
pre[class*=language-] {
  background: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: break-spaces;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}

:not(pre) > code[class*=language-],
pre[class*=language-] {
  background: #f5f5f1;
}

/* Inline code */
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.highlight pre {
  padding: 0.75rem;
}

pre.highlight code {
  display: block;
  width: 100%;
  overflow-wrap: break-word;
  white-space: break-spaces;
}

/*https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css*/
p > code, .highlight pre {
  background-color: #f5f5f1;
}

.highlight .hll {
  background-color: #f5f5f1;
}

.highlight .c {
  color: #999988;
  font-style: italic;
} /* Comment */
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
} /* Error */
.highlight .k {
  color: #000000;
  font-weight: bold;
} /* Keyword */
.highlight .o {
  color: #000000;
  font-weight: bold;
} /* Operator */
.highlight .cm {
  color: #999988;
  font-style: italic;
} /* Comment.Multiline */
.highlight .cp {
  color: #999999;
  font-weight: bold;
  font-style: italic;
} /* Comment.Preproc */
.highlight .c1 {
  color: #999988;
  font-style: italic;
} /* Comment.Single */
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
} /* Comment.Special */
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
} /* Generic.Deleted */
.highlight .ge {
  color: #000000;
  font-style: italic;
} /* Generic.Emph */
.highlight .gr {
  color: #aa0000;
} /* Generic.Error */
.highlight .gh {
  color: #999999;
} /* Generic.Heading */
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
} /* Generic.Inserted */
.highlight .go {
  color: #888888;
} /* Generic.Output */
.highlight .gp {
  color: #555555;
} /* Generic.Prompt */
.highlight .gs {
  font-weight: bold;
} /* Generic.Strong */
.highlight .gu {
  color: #aaaaaa;
} /* Generic.Subheading */
.highlight .gt {
  color: #aa0000;
} /* Generic.Traceback */
.highlight .kc {
  color: #000000;
  font-weight: bold;
} /* Keyword.Constant */
.highlight .kd {
  color: #000000;
  font-weight: bold;
} /* Keyword.Declaration */
.highlight .kn {
  color: #000000;
  font-weight: bold;
} /* Keyword.Namespace */
.highlight .kp {
  color: #000000;
  font-weight: bold;
} /* Keyword.Pseudo */
.highlight .kr {
  color: #000000;
  font-weight: bold;
} /* Keyword.Reserved */
.highlight .kt {
  color: #445588;
  font-weight: bold;
} /* Keyword.Type */
.highlight .m {
  color: #009999;
} /* Literal.Number */
.highlight .s {
  color: #d01040;
} /* Literal.String */
.highlight .na {
  color: #008080;
} /* Name.Attribute */
.highlight .nb {
  color: #0086B3;
} /* Name.Builtin */
.highlight .nc {
  color: #445588;
  font-weight: bold;
} /* Name.Class */
.highlight .no {
  color: #008080;
} /* Name.Constant */
.highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
} /* Name.Decorator */
.highlight .ni {
  color: #800080;
} /* Name.Entity */
.highlight .ne {
  color: #990000;
  font-weight: bold;
} /* Name.Exception */
.highlight .nf {
  color: #990000;
  font-weight: bold;
} /* Name.Function */
.highlight .nl {
  color: #990000;
  font-weight: bold;
} /* Name.Label */
.highlight .nn {
  color: #555555;
} /* Name.Namespace */
.highlight .nt {
  color: #000080;
} /* Name.Tag */
.highlight .nv {
  color: #008080;
} /* Name.Variable */
.highlight .ow {
  color: #000000;
  font-weight: bold;
} /* Operator.Word */
.highlight .w {
  color: #bbbbbb;
} /* Text.Whitespace */
.highlight .mf {
  color: #009999;
} /* Literal.Number.Float */
.highlight .mh {
  color: #009999;
} /* Literal.Number.Hex */
.highlight .mi {
  color: #009999;
} /* Literal.Number.Integer */
.highlight .mo {
  color: #009999;
} /* Literal.Number.Oct */
.highlight .sb {
  color: #d01040;
} /* Literal.String.Backtick */
.highlight .sc {
  color: #d01040;
} /* Literal.String.Char */
.highlight .sd {
  color: #d01040;
} /* Literal.String.Doc */
.highlight .s2 {
  color: #d01040;
} /* Literal.String.Double */
.highlight .se {
  color: #d01040;
} /* Literal.String.Escape */
.highlight .sh {
  color: #d01040;
} /* Literal.String.Heredoc */
.highlight .si {
  color: #d01040;
} /* Literal.String.Interpol */
.highlight .sx {
  color: #d01040;
} /* Literal.String.Other */
.highlight .sr {
  color: #009926;
} /* Literal.String.Regex */
.highlight .s1 {
  color: #d01040;
} /* Literal.String.Single */
.highlight .ss {
  color: #990073;
} /* Literal.String.Symbol */
.highlight .bp {
  color: #999999;
} /* Name.Builtin.Pseudo */
.highlight .vc {
  color: #008080;
} /* Name.Variable.Class */
.highlight .vg {
  color: #008080;
} /* Name.Variable.Global */
.highlight .vi {
  color: #008080;
} /* Name.Variable.Instance */
.highlight .il {
  color: #009999;
} /* Literal.Number.Integer.Long */
@media screen and (prefers-color-scheme: dark) {
  :not(pre) > code[class*=language-],
  pre[class*=language-] {
    background: #272822;
  }
  /*https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css*/
  p > code, .highlight pre {
    background-color: #272822;
  }
  .highlight .hll {
    background-color: #272822;
  }
  .highlight .c {
    color: #75715e;
  }
  /* Comment */
  .highlight .err {
    color: #960050;
    background-color: #1e0010;
  }
  /* Error */
  .highlight .k {
    color: #66d9ef;
  }
  /* Keyword */
  .highlight .l {
    color: #ae81ff;
  }
  /* Literal */
  .highlight .n {
    color: #f8f8f2;
  }
  /* Name */
  .highlight .o {
    color: #f92672;
  }
  /* Operator */
  .highlight .p {
    color: #f8f8f2;
  }
  /* Punctuation */
  .highlight .cm {
    color: #75715e;
  }
  /* Comment.Multiline */
  .highlight .cp {
    color: #75715e;
  }
  /* Comment.Preproc */
  .highlight .c1 {
    color: #75715e;
  }
  /* Comment.Single */
  .highlight .cs {
    color: #75715e;
  }
  /* Comment.Special */
  .highlight .ge {
    font-style: italic;
  }
  /* Generic.Emph */
  .highlight .gs {
    font-weight: bold;
  }
  /* Generic.Strong */
  .highlight .kc {
    color: #66d9ef;
  }
  /* Keyword.Constant */
  .highlight .kd {
    color: #66d9ef;
  }
  /* Keyword.Declaration */
  .highlight .kn {
    color: #f92672;
  }
  /* Keyword.Namespace */
  .highlight .kp {
    color: #66d9ef;
  }
  /* Keyword.Pseudo */
  .highlight .kr {
    color: #66d9ef;
  }
  /* Keyword.Reserved */
  .highlight .kt {
    color: #66d9ef;
  }
  /* Keyword.Type */
  .highlight .ld {
    color: #e6db74;
  }
  /* Literal.Date */
  .highlight .m {
    color: #ae81ff;
  }
  /* Literal.Number */
  .highlight .s {
    color: #e6db74;
  }
  /* Literal.String */
  .highlight .na {
    color: #a6e22e;
  }
  /* Name.Attribute */
  .highlight .nb {
    color: #f8f8f2;
  }
  /* Name.Builtin */
  .highlight .nc {
    color: #a6e22e;
  }
  /* Name.Class */
  .highlight .no {
    color: #66d9ef;
  }
  /* Name.Constant */
  .highlight .nd {
    color: #a6e22e;
  }
  /* Name.Decorator */
  .highlight .ni {
    color: #f8f8f2;
  }
  /* Name.Entity */
  .highlight .ne {
    color: #a6e22e;
  }
  /* Name.Exception */
  .highlight .nf {
    color: #a6e22e;
  }
  /* Name.Function */
  .highlight .nl {
    color: #f8f8f2;
  }
  /* Name.Label */
  .highlight .nn {
    color: #f8f8f2;
  }
  /* Name.Namespace */
  .highlight .nx {
    color: #a6e22e;
  }
  /* Name.Other */
  .highlight .py {
    color: #f8f8f2;
  }
  /* Name.Property */
  .highlight .nt {
    color: #f92672;
  }
  /* Name.Tag */
  .highlight .nv {
    color: #f8f8f2;
  }
  /* Name.Variable */
  .highlight .ow {
    color: #f92672;
  }
  /* Operator.Word */
  .highlight .w {
    color: #f8f8f2;
  }
  /* Text.Whitespace */
  .highlight .mf {
    color: #ae81ff;
  }
  /* Literal.Number.Float */
  .highlight .mh {
    color: #ae81ff;
  }
  /* Literal.Number.Hex */
  .highlight .mi {
    color: #ae81ff;
  }
  /* Literal.Number.Integer */
  .highlight .mo {
    color: #ae81ff;
  }
  /* Literal.Number.Oct */
  .highlight .sb {
    color: #e6db74;
  }
  /* Literal.String.Backtick */
  .highlight .sc {
    color: #e6db74;
  }
  /* Literal.String.Char */
  .highlight .sd {
    color: #e6db74;
  }
  /* Literal.String.Doc */
  .highlight .s2 {
    color: #e6db74;
  }
  /* Literal.String.Double */
  .highlight .se {
    color: #ae81ff;
  }
  /* Literal.String.Escape */
  .highlight .sh {
    color: #e6db74;
  }
  /* Literal.String.Heredoc */
  .highlight .si {
    color: #e6db74;
  }
  /* Literal.String.Interpol */
  .highlight .sx {
    color: #e6db74;
  }
  /* Literal.String.Other */
  .highlight .sr {
    color: #e6db74;
  }
  /* Literal.String.Regex */
  .highlight .s1 {
    color: #e6db74;
  }
  /* Literal.String.Single */
  .highlight .ss {
    color: #e6db74;
  }
  /* Literal.String.Symbol */
  .highlight .bp {
    color: #f8f8f2;
  }
  /* Name.Builtin.Pseudo */
  .highlight .vc {
    color: #f8f8f2;
  }
  /* Name.Variable.Class */
  .highlight .vg {
    color: #f8f8f2;
  }
  /* Name.Variable.Global */
  .highlight .vi {
    color: #f8f8f2;
  }
  /* Name.Variable.Instance */
  .highlight .il {
    color: #ae81ff;
  }
  /* Literal.Number.Integer.Long */
  /* Generic Heading & Diff Header */
  .highlight .gu {
    color: #75715e;
  }
  /* Generic.Subheading & Diff Unified/Comment? */
  .highlight .gd {
    color: #f92672;
  }
  /* Generic.Deleted & Diff Deleted */
  .highlight .gi {
    color: #a6e22e;
  }
  /* Generic.Inserted & Diff Inserted */
}
last-fm {
  display: grid;
  grid-gap: 0.75em;
}

last-fm h2, last-fm h3 {
  margin: 0;
}

last-fm .track {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 1em;
}

last-fm p {
  margin: 0;
}

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