@font-face {
  font-family: "Font Awesome 6 Free Solid";
  src:
    /*local("Font Awesome 6 Free Solid"),*/
    url("/static/assets/fonts/fa-solid-900.ttf") format("TrueType");
}

:root {
  color-scheme: light dark;
  --bad-bg: light-dark(#ffa0a0, #903434);
  --warn-fg: light-dark(#a0a001, #f92);
  --pop-fg: light-dark(#000, #49a);
  --pop-bg: light-dark(#AAF, #334);
  --soft-pop-fg: light-dark(#566, #ffd);
  --main-bg: light-dark(#F8F8F8, #13131e);
  --main-fg: light-dark(#3c3c3c, #aaf);
  --soft-bg: light-dark(#c8c8c8, #334);
  --hard-fg: light-dark(#111, #cca);
  --admin-contrast-bg: light-dark(#A72, #fc4);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 14pt;
}

html {
  background-color: var(--main-bg);
  color: var(--main-fg);
  font-family: sans-serif;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

form {
  display: grid;
  grid-template-columns: auto auto;
}

form[hidden] {
  display: none;
}

form>* {
  margin: 0.25rem;
}

canvas {
  outline: none;
  width: 100%;
  height: 100%;
}

ul, ol {
  list-style-type: none;
  padding: 0;
}

input.unmatching {
  background-color: var(--bad-bg);
}

address {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-style: none;
}

address>* {
  margin: 1rem;
}

.icon {
  font-family: "Font Awesome 6 Free Solid", system-ui;
}

.provider-login-button {
  border: 3px solid var(--main-fg);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-radius: 5px;
  padding: 0.5rem 0.1rem 0.5rem 1.0rem;
  gap: 0.25rem;
  text-decoration: none;
}

.provider-login-button:link {
  color: var(--main-fg);
}

.provider-login-button:hover {
  background-color: var(--soft-bg);
  border-color: var(--hard-fg);
  color: var(--hard-fg);
}

.provider-login-button:link:hover {
  color: var(--hard-fg);
}

.provider-name {
  display: block;
}

.warn {
  color: var(--warn-fg);
}

.form-fullwidth {
  grid-column: 1 / -1;
  text-align: center;
}

.provider-logo-url {
  width: 2rem;
  height: 2rem;
}

#admin-nav-list {
  display: flex;
  flex-direction: row;
  background-color: var(--admin-contrast-bg);
  border-radius: 5px;
}

.nav-button {
  margin: 0;
}

@media(max-width: 600px) {
  #admin-nav-list {
    flex-direction: column;
  }

  .nav-button {
    display: block;
  }
}

section {
  margin: 0.25rem;
}

input[type="submit"], button, .button {
  margin: 0.5rem;
  font-size: inherit;
  text-decoration: none;
  color: var(--soft-pop-fg);
  padding: 0.5rem;
  border: 2px solid var(--soft-pop-fg);
  background-color: var(--soft-bg);
  border-radius: 0.25rem;
}

input[type="submit"]:hover, button:hover, .button:hover {
  background-color: var(--main-bg);
  color: var(--main-fg);
  border-color: var(--main-fg);
}

#admin-nav-list {
  margin: 0;
}

.nav-link {
  display: block;
  padding: 1rem;
}

.nav-link:any-link {
  color: black;
  text-decoration: none;
}

.nav-link:hover:any-link {
  background-color: var(--soft-bg);
  color: var(--main-fg);
}

.nav-button:first-child>.nav-link {
  border-radius: 4px 0 0 4px;
}

.nav-button:last-child>.nav-link {
  border-radius: 0 4px 4px 0;
}

#new-token-container {
  color: var(--pop-fg);
  padding: 1rem;
  background-color: var(--pop-bg);
  border-radius: 0.5rem;
  border: 1px solid var(--soft-pop-fg);
  max-width: 60%;
  overflow: scroll;
}

#new-token-container>code {
  text-wrap: wrap;
}