/*************************************************************************************************/
/*************************************************************************************************/
:root {
    --c-fontfamily-regular:"Open Sans Regular", sans-serif;
    --c-fontfamily-semibold:"Open Sans Semibold", sans-serif;
    --c-maxwidth-window:1280px;
    --c-maxwidth-content:768px;
/*************************************************************************************************/
    --c-color-theme:hsl(213, 80%, 40%);
    --c-color-hover:hsl(33,  80%, 50%);
/*************************************************************************************************/
    --c-color-black: hsl(0, 0%,   0%);
    --c-color-gray-1:hsl(0, 0%,  10%); /* dark:  text */
    --c-color-gray-2:hsl(0, 0%,  30%); /* dark:  background */
    --c-color-gray-3:hsl(0, 0%,  95%); /* light: background */
    --c-color-white: hsl(0, 0%, 100%);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:hsl(0 0% 0% / 0); -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; }
/*************************************************************************************************/
body { -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none; }
h1, h2, h3 { margin:unset; font-weight:unset; font-size:unset; }
p { margin:unset; }
button { margin:unset; padding:unset; background:unset; border:unset; outline:unset; font-family:inherit; font-size:unset; cursor:pointer; }
input { margin:unset; padding:unset; border:unset; outline:unset; font-family:inherit; font-size:unset; }
/* hide arrows of input[type=number] */
input[type=number] { -webkit-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; appearance:none; }
textarea { margin:unset; padding:unset; border:unset; outline:unset; font-family:inherit; font-size:unset; }
fieldset { margin:unset; padding:unset; border:unset; }
em { font-style:unset; }
/*************************************************************************************************/
@font-face { font-family:"Open Sans Regular"; font-style:normal; font-weight:400; font-display:swap; src:local("Open Sans Regular"), local("OpenSans-Regular"), url("https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Open Sans Semibold"; font-style:normal; font-weight:600; font-display:swap; src:local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url("https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/*************************************************************************************************/
:root { /* variables for light/dark scheme */
    --background-color:var( --c-color-gray-3);
    --box-shadow-color:var(--c-color-gray-1);
}
/*************************************************************************************************/
h1, h2 { margin:0; font-family:var(--c-fontfamily-regular); color:var(--c-color-white); }
h1 { margin-bottom:0.5em; font-size:1.8em; text-transform:uppercase; }
h2 { margin-bottom:2em; font-size:1.2em; }
/*************************************************************************************************/
body { width:100%; max-width:var(--c-maxwidth-window); height:100vh; margin:0 auto; padding:0; display:flex; flex-direction:column; overflow-y:hidden; background-color:var(--background-color); font-family:var(--c-fontfamily-regular); font-size:1em; }
/*************************************************************************************************/
header { width:100%; height:3rem; padding:0 1em; position:relative; display:flex; justify-content:space-between; align-items:center; background-color:var(--c-color-theme); box-shadow:0 0 8px 0 var(--box-shadow-color); -webkit-user-select:none; user-select:none; z-index:1; }
header h2 { margin:0; font-family:var(--c-fontfamily-semibold); }
header a { height:100%; }
header img { height:100%; }
main { flex-grow:1; display:flex; justify-content:center; align-items:center; overflow-y:scroll; background-color:var(--c-color-white); box-shadow:0 0 8px 0 var(--box-shadow-color); }
main.cls-notfound { justify-content:center; align-items:center; flex-direction:column; }
main.cls-notfound > div { max-width:500px; width:100%; min-height:350px; position:relative; background-image:url("notfound.svg"); background-position:top; background-size:contain; }
main.cls-notfound > div > div { position:absolute; top:0; bottom:0; left:0; right:0; background-image:url("notfound-eyes.svg"); background-position:top; background-size:contain; }
/*************************************************************************************************/
@media only screen and (max-width:1024px) {
    body { font-size:0.9em; }
}
@media only screen and (max-width:768px) {
    main { justify-content:flex-start; flex-direction:column; }
}
@media only screen and (max-width:667px) {
    h1 { font-size:1.6em; }
    h2 { font-size:1.1em; }
}
/*************************************************************************************************/
@media (prefers-color-scheme: dark) {
    :root {
        --background-color:var(--c-color-gray-2);
        --box-shadow-color:var(--c-color-black);
    }
}
@keyframes loader {
    from { transform:rotate(0deg);   opacity:1; }
    to   { transform:rotate(360deg); opacity:1; }
}