/*GENERAL*/
/*@font-face {
    font-family: 'FiraCode';
    src: url(fonts/FiraCode-VariableFont_wght.ttf);
}*/

@font-face {
    font-family: 'Inconsolata';
    src: url(fonts/Inconsolata-VariableFont_wdth\,wght.ttf);
    font-weight: 600;
}

/*BODY*/
body {
    margin: 0em;

    font-family: 'Inconsolata', 'Courier New';
    font-size: 16pt;

    color: #EEE;
    background: #292a2d;

    & a {
        text-decoration: none;
    }

    & > header {
        position: sticky;
        z-index:  100;
        top:      0;

        margin-bottom: 1em;

        background: #151617;
        font-size: 1.2em;
        line-height: 3.5em;
        box-shadow:  0em 0.16em 0.8em 0em rgba(0,0,0,0.55);

        display: grid;
        grid-template-columns: minmax(0, 3em) max-content auto max-content minmax(0, 3em);

        & a {
            color: inherit;

            &:hover {
                transform: scale(1.02);
                text-shadow: 0em 0em 1em rgba(175, 175, 175, 0.9);
            }
        }

        & .title {
            grid-column: 2;

            font-size: 1.6em;
            font-weight: bold;

            text-shadow: 0em 0em 0.2em rgba(175, 175, 175, 0.5);
        }

        & .menu {
            grid-column: 4;

            display: flex;
            gap: 2em
        }
    }
}

/*##########################################################*/
/*IMG*/
img.center-fit {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

img.shadow{
    box-shadow: 0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
}




/*##########################################################*/
/*FOOTER*/
footer {
    opacity: 0.5;
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    /*padding: 10px;*/
    border-top: 1px transparent #ccc; /* Trennlinie oberhalb des Footers */
}