:root {
  --color-0: #f38ba8;
  --color-1: #eba0ac;

  --bg-0: #1e1e2e;
  --fg-0: #cdd6f4;

  --bg-1: #313244;
  --fg-1: #a6adc8;

  --selection-bg: #45475a;
  --selection-fg: #bac2de;

  --content-width: 600px;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-0: #dd7878;
    --color-1: #dc8a78;

    --bg-0: #eff1f5;
    --fg-0: #4c4f69;

    --bg-1: #ccd0da;
    --fg-1: #5c5f77;

    --selection-bg: #bcc0cc;
    --selection-fg: #5c5f77;
  }
}

* { box-sizing: border-box; }

html { 
  scroll-behavior: smooth; 
  scrollbar-color: var(--color-0) var(--bg-0); 
}

body {
  color: var(--fg-0);
  background-color: var(--bg-0);
  font-size: 1.1em;
  line-height: 1.4;
  font-family: sans-serif;
  max-width: var(--content-width);
  width: 90%;
  margin: 2em auto;
  overflow-y: scroll;
}

::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}

a { color: var(--color-0); }
a:hover { color: var(--color-1); }

hr {
  border: none;
  border-top: 1px solid var(--color-0);
  margin: 1.2em auto 1.6em auto;
}

blockquote {
  padding: 0.2em 0.6em;
  margin-left: 1em;
  border-left: 0.2em solid var(--color-0);
  display:inline-flex;
}

blockquote p { margin: 0; }

figure { margin: 2em auto; }

figure figcaption { text-align: center; }

img {
  display: block;
  margin: 1em auto;
  max-width: 100%;
  height: auto;
  max-height: var(--content-width);
}

h1, h2, h3, h4, h5, h6 { color: var(--color-1); }

header h1 { color: var(--color-0); }

form {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  margin: 1.5em auto;
}

input::placeholder, textarea::placeholder { color: var(--fg-1); }

input, textarea {
  background-color: var(--bg-0);
  color: var(--fg-0);
  border: 1px solid var(--color-0);
  padding: 0.6em 0.6em;
  font-size: 1rem;
  width: 100%;
}

textarea {
  resize: none;
}

input[type=submit] {
  width: 12em;
  font-size: 0.8em;
  padding: 1em;
  cursor: pointer;
}

input:hover, textarea:hover {border: 1px solid var(--color-1);}

#top {
  position: absolute;
  top: 0;
}

#site-header { margin-bottom: 2em; }

#site-header h1 { font-size: 1.2em; }
#site-header h1 a { 
  background-color: var(--color-0);
  color: var(--bg-0);
  padding: 0.2em 0.4em;
  text-decoration: none;
}
#site-header h1 a:hover { background-color: var(--color-1); }

#nav-active-link { color: var(--fg-0); }
nav ul {
  width: 100%;
  list-style-type: none;
  font-size: 1em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

main {
  border: 1px solid var(--color-0);
  padding: 0.4em 1.2em;
}

#site-footer { 
  font-size: 0.85em; 
  margin-top: 2em;
  margin-bottom: 5em;
}

p#top-link { 
  text-align: center; 
  padding-top: 1em;
}

ol#post-index {
  list-style-type: none;
  padding: 0;
}

ol#post-index a {
  display: grid;
  grid-template-columns: 6.7em 1fr;
  width: 100%;
  text-decoration: none;
  color: var(--fg-0);
  margin-bottom: 1em;
}

ol#post-index time { color: var(--color-1); }

ol#post-index a:visited { color: var(--fg-1); }

.form-entry {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.form-entry:has(input[type=submit]) {
  flex-direction: row;
  justify-content: flex-end;
}

.guestbook-entry {
  background-color: var(--bg-1);
  border-radius: 1em;
  padding: 0.1em 0.8em;
  margin: 2em auto;
}

.guestbook-entry-name {
  font-size: 1.4em;
  color: var(--color-1);
}

.guestbook-entry time {
  font-size: 0.9em;
}