:root {
  --bglv00: #ffffff;
  --bglv0: #ecf2ed;
  --bglv1: #e0e9e2;
  --fglv0: #303030;
  --fglv1: #454748;
  --fglv2: #746f6f;
  --fglink: #143cb5;
  --borderColor: #b3b5b9;
  --fgactive: #ff6904;
  --radii: 4px;
  --heart: #c33737;
}

body.dark {
  --bglv00: #000000;
  --bglv0: #0a0a0a;
  --bglv1: #181818;
  --bglv4: #414141;
  --fglv0: #ece8e8;
  --fglv1: #c2c4c6;
  --fglv2: #a4a7a7;
  --fglink: #74bde8;
  --borderColor: #323232;
  --fgactive: #d9d86c;
  --heart: #c33737;
  --radii: 4px;

  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%201490%20853%22%3E%3Cpath%20fill%3D%22url(%23a)%22%20d%3D%22M924.231%20520.895C622.861%20520.895%20182.506%20613.632%200%20660V0h1490v574.435c-63.02-17.847-264.4-53.54-565.769-53.54Z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%22745%22%20x2%3D%22745%22%20y1%3D%22193%22%20y2%3D%22853%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230A0A0A%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232A291D%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
}

/* Support iOS dynamic type */
@supports (-webkit-touch-callout: none) {
  :root {
    font: -apple-system-body;
  }

  html body {
    font-size: 93%;
  }
}

html {
  font-size: 13px;
}

body,
button,
textarea,
input {
  font-family: system-ui, sans-serif;
  color: var(--fglv0);
}

select,
button {
  box-sizing: border-box;
}

body {
  word-wrap: break-word;
  font-size: 1.2rem;
  margin: 0;
  padding: 0;
  background-color: var(--bglv0);
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%201490%20853%22%3E%3Cpath%20fill%3D%22url(%23a)%22%20d%3D%22M924.231%20520.895C622.861%20520.895%20182.506%20613.632%200%20660V0h1490v574.435c-63.02-17.847-264.4-53.54-565.769-53.54Z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%22745%22%20x2%3D%22745%22%20y1%3D%22193%22%20y2%3D%22853%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ECF2ED%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FFFEEE%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
  background-size: 100vw;
  background-position: center top;
  background-repeat: no-repeat;
  line-height: 1.6;
}

@media (max-width: 1400px) {
  body {
    background-size: auto 100vh;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

a { 
  text-underline-offset: 0.2em;
  color: var(--fglink);
}

footer,
main,
header {
  margin: 3em;
}

footer {
  margin-top: 15em;
  padding: 2em 0;
}

label {
  display: block;
}

textarea,
select,
input,
button {
  font-size: inherit;
  border-radius: var(--radii);
  padding: 16px; 
  border-radius: 0;
  background: var(--bglv0);
  border: 0.5px solid var(--borderColor);
  box-shadow: 1px 1px 0 0px var(--bglv0);
  transform: scale(1, 0.97);
  color: var(--fglv0);
  letter-spacing: 1px;
}

*::placeholder {
  color: var(--fglv3);
}

fieldset {
  border: 0;
  padding: 0;
  margin: 1em 0;
}

button, .button {
  padding: 1em 1.5em;
  line-height: 1;
  font-size: inherit;
  background: var(--bglv1);
  font-weight: bold;
  cursor: pointer;
  box-shadow: 1px 1px 0 0px var(--bglv0);
}

button:focus:not(:focus-visible), .button:focus:not(:focus-visible), select:focus:not(:focus-visible), input:focus {
  box-shadow: none;
}

select:disabled {
  opacity: 0.7;
}

a.button {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

button[type="submit"], .button\:type-submit {
  background: var(--bglv2);
}

code, pre, .code {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;  
  font-size: 0.95em;
}

em {
  color: var(--fglv2);
}

blockquote {
  border: 0;
  padding: 20px 25px;
  position: relative;
  background: none;
  word-wrap: break-word;
  max-width: 100%;
  margin: 10px 0;
}

.gallery {
  margin: 6em 0;
}

.grid {
  margin: 2em 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 6em;
  list-style: none;
}

.site-title {
  padding: 1em 0;
}

.site-title svg {
  width: min(12em, 70vw);
  height: auto;
}

.site-title path {
  fill: currentColor;
}

.site-description {
  color: var(--fglv1);
  max-width: 40em;
  font-size: 1.2em;
}

img {
  width: 100%;
  margin-bottom: 1em;
  aspect-ratio: 0.707;
}

.creator {
  margin: 1em auto;
  color: var(--fglv1);
}

.creator span {
  font-weight: bold;
}

nav {
  display: inline-flex;
  gap: 1.5em;
  flex-wrap: wrap;
}

.button.nav-link {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--fglv2);
  font-size: 1.1em;
  font-weight: bold;
  border: 1px solid var(--fglv0);
  background-color: var(--bglv0);
  color: var(--fglv0);
}

.nav-link:hover {
  background-color: var(--fglv0);
  color: var(--bglv0);
  border: 1px solid transparent;
}

/* Open Heart */
open-heart {
  cursor: pointer;
}
open-heart svg {
  width: 15px;
}

open-heart path { stroke: var(--fglv0); stroke-width: 1px; }
[aria-pressed="true"] svg { fill:  var(--heart); stroke-width: 0; }
[aria-pressed="true"] path { stroke-width: 0; }

[id] {
  scroll-margin-top: 3em;
}

.tools {
  margin-top: 3em;
  gap: 1em;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.search {
  padding-top: 2em;
}

.search-label {
  font-weight: bold;
  position: absolute;
  font-size: 0.8em;
  margin: 0.4em;
  z-index: 1;
}

body:has(:target):not(:has([data-default]:target)) .to-top-link {
  display: block;
}

.button.to-top-link {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}

@media (max-width: 500px) {
  .to-top-link { 
    left: 20px;
    border-radius: 0;
    border: 1px solid var(--borderColor);
    background-color: var(--bglv1);
  }

  footer,
  main,
  header {
    margin: 2em;
  }
}

li:target {
  outline: 0.5em solid var(--borderColor);
  outline-offset: 1em;
}

[aria-busy="true"] path {
  stroke-width: 0;
  fill: var(--heart)
}