/* Styles applied to all pages, regardless of the application.

   Applied via `templates/base.html`, that all other templates are based on.
 */

html {
  font-family: "jost";
  color: rgb(var(--color-text));
}

body {
  background-color: rgb(var(--color-brand-background));
}

textarea, input {
  font-family: "jost";
}

html, body {
  height: 100%;
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  /* set link colors only in dark mode, use browser defaults in light mode */

  a {
    color: rgb(var(--color-link));
  }

  a:visited {
    color: rgb(var(--color-link-visited));
  }
}

button {
  background-color: transparent;
  color: rgb(var(--color-text));
  border-style: solid;
  border-width: 1px;
  border-color: rgba(var(--color-brand-dark-gray), 1);
  border-radius: 20px;
  padding: 4px;
  padding-left: 9px;
  padding-right: 9px;
  font-size: 15px;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer
}

button:hover {
  background-color: rgba(var(--color-brand-dark-gray), 0.50);
  border-color: rgba(var(--color-text), 0.5);
}

@media (prefers-color-scheme: dark) {
  button a:visited, a.button:visited {
    color: rgb(var(--color-text-contrast));
  }
}

input, textarea {
  border-color: lightgray;
  border-style: solid;
  border-radius: 5px;
  padding: 5px;
}

:is(input, textarea):focus {
  border-color: rgb(var(--color-brand-blue));
  box-shadow: 0 0 5px rgb(var(--color-brand-light-blue));
  outline: none;
}

@media (prefers-color-scheme: dark) {
  input, textarea {
    border-color: dimgray;
    background-color: rgb(var(--color-brand-light-gray));
  }

  :is(input, textarea):focus {
    border-color: black;
    box-shadow: 0 0 5px black;
  }
}