:root {
  color-scheme: dark light;
  --jmqc-darker: rgb(0,85,153);
  --jmqc-dark: rgb(34,119,187);
  --jmqc: rgb(68,153,221);
  --jmqc-light: rgb(68,153,221);
  --jmqc-lighter: rgb(102,187,255);
  --duration: 0.25s;
  --timing: ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: rgb(238,238,238);
    --background-color: rgb(34,34,34);
    --day-background: rgba(68,153,221,.42);
    --day-color: rgba(221,221,221,.9);
    --night-background: rgba(68,153,221,.24);
    --night-color: rgba(214,214,214,.9);
    --bg-jmqc-darker: rgba(18,93,153,0.8);
//    --bg-jmqc-dark: rgba(50,126,187,0.85);
    --bg-jmqc-dark: rgba(58,130,187,0.8);
    --bg-jmqc: rgba(88,162,221,0.8);
    --bg-jmqc-light: rgba(85,170,238,0.8);
    --bg-jmqc-lighter: rgba(102,187,255,0.8);
/*
    --bg-jmqc-darker: rgba(0,85,153,0.7);
    --bg-jmqc-dark: rgba(34,119,187,0.7);
    --bg-jmqc: rgba(68,153,221,0.7);
    --bg-jmqc-light: rgba(85,170,238,0.7);
    --bg-jmqc-lighter: rgba(102,187,255,0.7);
*/
    --link-color: rgba(204,204,204,0.8);
    --hover-color: rgb(221,221,221);
//    --active-color: rgb(238,238,238);
    --active-color: rgb(187,187,187);
    --border-color: rgb(221,221,221);
    --nav-background: rgba(43,123,187,0.8); /* 77 sat */
    --offcanvas-background: rgba(43,123,187,1); 
    --image-blend: rgba(0,85,153,0.4);
    --image-blend-mode: darken, overlay;

//    --image-filter: grayscale(0.75);
  }
  body { font-weight: 350; }
  img { filter: brightness(.95) contrast(1.05); }

//  .card { border: 1px solid #333; }


}

@media (prefers-color-scheme: light) {
  :root {
//    --color: rgb(34,34,34);
    --color: rgb(238,238,238);
    --background-color: rgb(250,250,250);
//    --day-background: rgba(254,254,254,1);
//    --day-background: rgba(102,187,255,0.9);
    --day-background: rgba(68,153,221,0.9);
//    --day-background: rgba(34,119,187,0.9);
//    --day-color: rgba(68,68,68,1);
    --day-color: rgba(221,221,221,1);
    --night-background: rgba(34,119,187,0.9);
    --night-color: rgba(221,221,221,1);
    --bg-jmqc-darker: rgba(0,85,153,0.7);
    --bg-jmqc-dark: rgba(34,119,187,0.7);
    --bg-jmqc: rgba(68,153,221,0.7);
    --bg-jmqc-light: rgba(85,170,238,0.7);
    --bg-jmqc-lighter: rgba(102,187,255,0.7);
    --link-color: rgba(221,221,221,0.8);
    --hover-color: rgb(204,204,204);
    --active-color: rgb(238,238,238);
    --border-color: rgb(221,221,221);
    --nav-background: rgba(34,119,187,0.8);
    --offcanvas-background: rgba(68,153,221,1);
    --image-blend: rgba(68,153,221,0.4);
    --image-blend-mode: overlay, lighten;
    --image-filter: grayscale(0%);
  }

//  .card { border: 1px solid #ddd; }

}

/* Fonts */
@font-face {
  font-display:swap;
  font-family: 'Miriam Libre';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/miriam-libre-v7-latin-700.woff2') format('woff2'),
       url('../fonts/miriam-libre-v7-latin-700.woff') format('woff'),
       url('../fonts/miriam-libre-v7-latin-700.ttf') format('truetype'),
       url('../fonts/miriam-libre-v7-latin-700.svg#MiriamLibre') format('svg');
}
@font-face {
  font-display:swap;
  font-family: 'Sen';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/sen-v2-latin-regular.woff2') format('woff2'),
       url('../fonts/sen-v2-latin-regular.woff') format('woff'),
       url('../fonts/sen-v2-latin-regular.ttf') format('truetype'),
       url('../fonts/sen-v2-latin-regular.svg#Sen') format('svg');
}

/* Media queries */
/* Toolbar */
@media (max-width: 991.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 100px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-image: url(../img/bg-europe.png);
    background-position: 50% 30%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--offcanvas-background);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    transition: transform .5s ease-in-out, visibility .5s ease-in-out;
  }
  .offcanvas-collapse.open { visibility: visible; transform: translateX(-100%); }
  .bg-jmqc-nav { background-color: transparent !important; }
}

/* Media queries (small/large, portrait/landscape) */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .webp .viewport { background-image: url(../img/jmqc42-sm.webp); }
  .no-webp .viewport { background-image: url(../img/jmqc42-sm.jpg); }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .webp .viewport { background-image: url(../img/jmqc42-md.webp); }
  .no-webp .viewport { background-image: url(../img/jmqc42-md.jpg); }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .webp .viewport { background-image: url(../img/jmqc42-lg.webp); }
  .no-webp .viewport { background-image: url(../img/jmqc42-lg.jpg); }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .webp .viewport { background-image: url(../img/jmqc42-xl.webp); }
  .no-webp .viewport { background-image: url(../img/jmqc42-xl.jpg); }
}

/* Extra extra large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
  .webp .viewport { background-image: url(../img/jmqc42-xxl.webp); }
  .no-webp .viewport { background-image: url(../img/jmqc42-xxl.jpg); }
}

/* Layout */
html { content: ""; /* (ab)using the content property */ }
html, body { overflow-x: hidden; /* Prevent scroll on narrow devices */ }
body {
  background-color: transparent;
  font-family: "Sen","Helvetica Neue",Helvetica,Arial,sans-serif;
//  padding-top: 100px; /* Height of navbar */
  position: relative;
  transition:
    color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
}
h1, h3, h4, h5, h6, .accordion-label {font-family: "Miriam libre", "Courier New", monospace; }
h1 { font-size:2rem !important; margin-top:.5rem !important; }

#httpStatus {vh: 100% }
#httpStatus .row, #support .row, #settings .row, #feature .row { max-width: 991px; }
#toolbar { font-family: "Miriam libre", "Courier New", monospace; font-size: 1.25rem; }
#toolbar .navbar-toggler { border: .2rem solid rgba(255,255,255,.6) !important; }

.icon a, .icon .icon-title { font-family: "Miriam libre", "Courier New", monospace; text-decoration: none; }
.icon .fas, .icon .icon-title { font-size: 3rem; }

.accordion-body h3.card-title { font-size: 1rem; }
.accordion-label { font-size: 1rem; margin-left: 1rem; }
.card { background-color: transparent; border: none;}

/* Navigation */
.nav-scroller { position: relative;
  height: 2.75rem;
  overflow-y: hidden;
  z-index: 2;
}
.nav-scroller .nav { 
  color: rgba(255, 255, 255, .75);
  display: flex;
  flex-wrap: nowrap;
  margin-top: -1px;
  overflow-x: auto;
  padding-bottom: 1rem;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
  font-size: .875rem;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
//.nav-underline .nav-link:hover { }
.navbar-toggler-icon { color: var(--link-color) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.nav-underline .active {
  font-weight: 500;
}
button:focus:not(:focus-visible) { outline-color: var(--link-color); }
.navbar-toggler:focus { box-shadow: 0 0 0 .15rem var(--link-color); }

/* Form */
textarea { resize: none; }
#message { height:12.819rem; }
.form-group { margin-bottom: 1rem; }
.form-control, .form-control:focus{ background-color: transparent !important; color: var(--color); }
.form-control {
  border: transparent;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0rem;
}
.btn-xl { background-color: rgba(255,255,255,.2); color: #eee; }
.btn-xl:hover, .btn-xl:focus { background-color: rgba(255,255,255,.3); color: #fff; }

/* Theme */
html { background-color: var(--background-color); color: var(--color); }
a, .nav-link { color: var(--link-color); }
a:hover, .nav-link:hover { color: var(--hover-color); }
a.active, nav-link.active { color: var(--active-color); }

#kb, #contact, #settings { background-color: var(--bg-jmqc-dark); padding-bottom: 2rem; }
#contact { background-attachment: fixed; background-position: 50% 220%; }

.day { background-color: var(--day-background); color: var(--day-color); }
.night { background-color: var(--night-background); color: var(--night-color); }

.bg-jmqc-lighter { background-color: var(--bg-jmqc-lighter); }
.bg-jmqc-light { background-color: var(--bg-jmqc-light); }
.bg-jmqc { background-color: var(--bg-jmqc); }
.bg-jmqc-dark { background-color: var(--bg-jmqc-dark); }
.bg-jmqc-darker { background-color: var(--bg-jmqc-darker); }
.bg-jmqc-nav { background-color: var(--nav-background); }
.bg-security, .bg-europe, .bg-world { background-attachment: scroll; background-repeat: no-repeat; }
.bg-security { background-image: url(../img/bg-security.png); background-position: 100% 50%; }
.bg-europe { background-image: url(../img/bg-europe.png); background-position: 50% 50%; }
.bg-world { background-image: url(../img/bg-world.png); background-position: 50% 20%; }
main.viewport { 
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  padding-top:100px;
}

//.no-webp .viewport { background-image: url(../img/jmqc42-xs.jpg); }
.webp .viewport {
  background-image:
    linear-gradient(var(--image-blend), var(--image-blend)),
    url(../img/jmqc42-xxl.webp);
  background-blend-mode: var(--image-blend-mode);
}
.no-webp .viewport {
  background-image:
    linear-gradient(var(--image-blend), var(--image-blend)),
    url(../img/jmqc42-xxl.jpg);
  background-blend-mode: var(--image-blend-mode);
}
#settings .accordion {
  min-height: 25rem;
}
.accordion-body h3.card-title { font-size: 1rem; }
.card, .accordion-button.collapsed { color: var(--link-color); }
.accordion-button:not(.collapsed) { background-color: var(--bg-jmqc); color: var(--link-active); }
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23eeeeee'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dddddd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.text-white-50 { color: rgba(255, 255, 255, .5); }