*{
    box-sizing: border-box;

    line-height: 1.5em;
    margin:0;
    padding: 0;
}
*::-webkit-scrollbar{
    display: none;
}

body::-webkit-scrollbar{
    display: none;
}


:root{

    --grün: green;

    /* --gelb: rgb(250, 188, 63);
    --orange: rgb(232, 92, 13);
    --orange_dunkel: rgb(199, 37, 62);
    --rot: rgb(130, 17, 49);

    --pastel_orange: rgb(205, 92, 8);
    --pastel_weiß: rgb(255, 245, 228);
    --pastel_grün_hell: rgb(193, 216, 195);
    --pastel_grün: rgb(106, 156, 137);

    --gelb_dunkel: rgba(255, 183, 0, 0.708);
    --gelb_fastDunkel: rgb(255, 221, 0); */

    --grau: rgb(217, 217, 217);
    --grau_hell: #f4f9f8;
    --weiß: #ffffff;
    --grün_hell: #b7e694;
    --gelb_mitte: #ffd896;
    --rot: #ffa18d;
    --grün: #00a000;

    --licht: #ebebeb;
    --schatten: #c1c1c1;


    --background: rgb(229, 229, 229);
}

body{
    background-color: var(--background);

    /* padding: 10px; */
    /* padding-top: 30px; */
    padding-left: 30px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: black;

    font-size: 1.5rem;

    /* From Uiverse.io by csemszepp */
    /* HEXAGONNNNNNNNNNNNNNNNNNNNNNNNNNNNN */

    /* --s: 37px;

    --c: var(--gelb), var(--gelb_dunkel) 0.5deg 119.5deg, #0000 120deg;
    --g1: conic-gradient(from 60deg at 56.25% calc(425% / 6), var(--c));
    --g2: conic-gradient(from 180deg at 43.75% calc(425% / 6), var(--c));
    --g3: conic-gradient(from -60deg at 50% calc(175% / 12), var(--c));
    background: var(--g1), var(--g1) var(--s) calc(1.73 * var(--s)), var(--g2),
      var(--g2) var(--s) calc(1.73 * var(--s)), var(--g3) var(--s) 0,
      var(--g3) 0 calc(1.73 * var(--s)) var(--gelb_dunkel);
    background-size: calc(2 * var(--s)) calc(3.46 * var(--s));

 */

}
@media (max-width: 450px) {
    body{
        /* font-size: 1rem; */
    }
}

.StdButton {
    background-color: var(--background); /* Same as body background */
    border: none;
    border-radius: 12px; /* Rounded corners */
    font-size: 20px;
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    /* filter: blur(2px); */
    font-family: 'Courier New', Courier, monospace;


    /* Soft shadows to create raised and pushed-out effect */
    box-shadow:
        /*ausen unten rechts primär*/
        3px 5px 15px rgba(0, 0, 0, 0.08),
        /* innenn unten rechts weich */
        inset -2px -2px 6px rgba(0, 0, 0, 0.1),
        /* innen uberall weich letzte */
        inset 0px 1px 3px rgba(255, 255, 255, 0.4),
        /* außen oben links weich */
        -2px -3px 10px rgba(255, 255, 255, 0.4),
        /* innen oben links weiß wichtig */
        inset 2px 2px 10px rgba(255, 255, 255, 0.613),
        /* innen oben schwarz unwichtig weich */
        inset 10px 10px 10px rgba(0, 0, 0, 0.05)
        ;

}
.StdButton_hover {
    background-color: var(--background); /* Same as body background */
    border: none;
    border-radius: 12px; /* Rounded corners */
    font-size: 20px;
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    /* filter: blur(2px); */
    font-family: 'Courier New', Courier, monospace;


    /* Soft shadows to create raised and pushed-out effect */
    box-shadow:
        /*ausen unten rechts primär*/
        3px 5px 15px rgba(0, 0, 0, 0.08),
        /* innenn unten rechts weich */
        inset -2px -2px 6px rgba(0, 0, 0, 0.1),
        /* innen uberall weich letzte */
        inset 0px 1px 3px rgba(255, 255, 255, 0.4),
        /* außen oben links weich */
        -2px -3px 10px rgba(255, 255, 255, 0.4),
        /* innen oben links weiß wichtig */
        inset 2px 2px 10px rgba(255, 255, 255, 0.613),
        /* innen oben schwarz unwichtig weich */
        inset 10px 10px 10px rgba(0, 0, 0, 0.05)
        ;

}


.StdButton_hover:hover {
    transition: all .3s;
    background-color: var(--background);
    box-shadow:
        /* innen oben wichtif schwarz */
        inset 5px 5px 10px rgba(0, 0, 0, 0.1),
        /* innen unten weiß wichtig */
        inset -5px -5px 10px rgba(255, 255, 255, .75),
        /* außen schwarz oben links weich */
        -5px -5px 10px rgba(0, 0, 0, 0.08),
        /* außen weiß unten weich */
        5px 5px 10px rgba(255, 255, 255, 0.66)
        /* innen platfrom */
        ;
}

.StdButton_Pushed{
    background-color: var(--background);
    box-shadow:
        /* innen oben wichtif schwarz */
        inset 5px 5px 10px rgba(0, 0, 0, 0.05),
        /* innen unten weiß wichtig */
        inset -5px -5px 10px rgba(255, 255, 255, .2),
        /* außen schwarz oben links weich */
        -5px -5px 10px rgba(0, 0, 0, 0.05),
        /* außen weiß unten weich */
        5px 5px 10px rgba(255, 255, 255, 0.3)
        /* innen platfrom */
        ;


    background-color: var(--background); /* Same as body background */
    border: none;
    border-radius: 12px; /* Rounded corners */
    font-size: 20px;
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    /* cursor: pointer; */
    transition: all 0.3s ease;
    /* filter: blur(2px); */
    font-family: 'Courier New', Courier, monospace;
}