:root {
    --cul1: #081d58;
    --cul2: #41b6c4;
    --cul3: #045a8d;
    --fund: #ffeda0; /*#fed976; #edf8b1. #ffffd9 #ffeda0*/
    --cul4: #08306b;
    /* --cul3: #08519c; */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;

    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background-color: var(--fund);
        color: var(--cul4);
    }

    header {
        background-color: var(--cul1);
        color: var(--cul2);
        padding: 10px 20px;
    }

    nav {
        background-color: var(--cul3);
        border: 5px solid var(--cul1);
    }

    .mnu {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        /*padding: 0 10px;*/
        text-align: center;
    }

    .mnu li {
        /*padding: 12px 16px;*/
        width: 120px;
    }

    .mnu a {
        display: block;
        padding: 3px 0px;
        color: var(--fund);
        text-decoration: none;
    }

    .mnu li:hover {
        background-color: var(--cul1);
    }

    .mnu .spacer {
        margin-left: auto;   /* 🔑 */
    }

    .mnu .dtm {
        margin-left: auto;   /* 🔑 */
        color: var(--cul2);
        pointer-events: none;
        width: 200px;
    }


    main {
        padding: 10px;
    }

    footer {
        position: fixed;
        background-color: var(--cul1);
        color: var(--cul2);
        text-align: center;
        bottom: 0;
        padding: 6px;
        width: 100%;
    }

    .f_log {
        padding: 50px;
        align-items: center;
        display: block;
    }