@import url(../fonts/geist/stylesheet.css);
@import url(../fonts/geist_mono/stylesheet.css);
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap");
:root {
  --black: rgb(4, 5, 6);
  --white: rgb(255, 255, 255);
  --off-white: rgb(242, 242, 242);
  --dark-05: rgb(250, 250, 250);
  --dark-10: rgb(244, 244, 245);
  --dark-20: rgb(228, 228, 231);
  --dark-30: rgb(212, 212, 216);
  --dark-40: rgb(161, 161, 170);
  --dark-50: rgb(113, 113, 122);
  --dark-60: rgb(82, 82, 91);
  --dark-70: rgb(63, 63, 70);
  --dark-80: rgb(39, 39, 42);
  --dark-90: rgb(24, 24, 27);
  --dark-95: rgb(9, 9, 11);
  --code-bg: rgb(64, 64, 64);
  --code-hi: rgb(113, 196, 255);
  --photo-text: rgb(250, 204, 21);
}

html.light {
  --bg-color: var(--white);
  --fg-color: var(--black);
  --fg-body: var(--dark-70);
  --accent: var(--dark-05);
  --border: var(--dark-20);
  --dotted-bg: radial-gradient(rgb(205, 205, 205) 5%, var(--bg-color) 5%);
}
html.dark {
  --bg-color: var(--dark-90);
  --fg-color: var(--dark-30);
  --fg-body: var(--dark-30);
  --accent: var(--dark-80);
  --border: var(--dark-80);
  --dotted-bg: radial-gradient(rgb(50, 50, 50) 5%, var(--bg-color) 5%);
}

:root {
  --font-sans: "Geist Sans", sans-serif;
  --font-familjen: "Familjen Grotesk", sans-serif;
  --font-serif: "Newsreader", serif;
  --font-mono: "Geist Mono", monospace;
  --heading-font: var(--font-sans);
  --body-font: var(--font-sans);
  --link-font: var(--font-sans);
  --mono-font: var(--font-mono);
  --font-features: "calt" 1, "dlig" 1, "cv11" 1, "cv12" 1, "cv13" 1 !important;
  --line-height-xl: 79px;
  --line-height-lg: 45px;
  --line-height-md: 24px;
  --tracking-zero: 0px;
  --tracking-tightest: -1.75px;
  --tracking-tighter: -0.5px;
  --tracking-tight: -0.5px;
  --font-xxl: 70px;
  --font-xl: 34px;
  --font-lg: 26px;
  --font-md: 20px;
  --font-smm: 1rem;
  --font-base: 0.9rem;
  --font-sm: 0.87rem;
  --font-xs: 0.82rem;
  --font-xxs: 0.78rem;
  --font-xxxs: 0.7rem;
  --font-bold: 700;
  --font-semibold: 600;
  --font-normal: 400;
  --font-normal-var: 400;
  --font-medium: 500;
  --font-light: 300;
  --font-margin-normal: 20px;
}

* {
  font-feature-settings: var(--font-features);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  font-weight: var(--font-bold);
  color: var(--fg-color);
  padding-right: 2px;
  padding-bottom: 2px;
}

strong {
  font-family: var(--font-sans);
  font-weight: var(--font-normal);
}

h1 {
  font-size: var(--font-xxl);
  line-height: var(--line-height-xl);
  letter-spacing: var(--tracking-tightest);
  margin-bottom: 25px;
}
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-xl);
    line-height: calc(var(--line-height-xl) - 35px);
    letter-spacing: calc(var(--tracking-tightest) + 2px);
  }
}

h2 {
  font-family: var(--heading-font);
  font-size: var(--font-lg);
  font-weight: var(--font-bold);
  line-height: var(--line-height-lg);
  letter-spacing: var(--tracking-tighter);
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  h2 {
    font-size: var(--font-md);
    line-height: calc(var(--line-height-lg) - 5px);
  }
}

p,
span {
  font-size: var(--font-base);
  font-family: var(--body-font);
  font-weight: var(--font-normal);
  line-height: var(--line-height-md);
  margin: 0 0 var(--font-margin-normal) 0;
  letter-spacing: var(--tracking-zero);
  color: var(--fg-body);
  font-feature-settings: var(--font-features);
}
p strong,
span strong {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
}
p a,
span a {
  font-size: var(--font-base);
  font-family: var(--body-font);
  font-weight: var(--font-normal);
  color: var(--dark-50);
  letter-spacing: var(--tracking-zero);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-style: dashed;
}
p code,
span code {
  background-color: var(--code-bg);
  color: var(--code-hi);
  padding: 0 5px;
  border-radius: 3.5px;
}
p.coming-soon,
span.coming-soon {
  padding: 10px 0;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  p,
  span {
    font-size: calc(var(--font-sm) - 0.05rem);
  }
  p a,
  span a {
    font-size: --font-xs;
  }
}

li {
  font-size: var(--font-sm);
  font-family: var(--body-font);
  font-weight: var(--font-normal);
  line-height: var(--line-height-md);
  letter-spacing: var(--tracking-zero);
  color: var(--fg-body);
}
li strong {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
}
li.coming-soon {
  padding: 10px 0;
  margin-bottom: 0;
}
li code {
  background-color: var(--code-bg);
  color: var(--code-hi);
  padding: 0 5px;
  border-radius: 3.5px;
}

a,
small {
  font-size: var(--font-xs);
  font-family: var(--link-font);
  font-weight: var(--font-normal);
  letter-spacing: var(--tracking-zero);
  text-decoration: none;
  color: var(--dark-50);
}
a.button,
small.button {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  min-width: 100px;
  width: fit-content;
  padding: 10px 20px;
  margin: 10px 0;
  text-decoration: none;
  background: var(--bg-color);
  color: var(--fg-body);
  font-weight: var(--font-medium);
  border-radius: 10px;
  box-shadow: 0px 0px 0px 2px var(--button-border);
}
a.button:before,
small.button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 110%;
  height: 110%;
  left: -5%;
  top: -5%;
  background: var(--border-bg);
  border-radius: 10px;
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
a.button:after,
small.button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  border-radius: 10px;
  opacity: 1;
  transition: opacity 0.4s ease;
}
a.button:hover:before,
small.button:hover:before {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}
@media (max-width: 768px) {
  a,
  small {
    font-size: calc(var(--font-xs) - 0.08rem);
  }
}

small {
  font-size: var(--font-xxs);
  font-family: var(--link-font);
  font-weight: var(--font-normal);
  letter-spacing: var(--tracking-zero);
  text-decoration: none;
  color: var(--fg-body);
}
small a {
  font-size: var(--font-xxs);
  color: var(--dark-50);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-style: dashed;
}

figure {
  width: auto;
}

.italics {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.dashed {
  text-decoration: underline !important;
  text-decoration-style: dashed !important;
  text-underline-offset: 3px;
}

pre,
code,
.code,
.gutter .gl {
  font-family: var(--mono-font);
  font-size: var(--font-xxs) !important;
  font-weight: var(--font-normal);
  font-feature-settings: "calt" on !important;
}
@media (max-width: 480px) {
  pre,
  code,
  .code,
  .gutter .gl {
    font-size: var(--font-xxs) !important;
  }
}
pre span,
code span,
.code span,
.gutter .gl span {
  font-family: var(--mono-font);
  font-size: var(--font-xxs) !important;
  line-height: 18px;
  font-weight: var(--font-normal);
}
@media (max-width: 480px) {
  pre span,
  code span,
  .code span,
  .gutter .gl span {
    font-size: var(--font-xxs) !important;
  }
}

/* --------------------- */
.highlight .hll {
  background-color: #404040;
}

pre.highlight {
  overflow-x: hidden;
  overflow-x: scroll;
}

.highlight {
  background: #202020;
  color: #d0d0d0;
  width: 100%;
  padding: 5px 5px;
  border-radius: 10px;
  margin: 15px 0;
  overflow-x: hidden;
}
.highlight::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1024px) {
  .highlight::-webkit-scrollbar {
    display: none;
  }
}
.highlight__left {
  margin-left: 0 !important;
}

.highlight .c {
  color: #999999;
  font-style: italic;
} /* Comment */
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
} /* Error */
.highlight .esc {
  color: #d0d0d0;
} /* Escape */
.highlight .g {
  color: #d0d0d0;
} /* Generic */
.highlight .k {
  color: #6ab825;
  font-weight: bold;
} /* Keyword */
.highlight .l {
  color: #d0d0d0;
} /* Literal */
.highlight .n {
  color: #d0d0d0;
} /* Name */
.highlight .o {
  color: #d0d0d0;
} /* Operator */
.highlight .x {
  color: #d0d0d0;
} /* Other */
.highlight .p {
  color: #d0d0d0;
} /* Punctuation */
.highlight .ch {
  color: #999999;
  font-style: italic;
} /* Comment.Hashbang */
.highlight .cm {
  color: #999999;
  font-style: italic;
} /* Comment.Multiline */
.highlight .cp {
  color: #cd2828;
  font-weight: bold;
} /* Comment.Preproc */
.highlight .cpf {
  color: #999999;
  font-style: italic;
} /* Comment.PreprocFile */
.highlight .c1 {
  color: #999999;
  font-style: italic;
} /* Comment.Single */
.highlight .cs {
  color: #e50808;
  font-weight: bold;
  background-color: #520000;
} /* Comment.Special */
.highlight .gd {
  color: #d22323;
} /* Generic.Deleted */
.highlight .ge {
  color: #d0d0d0;
  font-style: italic;
} /* Generic.Emph */
.highlight .gr {
  color: #d22323;
} /* Generic.Error */
.highlight .gh {
  color: #ffffff;
  font-weight: bold;
} /* Generic.Heading */
.highlight .gi {
  color: #589819;
} /* Generic.Inserted */
.highlight .go {
  color: #cccccc;
} /* Generic.Output */
.highlight .gp {
  color: #aaaaaa;
} /* Generic.Prompt */
.highlight .gs {
  color: #d0d0d0;
  font-weight: bold;
} /* Generic.Strong */
.highlight .gu {
  color: #ffffff;
  text-decoration: underline;
} /* Generic.Subheading */
.highlight .gt {
  color: #d22323;
} /* Generic.Traceback */
.highlight .kc {
  color: #6ab825;
  font-weight: bold;
} /* Keyword.Constant */
.highlight .kd {
  color: #6ab825;
  font-weight: bold;
} /* Keyword.Declaration */
.highlight .kn {
  color: #6ab825;
  font-weight: bold;
} /* Keyword.Namespace */
.highlight .kp {
  color: #6ab825;
} /* Keyword.Pseudo */
.highlight .kr {
  color: #6ab825;
  font-weight: bold;
} /* Keyword.Reserved */
.highlight .kt {
  color: #6ab825;
  font-weight: bold;
} /* Keyword.Type */
.highlight .ld {
  color: #d0d0d0;
} /* Literal.Date */
.highlight .m {
  color: #3677a9;
} /* Literal.Number */
.highlight .s {
  color: #ed9d13;
} /* Literal.String */
.highlight .na {
  color: #bbbbbb;
} /* Name.Attribute */
.highlight .nb {
  color: #24909d;
} /* Name.Builtin */
.highlight .nc {
  color: #447fcf;
  text-decoration: underline;
} /* Name.Class */
.highlight .no {
  color: #40ffff;
} /* Name.Constant */
.highlight .nd {
  color: #ffa500;
} /* Name.Decorator */
.highlight .ni {
  color: #d0d0d0;
} /* Name.Entity */
.highlight .ne {
  color: #bbbbbb;
} /* Name.Exception */
.highlight .nf {
  color: #447fcf;
} /* Name.Function */
.highlight .nl {
  color: #d0d0d0;
} /* Name.Label */
.highlight .nn {
  color: #447fcf;
  text-decoration: underline;
} /* Name.Namespace */
.highlight .nx {
  color: #d0d0d0;
} /* Name.Other */
.highlight .py {
  color: #d0d0d0;
} /* Name.Property */
.highlight .nt {
  color: #6ab825;
  font-weight: bold;
} /* Name.Tag */
.highlight .nv {
  color: #40ffff;
} /* Name.Variable */
.highlight .ow {
  color: #6ab825;
  font-weight: bold;
} /* Operator.Word */
.highlight .w {
  color: #666666;
} /* Text.Whitespace */
.highlight .mb {
  color: #3677a9;
} /* Literal.Number.Bin */
.highlight .mf {
  color: #3677a9;
} /* Literal.Number.Float */
.highlight .mh {
  color: #3677a9;
} /* Literal.Number.Hex */
.highlight .mi {
  color: #3677a9;
} /* Literal.Number.Integer */
.highlight .mo {
  color: #3677a9;
} /* Literal.Number.Oct */
.highlight .sa {
  color: #ed9d13;
} /* Literal.String.Affix */
.highlight .sb {
  color: #ed9d13;
} /* Literal.String.Backtick */
.highlight .sc {
  color: #ed9d13;
} /* Literal.String.Char */
.highlight .dl {
  color: #ed9d13;
} /* Literal.String.Delimiter */
.highlight .sd {
  color: #ed9d13;
} /* Literal.String.Doc */
.highlight .s2 {
  color: #ed9d13;
} /* Literal.String.Double */
.highlight .se {
  color: #ed9d13;
} /* Literal.String.Escape */
.highlight .sh {
  color: #ed9d13;
} /* Literal.String.Heredoc */
.highlight .si {
  color: #ed9d13;
} /* Literal.String.Interpol */
.highlight .sx {
  color: #ffa500;
} /* Literal.String.Other */
.highlight .sr {
  color: #ed9d13;
} /* Literal.String.Regex */
.highlight .s1 {
  color: #ed9d13;
} /* Literal.String.Single */
.highlight .ss {
  color: #ed9d13;
} /* Literal.String.Symbol */
.highlight .bp {
  color: #24909d;
} /* Name.Builtin.Pseudo */
.highlight .fm {
  color: #447fcf;
} /* Name.Function.Magic */
.highlight .vc {
  color: #40ffff;
} /* Name.Variable.Class */
.highlight .vg {
  color: #40ffff;
} /* Name.Variable.Global */
.highlight .vi {
  color: #40ffff;
} /* Name.Variable.Instance */
.highlight .vm {
  color: #40ffff;
} /* Name.Variable.Magic */
.highlight .il {
  color: #3677a9;
} /* Literal.Number.Integer.Long */
.font-sans {
  font-family: var(--font-sans);
}

.font-familjen {
  font-family: var(--font-familjen);
}

.font-serif {
  font-family: var(--font-serif);
}

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

.font-geist {
  font-family: var(--font-geist);
}

.font-xxl {
  font-size: var(--font-xxl);
}

.font-xl {
  font-size: var(--font-xl);
}

.font-lg {
  font-size: var(--font-lg);
}

.font-md {
  font-size: var(--font-md);
}

.font-smm {
  font-size: var(--font-smm);
}

.font-base {
  font-size: var(--font-base);
}

.font-sm {
  font-size: var(--font-sm);
}

.font-xs {
  font-size: var(--font-xs);
}

.font-xxs {
  font-size: var(--font-xxs);
}

.font-xxxs {
  font-size: var(--font-xxxs);
}

.font-bold {
  font-weight: var(--font-bold);
  font-variation-settings: "wght" var(--font-bold);
}

.font-semibold {
  font-weight: var(--font-semibold);
  font-variation-settings: "wght" var(--font-semibold);
}

.font-medium {
  font-weight: var(--font-medium);
  font-variation-settings: "wght" var(--font-medium);
}

.font-normal {
  font-weight: var(--font-normal);
  font-variation-settings: "wght" var(--font-normal);
}

.font-light {
  font-weight: var(--font-light);
  font-variation-settings: "wght" var(--font-light);
}

.font-var {
  font-weight: var(--font-normal-var);
  font-variation-settings: "wght" var(--font-normal-var);
}

.tracking-zero {
  letter-spacing: var(--tracking-zero);
}

.tracking-tightest {
  letter-spacing: var(--tracking-tightest);
}

.tracking-tighter {
  letter-spacing: var(--tracking-tighter);
}

.tracking-tight {
  letter-spacing: var(--tracking-tight);
}

.black {
  color: var(--black);
}

.bg-black {
  background-color: var(--black);
}

.white {
  color: var(--white);
}

.bg-white {
  background-color: var(--white);
}

.off-white {
  color: var(--off-white);
}

.bg-off-white {
  background-color: var(--off-white);
}

.dark-05 {
  color: var(--dark-05);
}

.bg-dark-05 {
  background-color: var(--dark-05);
}

.dark-10 {
  color: var(--dark-10);
}

.bg-dark-10 {
  background-color: var(--dark-10);
}

.dark-20 {
  color: var(--dark-20);
}

.bg-dark-20 {
  background-color: var(--dark-20);
}

.dark-30 {
  color: var(--dark-30);
}

.bg-dark-30 {
  background-color: var(--dark-30);
}

.dark-50 {
  color: var(--dark-50);
}

.bg-dark-50 {
  background-color: var(--dark-50);
}

.dark-60 {
  color: var(--dark-60);
}

.bg-dark-60 {
  background-color: var(--dark-60);
}

.dark-70 {
  color: var(--dark-70);
}

.bg-dark-70 {
  background-color: var(--dark-70);
}

.dark-80 {
  color: var(--dark-80);
}

.bg-dark-80 {
  background-color: var(--dark-80);
}

.dark-90 {
  color: var(--dark-90);
}

.bg-dark-90 {
  background-color: var(--dark-90);
}

.dark-95 {
  color: var(--dark-95);
}

.bg-dark-95 {
  background-color: var(--dark-95);
}

.code-hi {
  color: var(--code-hi);
}

.bg-code-hi {
  background-color: var(--code-hi);
}

.code-bg {
  color: var(--code-bg);
}

.bg-code-bg {
  background-color: var(--code-bg);
}

html {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antiliased !important;
}

body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  background-color: var(--bg-color);
}

/*
    Icons
*/
.icon {
  color: var(--fg-body-color);
}
.icon__small {
  width: 17px;
  height: 17px;
}

/*
  Layout
*/
.layout__inner {
  position: relative;
}

/*
    Header & Navigation
*/
.desktop-nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--bg-color);
  z-index: 999;
  box-shadow: 0 0 0 1px var(--border);
}
.desktop-nav__container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  box-shadow: 0 0 0 1px var(--border);
  padding: 0 20px;
  box-sizing: border-box;
}
.desktop-nav__button {
  cursor: pointer;
  border: none;
}
.desktop-nav__button svg {
  width: 16px;
  vertical-align: middle;
  color: var(--dark-50);
  transform: scale(0);
  transition: transform 0.3s ease-out 0s;
}
.desktop-nav__button svg.active {
  transform: scale(1);
  transition: transform 0.3s ease-out 0s;
}
.desktop-nav__links {
  margin: 15px 0;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 30px;
  list-style-type: none;
  padding: 2.5px 0;
}
@media (max-width: 480px) {
  .desktop-nav__links {
    margin: 20px 0;
  }
}
.desktop-nav__link a,
.desktop-nav__link a:focus,
.desktop-nav__link a:visited,
.desktop-nav__link a:active {
  text-decoration: none;
}

.mobile-nav {
  display: none;
}

/*
    Container
*/
.container, .highlighter-rouge, table {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 360px) {
  .container, .highlighter-rouge, table {
    max-width: 350px;
    width: 350px;
  }
}
@media (min-width: 480px) {
  .container, .highlighter-rouge, table {
    max-width: 440px;
  }
}
@media (min-width: 768px) {
  .container, .highlighter-rouge, table {
    max-width: 668px;
    width: 668px;
  }
}
@media (min-width: 1024px) {
  .container, .highlighter-rouge, table {
    max-width: 774px;
    width: 774px;
  }
}
@media (min-width: 1280px) {
  .container, .highlighter-rouge, table {
    max-width: 680px;
    width: 680px;
  }
}
@media (min-width: 768px) {
  .container.narrow, .narrow.highlighter-rouge, table.narrow {
    max-width: 568px;
    width: 568px;
  }
}
@media (min-width: 1024px) {
  .container.narrow, .narrow.highlighter-rouge, table.narrow {
    max-width: 724px;
    width: 724px;
  }
}
@media (min-width: 1280px) {
  .container.narrow, .narrow.highlighter-rouge, table.narrow {
    max-width: 674px;
    width: 674px;
  }
}

/*
    Hero
*/
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 200px 20px 50px 20px;
  box-shadow: 0 0 0 1px var(--border);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .hero {
    padding: 150px 10px;
  }
}
@media (max-width: 480px) {
  .hero {
    padding: 120px 10px;
  }
}

.hero-text {
  max-width: 60ch;
  display: flex;
}
.hero-text__centered {
  text-align: center;
  justify-content: center;
}

.hero-subtext {
  max-width: 70ch;
}
@media (max-width: 768px) {
  .hero-subtext {
    max-width: 45ch;
  }
}
.hero-subtext__centered {
  margin-top: 30px;
  max-width: 70ch;
  text-align: center;
  display: flex;
  align-self: center;
}

.hero-short {
  max-width: 45ch;
}

/*
    Home
*/
@media (min-width: 1280px) {
  .projects {
    margin: 70px 0;
  }
}
.projects__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1px;
}
.projects__image {
  background-image: var(--dotted-bg);
  background-size: 35px 35px;
  border: 3px solid var(--border);
  height: 550px;
  object-fit: cover;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.projects__image img {
  width: 550px;
  border-radius: 10px;
}
@media (max-width: 480px) {
  .projects__image img {
    width: 275px;
  }
}
@media (max-width: 480px) {
  .projects__image {
    height: 250px;
  }
}
.projects__grid-item {
  height: auto;
  width: 100%;
  background-color: var(--bg-color);
  padding: 16px 20px;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px var(--border);
}
.projects__grid-item .title {
  margin-bottom: 0;
}
.projects__grid-item p {
  width: fit-content;
  margin-bottom: 0;
}
@media (max-width: 480px) {
  .projects__grid-item p {
    max-width: 42ch;
  }
}
.projects__grid-item:hover {
  background-color: var(--accent);
}
@media (max-width: 768px) {
  .projects__grid-item {
    padding: 16px 10px;
  }
}
@media (max-width: 480px) {
  .projects__grid-item {
    padding: 16px 10px;
  }
}
.projects__title {
  width: auto;
  white-space: nowrap;
}
.projects__divider {
  width: 100%;
  border-style: dashed;
  border-width: 0.15px;
  border-color: var(--dark-40);
}
.projects__hr {
  width: 100%;
  background-color: var(--fg-body-color);
}
.projects__grid-item-picture {
  margin: 0;
  padding: 0;
  height: 320px;
  border-radius: 10px;
  border: 0.75px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  background-image: var(--dotted-bg);
  background-size: 30px 30px;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.projects__grid-item-picture svg {
  fill: var(--fg-body-color);
}
@media (max-width: 480px) {
  .projects__grid-item-picture {
    height: 320px;
  }
}
.projects__image-hover-effect {
  z-index: 0;
  backface-visibility: hidden;
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-style: inset;
  border-radius: 12px;
  margin: 0;
  background: var(--bg-color);
}
.projects__image-hover-effect i {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  border-radius: 12px;
  transition: opacity 0.5s ease;
}
.projects__image-hover-effect i:before {
  content: "";
  display: block;
  background: var(--border-bg);
  box-shadow: 0 0 40px 20px var(--border-bg);
  width: 140%;
  padding-bottom: 140%;
  position: absolute;
  left: -20%;
  top: -30%;
  transform-origin: center;
  border-radius: 100%;
  z-index: 1;
  animation: rotate 5s linear infinite;
}
.projects__image-hover-effect img {
  width: 360px;
  object-fit: cover;
  border-radius: 10px;
  transition: all 0.3s ease-out;
}
@media (max-width: 480px) {
  .projects__image-hover-effect img {
    width: 300px;
  }
}
.projects a:hover i {
  opacity: 1;
  transition: opacity 0.5s ease;
}

@keyframes rotate {
  0% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
/*
  About
*/
.about__image img {
  width: 200px;
  border-radius: 15px;
}

/*
  Qualities
*/
.qualities__container {
  margin-top: 50px;
  margin-bottom: 100px;
}
.qualities__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
@media (max-width: 768px) {
  .qualities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (max-width: 480px) {
  .qualities__grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
.qualities__grid-item {
  margin: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

/*
  Experiences
*/
.experiences__container {
  margin-top: 1px;
  box-shadow: 0 0 0 1px var(--border);
  padding: 40px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
@media (max-width: 768px) {
  .experiences__container {
    padding: 40px 10px;
  }
}
@media (max-width: 480px) {
  .experiences__container {
    padding: 40px 10px;
  }
}
.experiences__line {
  opacity: 0.1;
}
.experiences__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  gap: 35px;
  margin: 30px 0 0 0;
}
@media (max-width: 768px) {
  .experiences__grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}
@media (max-width: 480px) {
  .experiences__grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}
.experiences__heading {
  margin-bottom: 0;
}
.experiences__image {
  width: 50px;
  object-fit: contain;
}
.experiences__position {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
@media (max-width: 480px) {
  .experiences__position {
    align-items: flex-start;
    flex-direction: column;
  }
}
.experiences__link {
  text-decoration: none;
  color: var(--fg-body-color);
  font-size: var(--font-base);
}
.experiences__grid-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 480px) {
  .experiences__grid-item {
    flex-direction: column;
    align-items: flex-start;
  }
}
.experiences__grid-item:hover .experiences__link {
  text-decoration: underline;
}

/*
 Colophon
*/
.colophon__container {
  margin-top: 1px;
  box-shadow: 0 0 0 1px var(--border);
  padding: 20px;
  box-sizing: border-box;
}
.colophon__container p {
  margin: 0;
}
@media (max-width: 768px) {
  .colophon__container {
    padding: 10px;
  }
}
@media (max-width: 480px) {
  .colophon__container {
    padding: 10px;
  }
}

/* Interests */
.interests__container {
  margin-bottom: 100px;
}
.interests__line {
  opacity: 0.1;
}
.interests__list {
  margin-top: 10px;
}

/*
  Photos
*/
.photos__hero {
  padding: 150px 20px 75px 20px;
  box-shadow: 0 0 0 1px var(--border);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .photos__hero {
    padding: 150px 10px 55px 10px;
  }
}
@media (max-width: 480px) {
  .photos__hero {
    padding: 120px 10px 20px 10px;
  }
}
.photos__grid {
  margin-top: 1px;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .photos__grid {
    grid-template-columns: 1fr;
  }
}
.photos__item {
  display: grid;
  height: 100%;
  width: 100%;
  background: var(--bg-color);
  position: relative;
  box-shadow: 0 0 0 1px var(--border);
  box-sizing: border-box;
}
.photos__item img {
  width: 100%;
  height: 100%;
  min-height: 302.5px;
  max-height: 605px;
  object-fit: cover;
}
.photos__info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 2.5px 8px;
}
.photos__info p {
  margin: 0;
  color: var(--dark-50);
}

/*
  Blog
*/
.blog__container {
  position: relative;
}
.blog__main {
  width: 100%;
}
.blog__pagination {
  margin-top: 80px;
  margin-bottom: 0;
}
.blog__pagination .flex {
  margin-top: 20px;
  width: fit-content;
  gap: 15px;
}
.blog__pagination .flex p,
.blog__pagination .flex span {
  margin: 0;
}
.blog__pagination .flex__button {
  font-size: var(--a-size);
  background-color: var(--bg-color);
  color: var(--fg-body-color);
  border: 1px solid var(--border);
  border-radius: 7.5px;
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.blog__pagination .flex__button svg {
  width: 15px;
}
.blog__pagination .flex__button__disabled {
  color: var(--dark-30);
  cursor: not-allowed;
}
.blog__grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .blog__grid {
    grid-template-columns: 1fr;
  }
}
.blog__item {
  margin: 0;
  background: transparent;
  transition: border ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  box-shadow: 0 0 0 2px var(--border);
  border-radius: 7.5px;
  padding: 20px 15px;
  transition: box-shadow ease-in-out 0.1s;
}
.blog__item img {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  object-fit: cover;
}
.blog__item:hover {
  box-shadow: 0 0 0 2px var(--border);
  transition: box-shadow ease-in-out 0.1s;
}
@media (max-width: 768px) {
  .blog__item {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
@media (max-width: 480px) {
  .blog__item {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
.blog__thumbnail_details {
  height: auto;
  display: flex;
  flex-direction: column;
}
.blog__thumbnail_title {
  margin-bottom: 0;
  justify-self: flex-start;
}
.blog__content {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  align-items: flex-start;
  gap: 35px;
  position: relative;
  margin-top: 100px;
}
.blog__content h2 {
  margin-top: 0;
}
.blog__content .date {
  position: sticky;
  top: 10%;
  left: 0;
  justify-self: flex-start;
  height: fit-content;
}
.blog__content .date small {
  display: block;
  margin-bottom: 15px;
}
.blog__content .date h2,
.blog__content .date p {
  margin: 0;
}
@media (max-width: 480px) {
  .blog__content .date {
    position: relative;
  }
}
@media (max-width: 768px) {
  .blog__content {
    grid-template-columns: 0.5fr 1fr;
    gap: 35px;
  }
}
@media (max-width: 480px) {
  .blog__content {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}

/*
  Article
*/
.article svg {
  width: var(--a-size);
  height: var(--a-size);
  vertical-align: middle;
  padding-right: 5px;
  padding-bottom: 1.5px;
}
.article__image {
  position: relative;
  background-image: var(--dotted-bg);
  background-size: 35px 35px;
  border: 3px solid var(--border);
  height: 530px;
  padding: 25px;
  object-fit: cover;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: start;
}
.article__image h1 {
  margin-top: 20px;
  margin-bottom: 0px !important;
}
@media (max-width: 480px) {
  .article__image {
    height: 250px;
  }
}
.article__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130vh;
  background: var(--overlay-bg-color);
}
@media (max-width: 480px) {
  .article__overlay {
    height: 90vh;
  }
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.flex.col {
  flex-direction: column;
}
.flex__gap-sm {
  gap: 5px;
}

img {
  width: 100%;
}

/*
  Footer
*/
.footer {
  margin-top: 1px;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px var(--border);
}
.footer__heading {
  margin: 0 0 10px 0;
}
.footer__container {
  height: 100%;
  margin-top: 1px;
  padding: 20px;
  box-shadow: 0 0 0 1px var(--border);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .footer__container {
    padding: 10px;
  }
}
@media (max-width: 480px) {
  .footer__container {
    padding: 10px;
  }
}
.footer__flex {
  display: flex;
  align-items: start;
  gap: 100px;
}
@media (max-width: 1024px) {
  .footer__flex {
    gap: 55px;
  }
}
@media (max-width: 768px) {
  .footer__flex {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px;
  }
}
@media (max-width: 480px) {
  .footer__flex {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.footer__links-heading {
  margin: 0;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: fit-content;
}
.footer__links a {
  display: block;
  text-decoration: none;
}
.footer__bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 75px 0 0 0;
}
.footer__bottom-lead {
  margin-bottom: 0;
}
.footer__bottom-end {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.footer__theme-btn {
  font-size: var(--a-size);
  background-color: var(--bg-color);
  color: var(--fg-body-color);
  border: none;
  box-shadow: 0 0 0 1px var(--border);
  border-radius: 7.5px;
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.footer__theme-btn p {
  margin: 0;
  padding: 0;
  line-height: normal;
}
.footer__theme-btn svg {
  width: 15px;
  vertical-align: middle;
}

.bookmarks__container {
  margin-top: 1px !important;
  padding: 20px 0;
  box-shadow: 0 0 0 1px var(--border);
  box-sizing: border-box;
}
.bookmarks__container ul {
  margin: 0 !important;
}
.bookmarks p {
  margin: 7.5px 0;
}

table {
  color: var(--fg-body-color);
  font-family: var(--body-font);
  font-size: var(--a-size);
  text-align: left;
  border-collapse: collapse;
  overflow: hidden;
  overflow-y: auto;
}
table th,
table td {
  border: 1px solid var(--fg-body-color);
  padding: 5px 10px;
  white-space: nowrap;
}

.highlighter-rouge {
  margin-left: 0;
}

* {
  /* Hide scrollbar for Chrome, Safari and Opera */
  /* Hide scrollbar for IE, Edge and Firefox */
}
* .no-scrollbar::-webkit-scrollbar {
  display: none;
}
* .no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

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