/* automatic dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: black;
  }
}

/* manual dark mode */
.dark {
  color: white;
  background-color: black;
}

body {
  /*font-family: sans-serif;
  */
  font-family: -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;

  line-height: 150%;
  text-align: center;
}
.small {
  font-size: 12px;
}
#results {
  list-style-type: none;
  padding: 0;
}
ul {
  list-style-position: inside;
}
#results > li {
  margin: 0 auto 5px;
  padding: 5px;
}
#results img {
  border-radius: 5px;
  /*max-width: calc(100vw - 32px);
  */max-width: 100%;
  border: 1px solid #808080;
}
.short-number {
  width: 45px;
}
.load-error {
  color: red;
  border-radius: 5px;
  max-width: 40vw;
  border: 1px solid red;
}
.long-field {
  width: 30em;
}
/* for pattern attribute */
.long-field:required:invalid:not(:placeholder-shown) {
  background-color: lightpink;
}

.fade-in {
  opacity: 0;
  animation: fadeInAnimation cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.4s;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}
/*
.fade-in {
  opacity: 0;
  transform: translateY(-100%) translateX(0);
  animation: slideInFrom 250ms cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms forwards;
}
@keyframes slideInFrom{ to {  transform: unset; opacity: unset; } }
*/