/** Theme Colours **/
.theme {
    color-scheme: light;
    --bg-main: #fff;
    --h1: #ffa0bb;
    --h2: #4a2eac;
    --h3: #567;
    --h4: #89a;
    --h5: #794c9e;
    --h6: #944c4c;
    --text: #002;
    --link: #00a;
    --link-hover: #66f;
    --link-active: #ff4;
    --link-focus: #67f;
    --border-strong: #234;
    --border-mid: #789;
    --border-light: #9ab;
    --header-h1-bg: rgba(255, 255, 255, 0.74);
    --header-bg: rgba(51, 51, 153, 0.82);
    --header-txt: #fff;
    --footer-bg: #127;
    --footer-txt: #aaf;
    --footer-link: #fff;
    --footer-link-hover: #4f4;
    --footer-link-active: #aa4;
    --footer-link-focus: #484;
    --menu-button-bg: #e9eff8;
    --menu-button-bg-hover: #05cd2d;
    --menu-button-hover: #fff;
    --menu-button-border: #345;
    --menu-button-border-hover: #fff;
    --menu-icon: #345;
    --menu-icon-hover: #113;
    --menu-icon-active: #002;
    --menu-icon-focus: #116;
    --menu-drawer-bg: #eef;
    --menu-drawer-shadow: rgba(0, 0, 0, 0.5);
    --menu-divider: #77a;
    --menu-item-bg: none;
    --menu-item-bg-hover: #aaaacf;
    --menu-item: #345;
    --menu-item-hover: #113;
    --switch-lang-bg: rgba(255, 255, 255, 0.8);
    --switch-lang-bg-hover: #eee;
    --swithc-lang-text: #000;
    --switch-lang-text-hover: #171776;
    --switch-lang-border-hover: #c00a74;
    --switch-lang-current-text: #3131af;
    --switch-lang-current-border: var(--switch-lang-current-text);
    --msg-box-bg: rgba(255, 255, 255, 0.52);
    --msg-no-js-text: #dc143c;
}
@media (prefers-color-scheme: dark) {
    .theme {
        color-scheme: dark;
        --bg-main: #234;
        --h1: #ffa0bb;
        --h2: #6d48f6;
        --h3: #edc;
        --h4: #9ab;
        --h5: #bc77f5;
        --h6: #f17c7c;
        --text: #f5f9fc;
        --link: rgb(109, 109, 250);
        --link-hover: rgb(16, 16, 250);
        --link-active: #ff4;
        --link-focus: #67f;
        --border-strong: #c3ddf7;
        --border-mid: rgb(94, 138, 183);
        --border-light: #9ab;
        --header-h1-bg: rgba(10, 10, 90, 0.74);
        --header-bg: rgba(32, 32, 96, 0.82);
        --header-txt: #fff;
        --footer-bg: #127;
        --footer-txt: #aaf;
        --footer-link: #fff;
        --footer-link-hover: #4f4;
        --footer-link-active: #aa4;
        --footer-link-focus: #484;
        --menu-button-bg: #5b5d60;
        --menu-button-bg-hover: #05cd2d;
        --menu-button-hover: #fff;
        --menu-button-border: #345;
        --menu-button-border-hover: #fff;
        --menu-icon: #345;
        --menu-icon-hover: #e1e1ef;
        --menu-icon-active: rgb(162, 162, 228);
        --menu-icon-focus: rgb(100, 100, 245);
        --menu-drawer-bg: #114;
        --menu-drawer-shadow: rgba(255, 255, 255, 0.5);
        --menu-divider: #77a;
        --menu-item-bg: none;
        --menu-item-bg-hover: #3a3a4b;
        --menu-item: #345;
        --menu-item-hover: #113;
        --switch-lang-bg: #232227;
        --switch-lang-bg-hover: #a5c8f3;
        --switch-lang-text: #e3def5;
        --switch-lang-text-hover: #302d3b;
        --switch-lang-border-hover: #d468a7;
        --switch-lang-current-text: #7e7eeb;
        --switch-lang-current-border: var(--switch-lang-current-text);
        --msg-box-bg: rgba(36, 36, 44, 0.52);
        --msg-no-js-text: #f79eb0;
    }
}


/** Standard Elements **/
body {
    background-color: var(--bg-main);
    color: var(--text);
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 0;
}
h1 {
    color: var(--h1);
    font-family: 'Permanent Marker', cursive;
    font-size: 4.2rem;
    font-weight: bold;
}
h2 {
    color: var(--h2);
    font-family: 'ubuntu', sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
}
h3 {
    color: var(--h3);
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
}
h4 {
    color: var(--h4);
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.4rem;
    font-style: italic;
}
h5 {
    color: var(--h5);
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
}
h6 {
    color: var(--h6);
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.1rem;
    font-style: italic;
}

/** -- Content Grouping Elements **/
header {
    margin: 0;
}

main {
    background-color: var(--msg-box-bg);
    height: 100vh;
    margin: 0;
    overflow: scroll;
    padding: .8rem 1.4rem 6.5rem 1.4rem;
}

footer {
    background-color: var(--footer-bg);
    border-radius: .5rem 0 0 0;
    bottom: 0;
    color: var(--footer-txt);
    margin: 0;
    padding: 0;
    position: fixed;
    right: 0;
}


/** Block Contents **/
/** - Header **/
header h1 {
    font-size: 0;
}

.header-slogan {
    background-color: var(--header-bg);
    color: var(--header-txt);
    font-size: 1.4rem;
    margin: 0;
    padding: .5rem 1.4rem .8rem 2rem;
}

#lang-switcher {
    background: var(--switch-lang-bg);
    font-size: .8rem;
    padding: .2rem .4rem .3rem 2rem;
}

/** - Main **/
article#maintenance-message {
    background-color: var(--msg-box-bg);
    border-radius: .4rem;
    margin: auto;
    max-width: 580px;
    padding: 0 0 1rem 0;
}
article#maintenance-message h2 {
    background-color: var(--msg-box-bg);
    border-bottom: 3px solid var(--h2);
    border-radius: .4rem .4rem 0 0;
    box-shadow: 0 4px 8px rgba(100, 100, 160, 0.2);
    font-size: 2.6rem;
    padding: .2rem 1.4rem .5rem 1.4rem;
}
article#maintenance-message h2 span[lang="de"],
article#maintenance-message h2 span[lang="es"] {
    font-size: 1.9rem;
}
article#maintenance-message h3 {
    border-bottom: 1px solid var(--h3);
    padding: .2rem 1.4rem .5rem 1.4rem;
}
article#maintenance-message p {
    margin: 0;
    padding: .2rem 1.4rem .8rem 1.4rem;
}
article#maintenance-message div.lang p {
    font-size: 1.3rem;
    line-height: 1.6rem;
}
article#maintenance-message img {
    border: transparent 2px solid;
    text-align: center;
    text-decoration: none;
}
article#maintenance-message img:hover {
    border: rgb(35, 208, 15) 2px solid;
    box-shadow: 0 0 4px 8px rgba(35, 35, 35, .5);
}
article#maintenance-message img {
    display: block;
    margin: auto;
    max-width: 220px;
}

/** - Footer **/
footer p {
    font-size: .7rem;
    margin: 0;
    padding: .3rem .6rem;
    text-align: right;
}
footer p a {
    color: var(--footer-link);
    text-decoration: none;
}
footer p a:visited {
    color: var(--footer-link);
}
footer p a:hover {
    color: var(--footer-link-hover);
}
footer p a:focus {
    color: var(--footer-link-focus);
}
footer p a:active {
    color: var(--footer-link-active);
}


/** Block Elements **/
#lang-switcher label,
#lang-switcher ul,
#lang-switch li,
#lang-switch p {
    display: inline-block;
    margin: 0;
}
#lang-switcher label {
    color: var(--switch-lang-text);
    font-weight: 600;
    padding-right: .54rem;
}
#lang-switch ul {
    padding: 0;
}
#lang-switch li {
    border-left: transparent 4px solid;
    cursor: pointer;
    padding: .2rem .4rem;
    transition: all .2s ease-in-out;
    width: 4rem;
}
#lang-switch li:hover {
    background-color: var(--switch-lang-bg-hover);
    border-left: 4px solid var(--switch-lang-border-hover);
    color: var(--switch-lang-text-hover);
    font-weight: 600;
    transition: all .2s ease-in-out;
}
#lang-switch .current,
#lang-switch .current:hover {
    background: transparent url(../images/check.mark.svg) no-repeat center right;
    background-size: contain;
    border-left: 4px solid var(--switch-lang-current-border);
    color: var(--switch-lang-current-text);
    cursor: default;
    font-weight: bold;
    margin-right: .5rem;
    width: 5.4rem;
}
#no-js-msg {
    color: --msg-no-js-text;
    display: inline-block;
    font-family: 'Caveat', cursive;
    font-weight: 500;
}


/** Special Elements **/
#maintenance-body {
    background: url('../images/teacher.jason_bg_1.webp') no-repeat center right;
    background-size: cover;
}

.tja-brand {
    font-family: 'Permanent Marker', cursive;

}
.tj-sig {
    display: block;
    font-family: 'Permanent Marker', cursive;
    font-size: 2.4rem;
    line-height: 2rem;
    text-align: right;
}
.brand-teacher {
    color: #ffa0bb;
}
.brand-jason {
    color: #3763c4;
}
.brand-cj {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.2em;
}
.brand-cj:hover {
    display: inline-block;
    text-shadow: 0 0 1px #d0ff00;
    transform: rotate(-3deg);
    transition: all .2s ease-in-out;
}
.brand-cj-coder {
    color: #777;
    font-style: italic;
    font-weight: 800;
}
.brand-cj-coder span {
    display: inline-block;
    font-size: 2.4rem;
    transform: translate(.2rem, .45rem);
}
.brand-cj-jason {
    color: #fff;
    font-weight: 200;
}


/** Common Selectors **/
.hide,
#lang-switch li.hide,
#no-js-msg.hide {
    display: none;
}


/** Device Specific **/
@media screen and (max-width: 680px) {
    .header-slogan {
        font-size: 1.2rem;
        padding: .4rem 1rem .6rem .8rem;
    }

    article#maintenance-msg {
        margin-bottom: 13rem;
    }
}