/* (ALL) Use a better box model */
*,
::before,
::after {
  box-sizing: border-box; }

/* (ALL) Disable page margin */
body {
  margin: 0; }

/* (ALL) Use sans-serif by default */
body {
  font-family: sans-serif; }

/* (ALL) Fix monospace sizing */
code,
kbd,
pre,
samp,
textarea {
  /* Browsers change font-size when there is monospace by itself in the font
   * family, this stupid hack bypasses this dumb ass-default. */
  font-family: monospace, monospace; }

/* (ALL) Normalise <hr> colour */
hr {
  border: 1px inset #888; }

/* (ALL) <sub>, <sup> should not affect line-height */
sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* (Blink/WebKit) <b>, <strong> should have relative boldness */
b,
strong {
  font-weight: bolder; }

/* (Blink/Gecko) Fix vertical alignment */
progress {
  vertical-align: baseline; }

/* (WebKit) Show dotted underline */
abbr[title] {
  text-decoration-line: underline;
  text-decoration-style: dotted; }

.highlight {
  /*
   * Comment
   */
  /*
   * Generic
   */
  /*
   * Keyword
   */
  /*
   * Literal
   */
  /*
   * Name
   */
  /*
   * HTML
   */
  /*
   * Diff
   */
  /*
   * CSS/SCSS
   */
  /*
   * Shell
   */ }
  .highlight .err {
    border: 1px solid var(--code-red); }
  .highlight .o {
    color: var(--code-cyan); }
  .highlight .c,
  .highlight .cm,
  .highlight .c1 {
    color: var(--code-blue); }
  .highlight .cs,
  .highlight .ch {
    color: var(--code-magenta); }
  .highlight .cp,
  .highlight .cpf {
    color: var(--code-red); }
  .highlight .gh,
  .highlight .gu {
    color: var(--code-magenta); }
  .highlight .gi {
    color: var(--code-cyan); }
  .highlight .gd {
    color: var(--code-magenta); }
  .highlight .gs {
    font-weight: bold; }
  .highlight .ge {
    font-style: italic; }
  .highlight .gr {
    color: var(--code-red); }
  .highlight .go {
    color: var(--code-muted); }
  .highlight .gp {
    color: var(--code-blue); }
  .highlight .gt {
    color: var(--code-red); }
  .highlight .k {
    color: var(--code-yellow); }
  .highlight .kc {
    color: var(--code-red); }
  .highlight .kd {
    color: var(--code-green); }
  .highlight .kn {
    color: var(--code-magenta); }
  .highlight .kr {
    color: var(--code-green); }
  .highlight .kt {
    color: var(--code-green); }
  .highlight .ld,
  .highlight .m,
  .highlight .mb,
  .highlight .mh,
  .highlight .mi,
  .highlight .il,
  .highlight .mo,
  .highlight .mf,
  .highlight .s,
  .highlight .sa,
  .highlight .sb,
  .highlight .sc,
  .highlight .dl,
  .highlight .sd,
  .highlight .s2,
  .highlight .sh,
  .highlight .si,
  .highlight .sx,
  .highlight .sr,
  .highlight .s1,
  .highlight .ss {
    color: var(--code-red); }
  .highlight .se {
    color: var(--code-magenta); }
  .highlight .nc,
  .highlight .nf,
  .highlight .nl,
  .highlight .nn,
  .highlight .py,
  .highlight .nv,
  .highlight .vc,
  .highlight .vg,
  .highlight .vi,
  .highlight .vm {
    color: var(--code-cyan); }
  .highlight .ne,
  .highlight .nt {
    color: var(--code-green); }
  .highlight .nb,
  .highlight .no,
  .highlight .nd,
  .highlight .ni {
    color: var(--code-magenta); }
  .highlight .na {
    color: var(--code-red); }
  .highlight .ow {
    color: var(--code-yellow); }
  .highlight code[data-lang="html"] .na {
    color: var(--code-green); }
  .highlight code[data-lang="html"] .nt {
    color: var(--code-yellow); }
  .highlight code[data-lang="html"] .p {
    color: var(--code-cyan); }
  .highlight code[data-lang="diff"] .gh {
    color: var(--code-green); }
  .highlight code[data-lang="diff"] .gu {
    color: var(--code-yellow); }
  .highlight code[data-lang="css"] .nn,
  .highlight code[data-lang="scss"] .nn {
    color: var(--code-red); }
  .highlight code[data-lang="sh"] .cp,
  .highlight code[data-lang="bash"] .cp {
    color: var(--code-magenta); }
  .highlight code[data-lang="sh"] .p,
  .highlight code[data-lang="bash"] .p {
    color: var(--code-yellow); }

/*
 * Base styling
 */
html {
  color-scheme: light dark;
  overflow-y: scroll; }

html, body {
  height: 100%; }

body {
  background-color: var(--bg0);
  color: var(--fg0);
  line-height: 1.5; }

a, .a {
  color: var(--a);
  cursor: pointer;
  text-decoration: none; }

:not(main):target {
  background-color: var(--bg2);
  padding: 0.2rem 0.3rem;
  border-radius: 0.5rem; }

h1 {
  font-size: 2rem; }

h2 {
  font-size: 1.75rem; }

h3 {
  font-size: 1.55rem; }

h4 {
  font-size: 1.35rem; }

h5 {
  font-size: 1.25rem; }

h6 {
  font-size: 1.15rem; }

h1, h2, h3, h4, h5, h6 {
  margin: 1.2rem 0 0.55rem 0;
  font-weight: 500;
  line-height: 1.1; }

h1 .fragment,
h2 .fragment,
h3 .fragment,
h4 .fragment,
h5 .fragment,
h6 .fragment {
  color: inherit; }

table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1rem 0; }

th, td {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem; }

table, th, td {
  border: 0.1rem solid var(--bg4); }

th {
  background: var(--bg2); }

ul, ol {
  margin: 0 0 1rem 0;
  padding-left: 1rem; }

ul ul, ol ol {
  padding-left: 2rem; }

li p {
  margin: 0; }

pre, code {
  background-color: var(--bg1);
  border: 1px solid var(--bg2); }

pre code {
  border: none; }

pre {
  background-color: var(--bg1);
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  overflow: auto;
  max-height: 30rem;
  tab-size: 4; }

hr {
  margin: 1rem 0; }

p {
  margin: 0 0 1rem 0; }

p:has(+ ol),
p:has(+ ul) {
  margin-bottom: 0; }

blockquote {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 0.5rem solid var(--bg3); }

/*
 * Layout
 */
.skip-to-content {
  background-color: var(--bg2);
  text-align: center;
  position: absolute;
  width: 100%;
  top: -100%;
  z-index: 1000; }
  .skip-to-content:focus {
    top: 0; }

#container {
  display: grid;
  grid-gap: 0 2rem;
  grid-template-columns: minmax(1px, 1fr);
  padding: 0.5rem 1.5rem 1.5rem 1.5rem;
  margin: 0 auto 0 auto;
  max-width: 64rem; }

@media (min-width: 48em) {
  #container {
    grid-template-columns: minmax(1px, 1fr) max-content; }
  .aside {
    grid-column: 2/3; } }

#main h1:first-of-type {
  margin-top: 0rem; }

.home-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem; }
  .home-header__text {
    margin: 0; }

/*
 * Navbar
 */
.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 64rem;
  padding: 1rem 1.5rem 0.75rem 1.5rem;
  margin: 0 auto; }
  @media (min-width: 48em) {
    .navbar {
      flex-wrap: nowrap;
      justify-content: start; } }
  .navbar__links {
    display: none;
    flex-direction: column; }
    @media (min-width: 48em) {
      .navbar__links {
        display: flex;
        flex-direction: row; } }
  .navbar__link {
    color: var(--fg0);
    white-space: nowrap;
    text-align: right;
    margin: 0.3rem 0; }
    @media (min-width: 48em) {
      .navbar__link {
        margin: 0 0.5rem; } }
    .navbar__link--title {
      font-weight: bold;
      margin-left: 0; }
  .navbar__divider {
    width: 0.1rem;
    background-color: var(--bg4); }
  .navbar__menu-btn {
    display: block;
    user-select: none; }
    @media (min-width: 48em) {
      .navbar__menu-btn {
        display: none; } }
#navbar__menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%; }
  @media (min-width: 48em) {
    #navbar__menu {
      flex-direction: row; } }
#hamburger:checked ~ #navbar__menu .navbar__links {
  display: flex; }

#hamburger:checked ~ #navbar__menu {
  background-color: var(--bg1);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  border: 0.125rem solid var(--bg2);
  padding: 0.1rem 0.5rem;
  border-radius: 0.25rem; }
  @media (min-width: 48em) {
    #hamburger:checked ~ #navbar__menu {
      background-color: unset;
      box-shadow: unset;
      border: unset;
      padding: unset;
      border-radius: unset; } }
.dropdown {
  cursor: pointer;
  position: relative;
  user-select: none; }
  .dropdown summary {
    list-style: none; }
    .dropdown summary::-webkit-details-marker {
      display: none; }
    .dropdown summary::after {
      display: inline-block;
      margin-left: 0.25rem;
      vertical-align: 0.2rem;
      content: "";
      border-top: 0.3rem solid;
      border-right: 0.3rem solid transparent;
      border-bottom: 0;
      border-left: 0.3rem solid transparent; }
  .dropdown__popup {
    display: flex;
    flex-direction: column;
    right: 0;
    margin-top: 0.5rem;
    border-radius: 0.25rem; }
    @media (min-width: 48em) {
      .dropdown__popup {
        position: absolute; } }
  .dropdown__item {
    color: var(--fg0);
    padding: 0.25rem 1.25rem;
    text-decoration: none; }
    .dropdown__item:not(:last-child) {
      border-bottom: 0.15rem solid var(--bg4); }

/*
 * Aside
 */
.aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin: 4rem auto 0 auto;
  align-items: center; }
  @media (min-width: 32em) {
    .aside {
      flex-direction: row; } }
  @media (min-width: 48em) {
    .aside {
      margin-top: 0rem;
      flex-direction: column;
      justify-content: flex-start; } }
  .aside__links {
    display: flex;
    flex-direction: column;
    margin-top: 1rem; }
    @media (min-width: 32em) {
      .aside__links {
        margin-left: 2rem; } }
    @media (min-width: 48em) {
      .aside__links {
        margin-left: 0rem; } }
  .aside__link {
    display: block;
    margin-bottom: 0.75rem; }
  .aside__avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 0.5rem; }
    @media (min-width: 32em) {
      .aside__avatar {
        width: 8rem;
        height: 8rem; } }
    @media (min-width: 48em) {
      .aside__avatar {
        margin: 0 auto; } }
/*
 * Buttons
 */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  gap: 0.5rem;
  color: #fff;
  border-radius: 0.25rem;
  padding: 0.25rem 1rem;
  transition-duration: 150ms; }
  .btn__img {
    height: 100%;
    padding: 0.2rem 0; }
  .btn--grey {
    color: var(--fg0);
    background-color: var(--bg2); }
    .btn--grey:hover {
      background-color: var(--bg3); }
  .btn--feed {
    font-size: 0.5em; }

/*
 * Article
 */
.article__date {
  color: var(--fg1);
  margin-top: -0.5rem;
  margin-bottom: 1rem; }

.article img {
  max-width: 100%; }

.post {
  font-size: 1.125rem;
  margin: 1rem 0; }
  @media (min-width: 32em) {
    .post {
      margin: 0.75rem 0; } }
  .post__date {
    color: var(--fg1);
    font-family: monospace; }
    @media (min-width: 32em) {
      .post__date {
        display: inline-block; } }
/*
 * Other
 */
#clipboard {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 1.5rem;
  padding: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transition-duration: 700ms; }

.flag {
  white-space: nowrap; }
  .flag__img {
    max-width: unset;
    height: 1.1rem;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0.15rem; }

.popup, .dropdown__popup, #clipboard {
  background-color: var(--bg3);
  border: 0.15rem solid var(--bg4);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem; }

.nowrap {
  white-space: nowrap; }

.nocss-helper {
  display: none; }