/* 
Author:        William Gorden
Date:		   01.01.2021
Description:   style sheet for main website
*/

/* =========================================================
   default values for 'light' color theme
   ========================================================= */
html {
    color-scheme: light;
    /* Light Mode colors */
    --bg-header: #d2d2d2;
    --bg-footer: #d2d2d2;
    --bg-maina: #ebebeb;
    --bg-mainb: #d8e7e6;
    --bg-sidemenu: rgba(100, 100, 100, 0.2);
    --bg-menulevel1: #b6b0b0;
    --bg-menulevel2: #ada7a7;
    --bg-menulevel3: #9b9393;
    --bg-card-a: #bbcac9;
    --bg-card-b: #ebebeb;
    --bg-activelink: #9b9393;
    --bg-input: #ebebeb;
    --bg-input-active: #c3c3c3;
    --bg-submit: #d2d2d2;
    --bg-submitborder: #353535;
    --fg-line-separator: #0000bb;
    --fg-header: #094f6d;
    --fg-main: #000000;
    --fg-footer: #094f6d;
    --fg-copywrite: #505050;
    --fg-menu: #094f6d;
    --fg-link: #094f6d;
    --fg-active: #06CE00;
}

/* =========================================================
   default values for 'dark' color theme
   ========================================================= */
html[color-theme='dark'] {
    color-scheme: dark;
    /* Dark Mode colors */
    --bg-header: #151515;
    --bg-footer: #151515;
    --bg-maina: #353535;
    --bg-mainb: #2b2b2b;
    --bg-sidemenu: rgba(210, 210, 210, 0.2);
    --bg-menulevel1: #202020;
    --bg-menulevel2: #303030;
    --bg-menulevel3: #404040;
    --bg-card-a: #374649;
    --bg-card-b: #353535;
    --bg-activelink: #404040;
    --bg-input: #a1a1a1;
    --bg-submit: #151515;
    --bg-submitborder: #151515;
    --fg-line-separator: #00007a;
    --fg-header: #4a8899;
    --fg-footer: #4a8899;
    --fg-main: #b3b3b3;
    --fg-copywrite: #505050;
    --fg-menu: #4a8899;
    --fg-link: #4a8899;
    --fg-active:rgba(173, 255, 47, 1.0);
}

/* =========================================================
   default values for fonts
   ========================================================= */
html {
    /* font sizes */
    --fs-header: 1.125rem;
    --fs-main: 1.125rem;
    --fs-footer: 1.125rem;
    --fs-logo: 1.5rem;
    --fs-logo-mobile: 1.375rem;
    --fs-menu: 1.25rem;
    --fs-menuheader: 0.875rem;
    --fs-texteditor: 1rem;
    --fs-h1: 1.625rem;
    --fs-h2: 1.375rem;
    --fs-h3: 1.25rem;
    --fs-h4: 1.25rem;
    --fs-h5: 1.25rem;
    --fs-h6: 1.25rem;
    --fs-copywrite: 0.875rem;
    /* font weights */
    --fw-header: normal;
    --fw-main: normal;
    --fw-footer: normal;
    --fw-logo: normal;
    --fw-menu: normal;
    --fw-normal: normal;
    --fw-active: bold;
    --fw-h1: bold;
    --fw-h2: bold;
    --fw-h3: bold;
    --fw-h4: bold;
    --fw-h5: normal;
    --fw-h6: normal;
    --fw-copywrite: bold;
}

/* =========================================================
   default values for everything
   ========================================================= */
* {
    /* sizes */
    margin: 0;
    padding: 0;
    /* font */
    font-family: 'Times New Roman', Times, serif;
}

/* =========================================================
   default values for text
   ========================================================= */
h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-h1);
    line-height: 1.5;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-h2);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-h3);
}

/* =========================================================
   default values for lists
   ========================================================= */
ul {
    list-style-type: none;
}

/* =========================================================
   default values for links
   ========================================================= */
a {
    color: var(--fg-link);
    text-decoration: none;
    border-radius: 0.25em;
    border: 1px solid transparent;
}

a:hover,
a:focus,
a:active {
    font-weight: bold;
    background-color: var(--bg-menulevel2);
    border: 1px solid var(--fg-menu);
}

/* =========================================================
   default values for symbols, menu icons, etc.
   ========================================================= */
.ge_symbols {
    font-family: 'Material Icons';
}

.ge_flagimage {
    height: 0.875rem;
    margin-bottom: 0.375rem;
}

.ge_menuimage {
    height: 1.6rem;
    margin-bottom: 0.375rem;
}

/* =========================================================
   default values for borders, padding, margins
   ========================================================= */
.ge_border_top {
    border-top: 1px solid var(--bg-menulevel3);
}

.ge_border_bottom {
    border-bottom: 1px solid var(--bg-menulevel3);
}

.ge_border_left {
    border-left: 1px solid var(--bg-menulevel3);
}

.ge_border_right {
    border-right: 1px solid var(--bg-menulevel3);
}

.ge_border_red {
    /* sizes */
    border: 1px solid red;
}

.ge_structure_paddingleft {
    padding-left: 10px;
}

.ge_structure_paddingright {
    padding-right: 10px;
}

.ge_structure_paddingtop {
    padding-top: 10px;
}

.ge_structure_paddingbottom {
    padding-bottom: 10px;
}

.ge_structure_marginleft {
    margin-left: 20px;
}

.ge_structure_marginright {
    margin-right: 20px;
}

.ge_structure_margintop {
    margin-top: 20px;
}

.ge_structure_marginbottom {
    margin-bottom: 20px;
}

/* =========================================================
   shut something down!
   ========================================================= */
.no-show {
    display: none;
}

/* =========================================================
   main body section of the entire html page
============================================================*/
body {
    display: flex;
    flex-direction: column;
    /* sizes */
    width: 100vw;
    height: 100vh;
    /* font */
    font-size: var(--fs-main);
    font-weight: var(--fw-main);
    /* colors */
    background-color: var(--bg-header);
}

/* =========================================================
   header section, Logo
============================================================ */

header {
    flex-grow: 0;
    /* sizes */
    width: 100%;
    /* colors */
    color: var(--fg-header);
    background-color: var(--bg-header);
    border-bottom: 3px solid var(--fg-line-separator);
}

header .ge_structure_header_container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    /* sizes */
    max-width: 70rem;
    min-height: 3.125rem;
    margin: 0 auto;
    padding: 0;
    /* border: 1px solid red; */
}

header a {
    /* position */
    display: block;
    /* sizes */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    /* font */
    /* font-size: var(--fs-menu); */
    text-align: center;
    text-decoration: none;
    /* colors */
    color: var(--fg-menu);
}

header .ge_structure_logo {
    /* position */
    position: relative;
    /* sizes */
    height: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding: 0;
    /* font */
    font-size: var(--fs-logo);
    font-weight: var(--fw-logo);
    /* colors */
    color: var(--fg-header);
}

header .ge_structure_logobox {
    /* position */
    position: relative;
    display: inline;
    /* sizes */
    height: 100%;
    margin: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    /* font */
    /* font-size: var(--fs-logo); */
    /* font-weight: var(--fw-logo); */
    text-align: left;
    vertical-align: middle;
}

header .ge_structure_shortlogo {
    display: none;
}

header .ge_structure_mainmenu {
    /* position */
    position: relative;
    /* sizes */
    height: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0;
    margin-bottom: 0.625rem;
    padding: 0;
    /* font */
    font-size: var(--fs-menu);
    font-weight: var(--fw-menu);
    /* colors */
    color: var(--fg-header);
}

header .ge_structure_mainmenubox {
    /* position */
    position: relative;
    display: inline;
    /* sizes */
    height: 100%;
    margin: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    /* font */
    /* font-size: var(--fs-menu);
    font-weight: var(--fw-menu); */
    text-align: left;
    vertical-align: middle;
}


/* =========================================================
   main section
============================================================ */

main {
    flex-grow: 1;
    overflow: hidden;
    /* sizes */
    width: 100%;
    /* font */
    font-size: var(--fs-main);
    line-height: 1.5;
    /* colors */
    color: var(--fg-main);
    background-color: var(--bg-maina);
}

/* =========================================================
   footer section
============================================================ */

footer {
    flex-grow: 0;
    /* sizes */
    width: calc(100% - 20px);
    height: fit-content;
    min-height: 4rem;

    text-align: left;
    /* overflow: auto; */

    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
    /* -webkit-app-region: drag; */
    /* cursor: move; */
    user-select: none;
    color: var(--fg-footer);
    background-color: var(--bg-footer);
    border-top: 3px solid var(--fg-line-separator);
}

footer[footer-type='App'] {
    height: fit-content;
    min-height: 3.5rem;
}

.ge_structure_footercontainer {
    float: left;
    /* justify-content: center; */
    width: calc(100% - 4rem);
    height: fit-content;
    text-align: center;
    /* overflow: auto; */
    user-select: none;
}

.ge_structure_footercontainer[footer-type='App'] {
    width: 100%;
    max-width: 100%;
    height: fit-content;
}

.ge_structure_footercontent {
    position: relative;
    /* float: left; */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* width: calc(100% - 20rem); */
    height: fit-content;
    padding-bottom: 10px;
    /* min-height: 3.5rem; */
}



/* =========================================================
   structural html elements
============================================================ */
.ge_structure_container {
    /* sizes */
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

.ge_structure_splitcontainer_horizontal {
    display: flex;
    flex-direction: row;
    /* sizes */
    width: 100%;
    height: 100%;
}

.ge_structure_panel_left {
    flex-grow: 0;
    width: 30%;
    min-width: 14rem;
    height: 100%;
    /* border: 1px solid red; */
}

.ge_structure_panel_right {
    flex-grow: 1;
    /* width: calc(70% - 20px); */
    min-width: 15rem;
    height: 100%;
    /* border: 1px solid red; */
}

.ge_structure_panel {
    width: 100%;
    height: 100%;
}

.ge_structure_sizedpanel {
    width: 100%;
    height: fit-content;
}

.ge_structure_splitcontainer_vertical {
    display: inline-grid;
    grid-template-rows: 2.5rem auto;
    gap: 0;
    /* sizes */
    width: 100%;
    height: 100%;
}

.ge_structure_3partcontainer_vertical {
    display: inline-grid;
    grid-template-rows: 2.5rem auto auto;
    align-content: start;
    gap: 0;
    /* sizes */
    width: 100%;
    height: 100%;
}

.ge_structure_scrollcontainer {
    overflow-x: scroll;
    overflow-y: scroll;
    width: calc(100% - 20px);
    height: fit-content;
    max-height: 100%;
    /* border: 1px solid darkgreen; */
}

.ge_structure_scrollcontainer_vertical {
    overflow-x: hidden;
    overflow-y: scroll;
    width: calc(100% - 2px);
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    /* border: 1px solid darkgreen; */
}

.ge_structure_scrollcontainer_horizontal {
    overflow-x: scroll;
    /* sizes */
    height: 100%;
    margin-right: 20px;
}

.ge_structure_scrollcontainer_space_left {
    padding-left: 20px;
}

.ge_structure_scrollcontent {
    white-space: nowrap;
    /* sizes */
    width: fit-content;
    height: fit-content;
    min-height: 100%;
    margin-right: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 100px;
}

.ge_structure_scrolllistcontent {
    white-space: nowrap;
    overflow: hidden;
    /* sizes */
    width: 100%;
    height: fit-content;
    padding-bottom: 100px;
}

.ge_structure_objectcontainer {
    display: "block";
    width: calc(100% - 2px);
    max-height: 100%;
    min-height: 100%;
}

.ge_structure_separator_vertical {
    flex-grow: 0;
    width: 3px;
    min-width: 3px;
    /* colors */
    background-color: var(--fg-line-separator);
}

 /* =========================================================
   content header elements
============================================================ */

.ge_structure_header {
    width: calc(100% - 20px);
    /* width: 100%; */
    height: 2.5rem;
    text-align: left;
    overflow: auto;
    padding-top: 0;
    padding-left: 10px;
    padding-right: 10px;
    /* -webkit-app-region: drag; */
    /* cursor: move; */
    user-select: none;
    background-color: var(--bg-header);
}

.ge_structure_headertext {
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 3rem);
    height: 2.2rem;
    margin-top: 2px;
    padding-top: 2px;
    /* background-color: var(--bg-menulevel2); */
}

.ge_structure_headerbutton {
    float: right;
    text-align: center;
    margin-left: 6px;
    margin-top: 5px;
    /* -webkit-app-region: no-drag; */
    cursor: default;
    font-weight: var(--fw-normal);
    color: var(--fg-link);
    border-radius: 0.25em;
}

.ge_structure_headerbutton:hover,
.ge_structure_headerbutton:active,
.ge_structure_headerbutton:focus {
    background-color: var(--bg-menulevel2);
    border: 1px solid var(--fg-menu);
}

.ge_structure_headerbutton a {
    padding: 6px 7px;
    font-weight: var(--fw-normal);
}

.ge_structure_headerbutton a:hover,
.ge_structure_headerbutton a:active,
.ge_structure_headerbutton a:focus {
    font-weight: var(--fw-active);
    background-color: transparent;
    border: 0px solid transparent;
}

/* =========================================================
   path element
============================================================ */
.ge_structure_pathcontainer {
    float: right;
    width: calc(100% - 60px - 2rem);
    text-align: center;
    user-select: none;
}

.ge_structure_pathtext {
    position: relative;
    height: 2.2rem;
    margin-top: 2px;
    padding-top: 2px;
}
.ge_structure_pathlink {
    outline-style: none;
    padding: 0.25em;
    border-radius: 0.25em;
    cursor: pointer;
    color: var(--ge_markdown_fg-link);
    border: 1px solid transparent;
}
.ge_structure_pathlink:hover,
.ge_structure_pathlink:focus {
    font-weight: bold;
    border: 1px solid var(--ge_markdown_fg-link);
    background-color: var(--ge_markdown_bg-activelink)
}

/* =========================================================
   menu bar for wide screen
============================================================ */

.ge_structure_menubar {
    /* sizes */
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 0;
    /* padding-top: 0.625rem;
    padding-bottom: 0.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem; */
}

.ge_structure_menubar ul {
    /* position */
    position: relative;
    z-index: 98;
}

.ge_structure_menubar ul li {
    /* position */
    float: left;
    z-index: 99;
}

.ge_structure_menubar ul li a {
    /* position */
    display: block;
    z-index: 100;
    /* sizes */
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    /* font */
    font-size: var(--fs-menu);
    font-weight: var(--fw-menu);
    /* colors */
    color: var(--fg-menu);
}

.ge_structure_menubar ul ul {
    /* position */
    display: none;
    position: absolute;
    /* sizes */
    top: 42px;
    margin-left: -2.9rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    /* colors */
    background-color: var(--bg-menulevel2);
    border: 1px solid var(--bg-header);
    /* animate the fademenu menus */
    animation: fademenu 300ms forwards;
    transform-origin: top center;
    z-index: 102;
}

.ge_structure_menubar ul li:hover>ul,
.ge_structure_menubar ul li:focus>ul {
    /* position */
    display: inherit;
    z-index: 103;
    /* colors */
    background-color: var(--bg-menulevel1);
}

.ge_structure_menubar ul ul li {
    /* position */
    display: list-item;
    float: none;
    /* sizes */
    min-width: 10rem;
    z-index: 104;
    /* colors */
    background-color: var(--bg-menulevel1);
    /* border: 1px solid blue; */
}

.ge_structure_menubar ul ul li a {
    text-align: left;
    /* sizes */
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    z-index: 105;
    /* colors */
    /* border: 1px solid red; */
}

.ge_structure_menubar_wide {
    display: block;
    z-index: 107;
}

.ge_structure_menubar_narrow {
    display: none;
    z-index: 108;
}

.ge_structure_menubar_phone {
    display: none;
    z-index: 109;
}

/* =========================================================
   buttons for movement in a document
============================================================ */

.ge_structure_sidetop {
    display: block;
    position: fixed;
    z-index: 120;
    right: 10px;
    top: 7.5rem;
    border-radius: 0.25rem;
    /* colors */
    background-color: var(--bg-sidemenu);
    border: 1px solid var(--fg-line-separator);
}

.ge_structure_sidetop:hover,
.ge_structure_sidetop:active,
.ge_structure_sidetop:focus {
    background-color: var(--bg-menulevel2);
    border: 1px solid var(--fg-menu);
}

.ge_structure_sidetop a {
    padding: 6px 7px;
    font-weight: var(--fw-normal);
}

.ge_structure_sidetop a:hover,
.ge_structure_sidetop a:active,
.ge_structure_sidetop a:focus {
    font-weight: var(--fw-active);
    background-color: transparent;
    border: 0px solid transparent;
}

.ge_structure_sidebottom {
    display: block;
    position: fixed;
    z-index: 121;
    right: 10px;
    bottom: 5rem;
    padding: 3px 7px;
    border-radius: 0.25rem;
    /* colors */
    background-color: var(--bg-sidemenu);
    border: 1px solid var(--fg-line-separator);
}

.ge_structure_sidebottom:hover,
.ge_structure_sidebottom:active,
.ge_structure_sidebottom:focus {
    background-color: var(--bg-menulevel2);
    border: 1px solid var(--fg-menu);
}

.ge_structure_sidebottom a:hover,
.ge_structure_sidebottom a:active,
.ge_structure_sidebottom a:focus {
    background-color: transparent;
    border: 0px solid transparent;
}

/* =========================================================
   footer elements
============================================================ */
.ge_structure_nav_bottom {
    float: left;
    overflow: hidden;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    padding: 2px;
    /* border: 1px solid red; */
}

.ge_structure_nav_bottom a {
    float: left;
    /* display: block; */
    outline-style: none;
    color: var(--fg-menu);
    /* text-align: center; */
    /* vertical-align: middle; */
    margin: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-decoration: none;
    font-size: var(--fs-menu);
    font-weight: var(--fw-menu);
    color: var(--fg-menu);
}

.copywrite {
    float: left;
    color: var(--fg-copywrite);
    font-size: var(--fs-copywrite);
    font-weight: var(--fw-copywrite);
    margin: 0;
    margin-left: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 1.25rem;
    /* border: 1px solid red; */
}

.languagetextlist {
    display: none;
}

.activetext {
    color: var(--fg-active);
}

.uberspacebox {
    float: left;
    /* margin-top: 0; */
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    padding-top: 5px;
    padding-bottom: 5px;
    /* border: 1px solid red; */
}

.uberspacebox a {
    height: 5rem;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 8px;
    padding-bottom: 17px;
}

.uberspace {
    width: 5rem;
    /* border: 1px solid red; */
}

/* =========================================================
   different screen sizes
============================================================ */

/* space is too small for the horizontally spaced header in one line.
   move the menu under the title. */
@media screen and (max-width: 65rem) {

    /* center the header */
    /* header .ge_structure_header_container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    } */

    /* header .ge_structure_logo {
        margin-top: 0.6rem;
        margin-bottom: 0;
    } */

    /* the menu bar only needs extra space when the menu bar is justified right */
    .ge_structure_menubar {
        padding-right: 0;
    }

    /* the padding on the ul disappears */
    .ge_structure_menubar ul {
        padding: 0;
    }

    .ge_structure_pathcontainer {
        float: left;
        /* justify-content: center; */
        width: calc(100% - 30px - 1rem);
        text-align: left;
        /* overflow: auto; */
    }

}

/* space is too small for the full menu under the title.
   combine all text menu items into a hamburger menu. */
@media screen and (max-width: 50rem) {

    header .ge_structure_longlogo {
        display: none;
    }

    header .ge_structure_shortlogo {
        display: inline;
    }

    /* full menu at the top made invisible */
    .ge_structure_menubar_wide {
        display: none;
    }

    /* hamburger menu at the top made invisible */
    .ge_structure_menubar_phone {
        display: none;
    }

    /* icon menu at the top made visible */
    .ge_structure_menubar_narrow {
        display: block;
    }
}

/* very narrow screens, telephone */
@media screen and (max-width: 35rem) {
    /* touch devices */
    /* @media (hover: none) { */

        header .ge_structure_header_container .ge_structure_logo .ge_structure_logobox {
            font-size: var(--fs-logo-mobile);
        }
        /* header .ge_structure_header_container .ge_structure_mainmenu {
            font-size: var(--fs-logo-mobile);
        } */
        
        /* full menu at the top made disappears */
        .ge_structure_menubar_wide {
            display: none;
        }

        /* iconmenu at the top disappears */
        .ge_structure_menubar_narrow {
            display: none;
        }

        /* hamburger menu at the top made invisible */
        .ge_structure_menubar_phone {
            display: block;
        }
    /* } */
}

    /* full menu at the top made invisible */
    /* .ge_structure_menubar_wide {
        display: none;
    } */

    /* hamburger menu at the top made invisible */
    /* .ge_structure_menubar_phone {
        display: block;
    } */

    /* icon menu at the top made visible */
    /* .ge_structure_menubar_narrow {
        display: none;
    } */


/* the following properties are for testing the telephone menu on a pc */
/* @media screen and (max-width: 45rem) {
  .ge_structure_menubar_narrow {
    display: none;
  }
  .ge_structure_menubar_wide {
    display: none;
  }
  .ge_structure_sidemenubar {
    display: block;
  }
  .ge_structure_sidetop {
    display: none;
  }
  .ge_structure_sidebottom {
    display: none;
  }
} */

/* touch devices */
@media (hover: none) {
    /* header .ge_structure_header_container .ge_structure_logobox .ge_structure_mainmenubox {
        font-size: var(--fs-logo-mobile);
    } */

    /* header .ge_structure_logobox .ge_structure_mainmenubox {
        font-size: var(--fs-logo-mobile);
    } */

    header a:hover {
        background-color: var(--bg-header);
    }

    .ge_structure_menubar ul li a:hover {
        background-color: var(--bg-header);
    }

    .ge_structure_nav_bottom a:hover {
        background-color: var(--bg-footer);
    }
}

/* =========================================================
   transition values
============================================================ */

@keyframes fademenu {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* transition for page fade in */
html {
    opacity: 0;
    transition: opacity 250ms ease-in-out;
    transition-delay: 0 !important;
}

html.isActive {
    opacity: 1;
}

/* transition for color mode change */
html.colorModeTransition,
html.colorModeTransition *,
html.colorModeTransition *:before,
html.colorModeTransition *:after {
    transition: all 500ms !important;
    transition-delay: 0 !important;
}