:root {
  color-scheme: light dark;
}

/* special settings for dark mode */
@media (prefers-color-scheme: dark) {
  /* make dark */
  :root {
    filter: invert() hue-rotate(330deg);
  }

  /* don't invert input fields */
  input {
    filter: invert() hue-rotate(-330deg);
  }
}

html {
  /* some constants */
  --qr-padding: 5px;
  --qr-grid-gap: .5rem 1rem;
  --qr-grid-min-width: 415px;
  --qr-upload-min-width: 230px;
  --qr-upload-select-min-width: 140px;
}

body {
  background: white;
  color:      black;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.4;
  margin: .8rem 0;
}

#Content {
  padding: 1rem;
  margin: 0 auto;
  max-width: 1000px;
}

.h1, h1 {
  text-align: center;
  font-size: calc(2rem + 0.5vw);
  line-height: 1.2;
}

.h2, h2, .accordion-button {
  text-align: center;
  font-size: calc(1.5rem + 0.5vw);
  font-weight: 500;
}

.h3, h3, .h4, h4 {
  text-align: left;
  margin-top: 0rem;
  font-size: calc(1rem + 0.2vw);
}

.accordion-header {
  margin: 0rem 0;
}

.accordion-body {
  padding: 2rem;
}

.profiles {
  margin-bottom: 1rem;
}

.profiles .form-control, .profiles .form-select {
  width: 10rem;
}

.profiles .btn {
  margin-top: -4px;
  width: 6.5rem;
}

#choice {
  margin-bottom: 1rem;
}

#choice-title {
  margin-bottom: 0.1rem;
  text-align: left;
}

#choice > div {
    margin-bottom: 0.1rem;
}

.row {
  padding: .4rem 0;
}

.col-4, .col-8 {
  min-width: 180px;
  width: 100%;
}

/* forms */
.highlight, .msg {
  margin: .5rem auto;
  padding: .5rem;
  border: 1px solid #ecece9;
  background: #f5f8f9;
  border-radius: 0.375rem;
}

.msg {
  border: 1px solid #e2e2df;
  background: #feeeee;
}

.msg p {
  margin-bottom: 0rem;
}

form {
  margin-block-end: 0rem;
}

.form-select, .form-control {
  display: inline-block;
  width: auto;
}

.iconPopover {
  padding-left: .5rem;
}

.iconPopover a {
  height: 2rem;
  width: 2rem;
  padding-top: .1rem;
  margin-top: -.3rem;
  border-radius: 50%;
  font-weight: bold;
  font-style: italic;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.2rem;
}

/* upload file */
div.uploadFile {
  display: grid;
  grid-gap: var(--qr-grid-gap);
  grid-template-columns: repeat(1);
  min-width: var(--qr-upload-min-width);
  max-width: 100%;
  padding-top: var(--qr-padding);
}

div.uploadFileItem:nth-child(1) {    /* Label */
  min-width: var(--qr-upload-select-min-width);
}

div.uploadFileItem:nth-child(2) {    /* Select */
  min-width: var(--qr-upload-min-width);
}

div.uploadFileItem:nth-child(3) {    /* Submit */
  padding-right: var(--qr-padding);
}

@media (min-width: 900px) {
  .profiles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }

  #choice {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 0.5rem;
    text-align: center;
  }

  .col-4 {
    width: 40%;
  }

  .col-8 {
    width: 60%;
  }

  /* upload file */
  div.uploadFile {
    grid-template-columns: repeat(auto-fit, minmax(var(--qr-upload-select-min-width), auto));
  }

  div.uploadFileItem:nth-child(1) { /* Label */
    margin-top: 11px;
    min-width: 250px;
  }

  div.uploadFileItem:nth-child(3) { /* Submit */
    text-align: right;
  }
}

/* fold / unfold multi-language support */
.details, .show-lang, .hide-lang:target {
  display: none;
}

.hide-lang:target + .show-lang, .hide-lang:target ~ .details {
  display: block;
}

/* status section */
div#statusContent {
  border: 1px solid;
  border-radius: 0.375rem;
  padding: 0 2rem;
}

/* status text */
p#status {
  text-align: left;
  font-size: small;
}

/* footer with version number */
#footer {
  font-size: small;
  font-style: italic;
  text-align: right;
}
