emmas.place/style/guestbook.css

:root {
  --pagebg: #232c2f;
  --pagecolor: #db7093;
  --button-border-color: #db7093;
  --button-color: #ffb6c1;
  --border: #db7093;
}

@media (prefers-color-scheme: dark) {
  :root {
    --border: #474973;
    --pagecolor: #474973;
    --button-border-color: #474973;
    --button-color: #474973;
    --pagebg: #f1dac4;
  }

  input[type="submit"] {
    color: #f1dac4;
  }
}

ul.pages {
  list-style: none;
  margin: auto;
  margin-top: 1rem;
  text-align: center;
}

ul.pages li {
  display: inline;
}

ul.pages li a,
ul.pages li.active {
  font-size: 1.2rem;
  border: 1px solid var(--border);
  padding: 5px;
  margin: 2px;
  transition: 0.5s ease;
  text-decoration: none;
}

ul.pages li.page a:hover {
  background: var(--pagecolor);
  color: var(--pagebg);
  transition: 0.5s ease;
}

ul.pages li.page a {
  background: var(--pagebg);
  color: var(--pagecolor);
}

ul.pages li.active {
  background: var(--pagecolor);
  color: var(--pagebg);
}

.q {
  border-bottom: 2px solid var(--border);
}

.a {
  padding-left: 2rem;
  border-left: 8px double var(--border);
  margin-bottom: 2rem;
}

.guestbook-text {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border);
}

h1,
h3,
p {
  margin: 0.5rem;
}

main {
  margin-top: 0.5rem;
}

input[type="text"],
textarea {
  width: 30vw;
  margin-bottom: 0.5rem;
}

input[type="submit"] {
  background-color: var(--button-color);
  border-color: var(--button-border-color);
  padding: 0.5rem;
}