body {
  --bg-color: rgb(16, 16, 16);
  --t2-color: rgb(30, 30, 30);
  --t3-color: rgb(45, 45, 45);
  --t10-color: rgb(216, 216, 216);
  --t11-color: rgb(234, 234, 234);
  --text-color: rgb(248, 248, 248);

  background-color: var(--bg-color);
  color: var(--text-color);

  font-family: 'Segoe UI', Verdana, sans-serif;

  button, input {
    background-color: var(--t2-color);
    color: var(--text-color);
    font-family: inherit;
    border: none;
    border-radius: 0.125rem;
    height: 2rem;
    padding: 0.25rem;
    box-sizing: border-box;
  }

  
  div.roundbox {
    border: 1px solid var(--t11-color);
    border-radius: 0.25rem;
    padding: 0.5rem;
    width: 24rem;
  }
}

@media screen and (prefers-color-scheme: light) {
  body {
    --bg-color: rgb(248, 248, 248);
    --t2-color: rgb(234, 234, 234);
    --t3-color: rgb(216, 216, 216);
    --t10-color: rgb(45, 45, 45);
    --t11-color: rgb(30, 30, 30);
    --text-color: rgb(16, 16, 16);
  }
}

div.mainflex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

div.mainflex form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 16rem;
}

div.mainflex form.sortable {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 16rem;
    align-items: center;
}

h3 {
    font-weight: 600;
    letter-spacing: -0.025em;
    max-width: 24rem;
}

h3.voting {
    max-width: 28rem;
}

h4 {
    font-weight: 600;
    letter-spacing: -0.025em;
    max-width: 24rem;
    text-align: center;
}

input:focus-visible, button:focus-visible {
    outline: 1px solid var(--t11-color);
    border-radius: 0.125rem;
}

/**
 * For browsers that support :user-invalid/:user-valid
 */
input:user-invalid {
    outline-color: crimson !important;
}

/**
 * When not supported, fallback to :invalid/:valid
 * Wrapping :valid/:invalid in a "not" @supports block ensures 
 * that the invalid styles are not applied on page load in browsers 
 * that do support :user-invalid/:user-valid
 */
@supports not selector(:user-invalid) {
  input:invalid {
    outline-color: crimson !important;
  }
}