body {
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  margin: 0;
  padding: 3em;
  max-width: 50em;
  margin: 0 auto;
  line-height: 1.35;
}

#header {
  & h1 {
    font-weight: 400;
  }
  & span {
    font-weight: 600;
    color: #4cafac;
  }
}

a {
  text-decoration: none;
  color: rgb(64, 120, 192);
  &:hover {
    text-decoration: underline;
  }
}
a.button {
  background-color: #4cafac;
  color: white;
  padding: 0.5em 1em;
  border-radius: 0.25em;
}

#link {
  display: flex;
  font-weight: bold;
  justify-content: right;
  justify-content: center;
  /* color: black; */
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  & th,
  & td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  & th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4cafac;
    color: white;
  }
}

.embeddable-buttondown-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background-color: #f2f2f2;
  padding: 15px;
  border-radius: 4px;
}

.embeddable-buttondown-form label {
  font-size: 1rem;
  color: #333;
}

.embeddable-buttondown-form input[type="email"],
.embeddable-buttondown-form input[type="submit"] {
  width: 100%;
  max-width: 280px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}

.embeddable-buttondown-form input[type="submit"] {
  background-color: #4cafac;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.embeddable-buttondown-form input[type="submit"]:hover {
  background-color: #3a8d7c;
}

@media (max-width: 768px) {
  body {
    padding: 1em;
    max-width: 100%;
  }
  #header h1 {
    font-size: 2.2em;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }

  #header {
    & h1 {
      color: #e0e0e0;
    }
    & span {
      color: #76d7d3; /* Lighter version of #4cafac */
    }
  }

  a {
    color: #8cb4f3; /* Lighter blue for dark mode */
    &:hover {
      text-decoration: underline;
    }
  }
  a.button {
    background-color: #76d7d3;
    color: #121212; /* Dark text on light button */
  }

  #link {
    /* color: #e0e0e0; */ /* Potentially not needed if inheriting body color */
  }

  table {
    & th,
    & td {
      border: 1px solid #444; /* Darker border */
    }
    & th {
      background-color: #3a8d7c; /* Darker shade of #4cafac */
      color: #e0e0e0;
    }
    & td {
      color: #e0e0e0; /* Ensure table cell text is light */
    }
  }

  .embeddable-buttondown-form {
    background-color: #2c2c2c; /* Darker form background */
    border: 1px solid #444;
  }

  .embeddable-buttondown-form label {
    color: #e0e0e0;
  }

  .embeddable-buttondown-form input[type="email"] {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
  }

  .embeddable-buttondown-form input[type="submit"] {
    background-color: #76d7d3;
    color: #121212;
    border: none;
  }

  .embeddable-buttondown-form input[type="submit"]:hover {
    background-color: #5dbab5; /* Slightly different hover for dark mode */
  }
}