@import url(https://fonts.bunny.net/css?family=yaldevi:400,600|share-tech-mono:400|tilt-neon:400|unica-one:400);

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg: #1b0d1f;
    --content-bg: var(--main-bg);
    --accent: #896a95;
    --primary-text: #e4c2f1;
    --primary-link: #b666d9;
    --primary-link-hover: #f2e0f8;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --main-bg: #edf6d1;
    --content-bg: var(--main-bg);
    --accent: #929a79;
    --primary-text: #1d2114;
    --primary-link: #667937;
    --primary-link-hover: #343c1f;
  }
}

html {
  background: var(--main-bg);
}

body {
  color: var(--primary-text);
  font-family: sans-serif;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 900px;
  background: var(--content-bg);
  font-family: 'Yaldevi', sans-serif;
  font-size: 1.2rem;
}

header {
  border-bottom: 1px solid var(--accent);
  padding: 4rem 1rem 0 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Unica One', display;
  text-transform: lowercase;
  font-size: 1.5rem;
}

header h1 {
  display: inline;
  margin: 0;
  font-size: 1.5rem;
  flex: 2 1 15%;
  font-weight: normal;
}

header a {
  text-decoration: none;
}

nav {
  display: inline-block;
  flex: 5 1 25%
}

nav ul {
  margin: 0;
}

nav ul li {
  display: inline-block;
  padding: 0 0.3rem;
}

main {
  padding: 0 1.5rem;
}

footer {
  border-top: 1px solid var(--accent);
  margin-top: 1rem;
  text-align: center;
  font-family: 'Unica One', display;
}

a {
  color: var(--primary-link);
}

a:hover, a:active {
  color: var(--primary-link-hover);
  transition: color 0.5s;
}

a[href^="http"]:not(:has(img, svg, picture)) {
  padding-right: 0.3rem;
}

a[href^="http"]:not(:has(img, svg, picture))::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.3rem;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Free%206.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M320%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l82.7%200L201.4%20265.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L448%20109.3l0%2082.7c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-160c0-17.7-14.3-32-32-32L320%200zM80%2032C35.8%2032%200%2067.8%200%20112L0%20432c0%2044.2%2035.8%2080%2080%2080l320%200c44.2%200%2080-35.8%2080-80l0-112c0-17.7-14.3-32-32-32s-32%2014.3-32%2032l0%20112c0%208.8-7.2%2016-16%2016L80%20448c-8.8%200-16-7.2-16-16l0-320c0-8.8%207.2-16%2016-16l112%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L80%2032z%22%2F%3E%3C%2Fsvg%3E");
}

img {
  max-width: 100%;
}

figure {
  max-width: 100%;
}

pre {
    overflow-x: scroll;
}

code {
  font-family: 'Share Tech Mono', monospace;
}

.pagination {
  text-align: center;
}

.pagination li {
  display: inline-block;
  padding: 0 0.3rem;
}

@media only screen and (max-width: 450px) {
  header h1 {
    display: block;
  }
}