@import url("https://fonts.googleapis.com/css2?family=Arvo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=open_in_new");
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  font-size: 24px;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1.5;
}

a {
  text-decoration: none;
}

/* PrismJS 1.30.0
https://prismjs.com/download#themes=prism-okaidia&languages=markup+css+clike+javascript+markdown+python+regex+scss+sql+typoscript+yaml */
code[class*=language-],
pre[class*=language-] {
  color: #f8f8f2;
  font-size: 0.65rem;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  line-height: 1.1rem;
  white-space: pre;
  text-align: left;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  word-wrap: normal;
  word-break: normal;
  word-spacing: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  background: 0 0;
}

pre[class*=language-] {
  margin: 0.5em 0;
  padding: 1em;
  overflow: auto;
  border-radius: 0.3em;
}

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

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

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
  color: #8292a2;
}

.token.punctuation {
  color: #f8f8f2;
}

.token.namespace {
  opacity: 0.7;
}

.token.constant,
.token.deleted,
.token.property,
.token.symbol,
.token.tag {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
  color: #a6e22e;
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.class-name,
.token.function {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.important,
.token.regex {
  color: #fd971f;
}

.token.bold,
.token.important {
  font-weight: 700;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

:root {
  --bg: #010203;
  --card: #050607;
  --card2: #0a0b0d;
  --text: #e4e5e4;
  --text-muted: #8f8f8f;
  --text-on-color: #ffffff;
  --primary: #387d5a;
  --primary-fg: #ffffff;
  --secondary: #985ab7;
  --secondary-fg: #ffffff;
  --accent: #e9566c;
  --accent-fg: #000000;
  --border: #212222;
  --ring: #5b8d71;
  --good: #2f7164;
  --good-fg: #ffffff;
  --warn: #aa6127;
  --warn-fg: #ffffff;
  --bad: #a0327b;
  --bad-fg: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #dfe7ee;
    --card: #d5dce0;
    --card2: #d0d4d8;
    --text: #111312;
    --text-muted: #4d4f4e;
    --text-on-color: #ffffff;
    --primary: #00613c;
    --primary-fg: #ffffff;
    --secondary: #8e42b1;
    --secondary-fg: #ffffff;
    --accent: #bb003d;
    --accent-fg: #ffffff;
    --border: #bcbfc1;
    --ring: #24966c;
    --good: #006556;
    --good-fg: #ffffff;
    --warn: #b25c00;
    --warn-fg: #030303;
    --bad: #980070;
    --bad-fg: #ffffff;
  }
}
.accent {
  color: var(--accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary);
  font-family: "Arvo", serif;
}

a,
p,
ul,
li {
  color: inherit;
  font-size: 0.75rem;
}

body {
  color: var(--text);
  font-family: "Lato", serif;
  background-color: var(--bg);
}
body .header {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem calc((100vw - 960px) / 2);
}
@media print {
  body .header {
    padding: 1rem 5vw;
  }
}
body .header .logo h1 a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}
body .header .contact {
  text-align: right;
}
body .breadcrumbs {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: start;
  justify-content: start;
  padding: 0rem calc((100vw - 960px) / 2);
}
@media print {
  body .breadcrumbs {
    padding: 0rem 5vw;
  }
}
body .breadcrumbs .breadcrumb {
  color: var(--primary);
  font-size: 0.85rem;
  font-family: "Arvo", serif;
}
body .breadcrumbs .breadcrumb:not(:last-child)::after {
  margin-left: 0.5rem;
  content: ">";
}
body .page-content .profile,
body .page-content .about {
  background-color: var(--primary);
  display: flex;
  flex-direction: row;
  gap: 4rem;
  align-items: center;
  justify-content: space-between;
  padding: 2rem calc((100vw - 960px) / 2);
}
@media print {
  body .page-content .profile,
  body .page-content .about {
    padding: 2rem 5vw;
  }
}
body .page-content .profile img,
body .page-content .about img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
body .page-content .profile p,
body .page-content .about p {
  color: var(--text-on-color);
  text-align: left;
}
body .page-content .work {
  padding: 1rem calc((100vw - 960px) / 2);
}
@media print {
  body .page-content .work {
    padding: 1rem 5vw;
  }
}
body .page-content .work h2 {
  padding-bottom: 1rem;
}
body .page-content .work .job {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: var(--text) 1px solid;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: start;
  justify-content: space-between;
}
body .page-content .work .job .key-points {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}
body .page-content .work .job .info {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: start;
  justify-content: space-between;
}
body .page-content .work .job .info .description {
  width: 70%;
}
body .page-content .work .job .info .description a {
  font-family: var(--primary-font), serif;
  text-decoration: underline;
}
body .page-content .work .job .info .description ul {
  padding-left: 2rem;
}
body .page-content .work .job .info .skills {
  text-align: right;
}
body .page-content .work .job .info .skills ul {
  list-style: none;
}
body .page-content .services,
body .page-content .technologies,
body .page-content .contact-us,
body .page-content .blog {
  padding: 1rem calc((100vw - 960px) / 2);
}
@media print {
  body .page-content .services,
  body .page-content .technologies,
  body .page-content .contact-us,
  body .page-content .blog {
    padding: 1rem 5vw;
  }
}
body .page-content .services h2,
body .page-content .technologies h2,
body .page-content .contact-us h2,
body .page-content .blog h2 {
  padding-bottom: 1rem;
}
body .page-content .services .job,
body .page-content .services .service,
body .page-content .technologies .job,
body .page-content .technologies .service,
body .page-content .contact-us .job,
body .page-content .contact-us .service,
body .page-content .blog .job,
body .page-content .blog .service {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: var(--text) 1px solid;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: start;
  justify-content: space-between;
}
body .page-content .services ul,
body .page-content .technologies ul,
body .page-content .contact-us ul,
body .page-content .blog ul {
  padding-left: 2rem;
}
body .page-content .posts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: start;
  justify-content: space-between;
  padding: 2rem calc((100vw - 960px) / 2);
}
@media print {
  body .page-content .posts {
    padding: 2rem 5vw;
  }
}
body .page-content .posts .post .title {
  padding-bottom: 0.5rem;
}
body .page-content .posts .post .title a {
  font-size: inherit;
}
body .page-content .posts .post .post-date {
  padding-bottom: 0.5rem;
  font-size: 0.65rem;
}
body .post-content {
  padding: 0rem calc((100vw - 960px) / 2);
}
@media print {
  body .post-content {
    padding: 0rem 5vw;
  }
}
body .post-content h1,
body .post-content h2,
body .post-content h3,
body .post-content h4,
body .post-content h5,
body .post-content h6 {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}
body .post-content a {
  text-decoration: underline;
}
body .post-content a[target=_blank] {
  color: var(--accent);
}
body .post-content a[target=_blank]::after {
  font-size: 0.5rem;
  font-family: "Material Symbols Outlined";
  content: "\e89e";
}
body .post-content p {
  padding-bottom: 1rem;
  line-height: 1.5rem;
}