:root {
  /* Board Theme HSL Experiment (Light Mode: #118bee = hsl(207, 87%, 50%)) */
  --theme-h: 207;
  --theme-s: 87%;
  --theme-l: 50%;
  --color-link: hsl(var(--theme-h), var(--theme-s), var(--theme-l));

  /* Fibbos Board Theme */
  --board-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 8%));
  --board-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 34%));

  --color-error: darkred;
  --color-warning: #ff8c00;
  /* Dark orange */
  --color-success: #008000;
  /* Dark green */
  --color-move-highlight: rgba(255, 220, 0, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root[color-mode="user"] {
    /* Board Theme HSL Experiment (Dark Mode: #0097fc = hsl(204, 100%, 49%)) */
    --theme-h: 204;
    --theme-s: 100%;
    --theme-l: 49%;
    --color-link: hsl(var(--theme-h), var(--theme-s), var(--theme-l));

    /* Fibbos Board Theme */
    --board-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 8%));
    --board-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 34%));
    --color-bg: #222;
    /* darker background for better readability */
    --color-error: red;
    --color-warning: #ffa500;
    /* Orange */
    --color-success: #32cd32;
    /* Lime green */
    --color-move-highlight: rgba(255, 215, 0, 0.2);
  }

  input,
  select,
  textarea {
    background-color: var(--color-bg);
    color: var(--color-text);
  }
}

button[type="reset"] {
  background-color: var(--color-text-secondary);
  /* rgb(110, 152, 178);*/
  border-color: var(--color-text-secondary);
}

button {
  padding: 0.6rem 1.5rem;
}

input {
  min-width: 91%;
  /* this might be extreme and mess up certain inputs */
}

textarea,
textarea[readonly] {
  background-color: var(--color-bg);
  /* Use normal background */
  color: var(--color-text);
  /* Use text color for theme */
}

textarea[readonly] {
  cursor: default;
}

main {
  padding-top: 0.5rem;
  max-width: 1000px;
  /*margin: !*0*! auto;*/
}

nav {
  margin-bottom: 2rem;
}

form header {
  margin: 0;
  padding: -80px;
}

/*section {*/
/*  margin-bottom: 0;*/
/*  margin-top: 0;*/
/*  padding-top: 0;*/
/*  padding-bottom: 0;*/
/*  background-color: red;*/
/*}*/

/*
These don't fix the not-centered headers
header {
  text-align: center;
}

header a b,
header a em,
header a i,
header a strong {
  text-align: center;
  margin: auto;
}
*/



/*
This didn't fix the weird Safari selection behavior when
the validation errors are hidden and unselectable

form {
  user-select: 'none',}
*/