/* MARK: Loaded Stylesheets

These are always loaded.

style.css
deviceDetect.css
header.css
footer.css

login.css

markdown.css


/* MARK: Shorthand Tips

For 4 value types like margin: 

top right bottom left

3 values:

top (right+left) bottom

2 values:

(top+bottom) (right+left)

1 value: You already guessed it: all 4 values are set to this.


*/



/* MARK: 🖋️ Fonts
*/


@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;

    src: local(''),
        url('/styles/Kreise/Engine/fonts/Montserrat-Light.woff2') format('woff2'),
        url('/styles/Kreise/Engine/fonts/Montserrat-Light.ttf') format('truetype');

}


@font-face {
    font-family: 'JetBrainsMono';
    font-style: normal;
    font-weight: 200;

    src: local(''),
        url('/styles/Kreise/Engine/fonts/JetBrainsMono-ExtraLight.woff2') format('woff2'),
        url('/styles/Kreise/Engine/fonts/JetBrainsMono-ExtraLight.ttf') format('truetype');
}

/* Variable weight fonts */

/*
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local(''),
        url('/styles/Kreise/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}


@font-face {
    font-family: 'JetBrainsMono';
    font-style: normal;
    src: local(''),
        url('/styles/Kreise/fonts/JetBrainsMono[wght].ttf') format('truetype');
}

*/


/* others currently not used

@font-face {
        font-family: 'Descent Menu';
        font-style: normal;
        src: local(''),
        url('/fonts/DESCMENU.ttf') format('truetype');
}

@font-face {
        font-family: 'Descent Score';
        font-style: normal;
        src: local(''),
        url('/fonts/DESCSCOR.ttf') format('truetype');
}

*/

/* MARK: Pseudo 
*/

/* variables the user should be able to change */
/* The :root pseudo class enables us to use the variable globally */

:root {

    --reading-direction: 'left';
    --background-color-light: rgb(255, 255, 255);
    --background-color-dark: rgb(24, 24, 24);
    --main-font: 'Montserrat';
    --mono-font: 'JetBrainsMono';
    --main-color-light: rgb(24, 24, 24);
    --main-color-dark: rgb(204, 204, 204);

    --background-decent-light: rgb(204, 102, 0);
    --background-decent-dark: rgb(158, 102, 0);

    --toolbar-decent-light: rgb(47, 182, 122);
    --toolbar-decent-dark: rgb(24, 93, 62);

    --color-palette-low: 24;
    --color-palette-mid: 102;
    --color-palette-half: 102;
    --color-palette-high: 204;

    /* Normal colors */

    --color-palette-red: rgb(204, 24, 24);
    --color-palette-green: rgb(24, 102, 24);
    /* green should be half as to eye sensitivity */
    --color-palette-blue: rgb(24, 24, 204);

    --color-palette-purple: rgb(204, 24, 204);
    /* Looks gay but that's fine */
    --color-palette-yellow: rgb(204, 204, 0);
    /* If this looks bad, calibrate your display */
    --color-palette-orange: rgb(204, 102, 0);
    /* I don't know why, but it looks better with 0 blue */

    /* Dark colors */

    --color-palette-red-dark: rgb(158, 24, 24);
    --color-palette-green-dark: rgb(24, 79, 24);
    /* green should be half as to eye sensitivity */
    --color-palette-blue-dark: rgb(24, 24, 158);

    --color-palette-purple-dark: rgb(158, 24, 158);
    /* Looks gay but that's fine */
    --color-palette-yellow-dark: rgb(158, 158, 0);
    /* If this looks bad, calibrate your display */
    --color-palette-orange-dark: rgb(158, 50, 11);
    /* I don't know why, but it looks better with 0 blue */

    /* Light colors */

    --color-palette-red-light: rgb(204, 24, 24);
    --color-palette-green-light: rgb(24, 102, 24);
    /* green should be half as to eye sensitivity */
    --color-palette-blue-light: rgb(24, 24, 204);

    --color-palette-purple-light: rgb(204, 24, 204);
    /* Looks gay but that's fine */
    --color-palette-yellow-light: rgb(204, 204, 0);
    /* If this looks bad, calibrate your display */
    --color-palette-orange-light: rgb(204, 102, 0);
    /* I don't know why, but it looks better with 0 blue */



}

/* MARK: Media Themes
*/

/* light and dark mode switches */
@media (prefers-color-scheme: light) {
    :root {
        --main-color: var(--main-color-light);
        --background-color: var(--background-color-light);
        --background-decent: var(--background-decent-light);
        --toolbar-decent: var(--toolbar-decent-light);
        --image-invert: invert(0);
    }

    /* we smarter now
        .invertTransparent {
                filter: var(--imageinvert);
        }
        */
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-color: var(--main-color-dark);
        --background-color: var(--background-color-dark);
        --background-decent: var(--background-decent-dark);
        --toolbar-decent: var(--toolbar-decent-dark);
        --image-invert: invert(1);
    }

    /* we smarter now
        .invertTransparent {
                filter: invert(1);
        }
        */
}

/* MARK: 🖼️ BG Canvas
*/

/* we draw a lot on canvas that are fullscreen in the background
so lets define them first */

#KreiseCanvasBackgroundWebGPU {

    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background-color: var(--background-color);

}



/* MARK: Blur
*/

div.blur {

    backdrop-filter: blur(3px) opacity(95%);
    background-color: color-mix(in srgb, var(--background-color) 90%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

}

/*
    position: absolute;
    /* Bezieht sich auf .blurred-container */
/*
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


    /*
    border-radius: 20px;


    mask:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            /* Links unsichtbar */
/* rgba(0, 0, 0, 1) 10%,
    /* Links Übergang */
/* rgba(0, 0, 0, 1) 90%,
    /* Rechts Übergang */
/* rgba(0, 0, 0, 0) 100%
    /* Rechts unsichtbar */
/* );
    ;
    */
/*

}
*/

div.welcomeContainer {

    padding: 0em 10em;

}




/* MARK: Globals
*/

/* Font should be Montserrat if not overwritten: */

* {

    font-family: var(--main-font);
    color: var(--main-color);

}

/* html is 100% for flexfill to work */

html {
    height: 100%;
}

/* body should have no margin (usually 8) */

body {

    height: 100%;
    margin: 0;
    background-color: var(--background-color);

}


canvas {

    outline: none;

}





/* MARK: 🪗 Flexbox
*/

/* MARK: Flex Tips

Site layout:

<!doctype html>
<html lang="yz">
    <head>
        Dynamic meta, links, etc.
    </head>

    <body>
        <div class="KreiseSiteContainer" id="KreiseSiteContainerDiv">

            <header>    --> header.css

                <div class="header-left"></div>
                <div class="header-center"></div>
                <div class="header-right"></div>
                
            </header>

            <div class="KreiseContentContainer" id="KreiseContentContainerDiv">

                <div class="flexFillTop"></div>     ( catches backgroundcanvas clicks )

                <div class="KreiseContent flexContainerCenter" id="KreiseContentDiv">
                
                    <krei-se>--- Fetch Content ---</krei-se>
                
                </div>

                <div class="flexFillBottom"></div>  ( catches backgroundcanvas clicks )

                <krei-se></krei-se>

            </div>

            <kreise-toolbar>



            </kreise-toolbar>

            <footer>    --> footer.css

                <div class="footer-left"></div>
                <div class="footer-center">             Krei.se V 0.64 huhu C#
                </div>
                <div class="footer-right"></div>

            </footer>

            <kreise-canvas></kreise-canvas>

        </div>

    </body>

</html>


*/

/*


    + KreiseSiteContainer                     flex-container

        flex-direction ^v

        + KreiseContentContainer              flex-container

            flex-direction ^v               (100 vh)

            + FlexFillTop       0.6
            + KreiseContent     1
            + FlexFillBottom    1.4

*/


/* Flex Container Divs. Center the index Div. */


/* The direct child elements of a flex container automatically becomes flex items. */
/* https://www.w3schools.com/csS/css3_flexbox_items.asp */

div.KreiseSiteContainer {

    /* Define the element as a flex CONTAINER */
    display: flex;

    /* Hauptachse column-major */
    flex-direction: column;
    /* ^v */

}

div.KreiseContentContainer {

    /* this is needed because we place some elements absolute */
    position: relative;

    /* Define the element as a flex CONTAINER */
    display: flex;

    /* Hauptachse column-major */
    flex-direction: column;
    /* ^v */

    min-height: 100vh;

    /*

        includes
            flexFillTop     0.6
            KreiseContent   1
            flexFillBottom  1.4

            --> 3

    */

}



div.flexFillTop {

    /*  If no flex: is defined all items start with their elements size and will not grow, but shrink                                                                                                            Default
        flex-grow:      specifies how much a flex item will grow relative to its size.                              0
        flex-shrink:    specifies how much a flex item will shrink relative to its size.                            1
        flex-basis:     specifies the initial length of a flex item.                                                auto
    */

    /* If you define only 'flex: n':
        flex-grow:      0.6     - because the container is full height, this item will grow PROPORTIONAL 0.6 of self height
        flex-shrik:     1       - it will shrink PROPORTIONAL as 1 in the item height if too less space is available
        flex-basis:     0%      - do not use the items elements calculated size for start (will size all items evenly)
    */
    flex: 0.6;

    /* flex-basis = Startgröße entlang der Hauptachse. 
        Überschreibt width/height, bevor grow/shrink greifen.
        'auto' = benutze eigene Größe, '0' = verteile Platz nur nach grow-Werten. */


}

/* KreiseContentDiv default */

div.flexContainerCenter {

    /* Define the element as a flex CONTAINER */
    display: flex;

    /* Hauptachse */
    flex-direction: column;
    /* ^v */

    /* Hauptachse Ausrichtung */
    justify-content: center;

    /* Ortogonale */
    align-items: center;


    padding: 0 2em 0 2em;

}


div.flexFillBottom {

    flex: 1.4;

}

/* these usually contain flex-tiles that are ~300px width on phones, 420-640px width on highends */

div.flexContainerRow {

    /* Define the element as a flex CONTAINER */
    display: flex;

    /* items will grow <-> to maximum of 1 unit, not shrink and have no flex-basis width */
    flex: 1;

    /* Hauptachse row-major */
    flex-direction: row;
    /* <> */

    /* Hauptachse */
    justify-content: space-evenly;
    /* <--1--2--3--4--> */

    /* justify-content: space-around; */
    /* <-1--2--3--4-> */

    /* justify-content: space-between; */
    /* <1---2---3---4> */


    /* Querachse */
    align-items: center;
    /* 
        . . .
        1 2 3
        . . .
    */

    /* align-items: stretch; */
    /* 
        1 2 3
        1 2 3
        1 2 3
    */

    /* align-items: flex-start; */
    /* 
        1 2 3
        . . .
        . . .
    */

    /* align-items: baseline; brauchst Du niiiiiie */
    /* 
        . . 3
        1 2 3
        1 . .
    */


    flex-wrap: wrap;

    /* Align-content 
    Das brauchst Du nur wenn Zeilen oder Spalten wrappen, es richtet dann 
        nicht die items, sondern 
        alle "lines" - die HauptachsenInstanzen der items
    innerhalb des Containers aus
    */

    /* Lines werden gestreckt (Default) */
    /* align-content: stretch; */

    /* Lines werden nicht gestreckt */
    align-content: center;

    /* weitere Werte: flex-start, flex-end, space-between, space-evenly, space-around */



    padding: 0 2em 0 2em;
}


div.flexContainerRow div.flex-content-left {

    justify-content: flex-start;
    /* <1--2--3----- */

}

div.flexContainerRow div.flex-content-right {

    justify-content: flex-end;
    /* -----1--2--3> */
}


div.flexContainerRow div {

    padding: 1em 1em 1em 1em;

}


div.flexContainerRow>* {

    min-width: var(--flexTileMinWidth);
    max-width: var(--flexTileMaxWidth);

}






/* MARK: Headlines
*/

/* clean headlines should be centered up to h3, h1 is used for headers / logo image */

h1,
h2,
h3,
h4 {

    text-align: center;

}






/* MARK: <img> Logo / invert
*/

#KreiseLogo {
    width: 10em;
}

.invertTransparent {
    filter: var(--image-invert);
}




/* MARK: <a> Links
*/
/* on links, use underline on hover only */
a,
a:visited {

    color: var(--main-color);
    text-decoration: none;
}

a:hover {

    cursor: pointer;
    text-decoration: underline;

}

a.hinted {

    color: var(--main-color);
    text-decoration: underline;
}


button.KreiseBioLabLink {

    width: auto;
    font-size: 1.2em;

}

/* MARK: <ul> <li> Lists 
*/
ul {

    list-style-type: none;
    padding: 0em 0 1em 0;
    margin: 0 0 0 0;

}

ul.liste {

    list-style-type: circle;
    padding: 0em 0 1em 0;
    margin: 0 0 0 0;

}

ul.subliste {

    list-style-type: circle;
    padding: 0em 0 1em 5em;
    margin: 0 0 0 0;

}

li {

    padding: 0.2em 0 0.2em 0;

}

li.journalShort {

    list-style-type: disc;

}

/* MARK: Inputs
*/

input,
select,
button {

    border: 1px solid var(--main-color);
    border-radius: 0px;
    color: var(--main-color);
    background: var(--background-color);
    height: 2.5em;
    font-size: 1em;
    box-sizing: border-box;

}

input[type='text'],
input[type='password'] {

    height: 3em;
    line-height: 3em;

}

input[type='button'],
input[type='submit'],
input[type='file'],
button {

    height: 3em;
    font-size: 1em;

}

input[type='button']:hover,
input[type='submit']:hover,
button:hover {
    background-color: var(--background-decent);
    box-shadow: 0px 0px 0.4em var(--main-color);
    -moz-box-shadow: 0px 0px 0.4em var(--main-color);
    -webkit-box-shadow: 0px 0px 0.4em var(--background-color);
}

textarea {

    color: var(--main-color);
    background: var(--background-color);
    box-shadow: 0px 0px 0.4em var(--main-color);
    -moz-box-shadow: 0px 0px 0.4em var(--main-color);
    -webkit-box-shadow: 0px 0px 0.4em var(--background-color);

}

button:disabled,
button:disabled:hover {

    background-color: rgb(128, 128, 128);
    color: white;

}

/* MARK: <table>
*/

table {

    align-self: center;
    border: 0;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

td {

    padding: 0 1em 0 1em;

}






/* MARK: <pre> Monospace 
*/

pre {

    align-self: center;
    font-family: var(--mono-font);
    font-weight: 200;
    font-size: 0.75em;
}










/* MARK: 🥅 Debug outlines
*/

.outlined {

    border: 1px dotted var(--main-color);

}













/* MARK: 💡 Tooltips
*/

/* NOT THE Tooltip, but the container */
.tooltipped {
    position: relative;
    display: inline-block;
    border-bottom: 0px dotted var(--main-color);
    /* If you want dots under the hoverable text */
    box-sizing: border-box;
}

/* Tooltip text */
.tooltipped .tooltipText {

    visibility: hidden;
    min-width: 200px;
    background-color: var(--background-color);
    color: var(--main-color);

    font-size: 12pt;
    font-weight: 300;

    text-align: center;
    margin-top: 1em;
    /* offset the tooltip a little down */
    padding: 1em;
    border: 1px solid var(--main-color);
    border-radius: 6px;

    /* Positions the tooltip text */
    position: absolute;

    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -50%;
    /* tooltip text centered */

    /* Fade in tooltip */
    will-change: opacity, transform;
    opacity: 0;
    transition: opacity 0.5s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipped:hover .tooltipText {
    visibility: visible;
    opacity: 0.85;
}

/* Tooltip arrow center default */
.tooltipped .tooltipText::after {

    content: " ";
    /* creates a dummy element with no text */

    position: absolute;
    bottom: 100%;
    /* At the top of the tooltip */
    left: 50%;

    transform: translateX(-50%);
    /* aligns the arrow in the middle */

    margin-left: 0px;

    /* this creates a triangle by rendering 4 sides with width 5 and the bottom in color */
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent var(--main-color) transparent;
}