@font-face {
  font-family: 'Open Sans';
  src: url('@/assets/fonts/OpenSans.ttf');
}

@font-face {
  font-family: 'Open Sans';
  src: url('@/assets/fonts/OpenSans-Italic.ttf');
  font-style: italic;
}

@font-face {
  font-family: 'SourceCodePro';
  src: url('@/assets/fonts/SourceCodePro.ttf');
}

@font-face {
  font-family: 'SourceCodePro';
  src: url('@/assets/fonts/SourceCodePro-Italic.ttf');
  font-style: italic;
}

:root {
  color-scheme: light dark;
  font-family: 'Open Sans', sans-serif;
}

.button-bar {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.button-bar > * + * {
  margin-left: 0.5em;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

.centered-content {
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

code {
  font-family: 'SourceCodePro', monospace;
  color: lime;
}

.text-mono {
  font-family: 'SourceCodePro', monospace;
}

label {
  display: block;
}

textarea {
  font-family: 'SourceCodePro', monospace;
  font-size: smaller;
}

button {
  font-family: 'Open Sans', sans-serif;
}

.link {
  text-decoration: none;
  color: inherit;
}
.link:hover {
  text-decoration: underline;
  color: lightgray;
}
.link-color {
  color: rgb(165, 210, 253);
}
.link-color:hover {
  color: rgb(95, 121, 190);
}
.link-ext {
  color: rgb(158, 255, 134);
}
.link-ext:hover {
  color: rgb(110, 179, 93);
}

form > div + div {
  margin-top: 0.5em;
}

.form-input-hint {
  font-size: smaller;
  font-style: italic;
  margin-top: 0.25em;
}

.app-header {
  text-align: center;
}
.app-header > h1 {
  margin-bottom: 0.5em;
}
