body    {background-color: lightblue;color:white; font-size:12pt; font-family:Congenial,Verdana,Helvetica}
h1      {color:gold; font-size:24pt; font-weight:bold; font-family:Congenial,Verdana,Helvetica}
h2      {color:gold; font-size:20pt; font-weight:bold; font-family:Congenial,Verdana,Helvetica}
h3      {color:gold; font-size:14pt; font-weight:bold; font-family:Congenial,Verdana,Helvetica}
p       {color:white; font-size:12pt; font-family:Congenial,Verdana,Helvetica}
table   {color:white; font-size:12pt; font-family:Congenial,Verdana,Helvetica}
small   {color: gray; font-size:9pt; text-decoration: none; font-family: Congenial,Verdana,Helvetica}
a           {color:silver; font-weight:bold; text-decoration: none; font-family:Congenial,Verdana,Helvetica}
a:hover     {color:silver; font-weight:bold; text-decoration: none; font-family:Congenial,Verdana,Helvetica}
a:active    {color:silver; font-weight:bold; text-decoration: none; font-family:Congenial,Verdana,Helvetica}

body {
    /* min-height: 100vh; */
    display: grid;
    place-items: center;
    background-color: black; /* orange; */
}

.wrapper {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 28px 0px 46px; /* top right bottom left */
    background-color: black; /* black; */
}

/* ------------------------- normal menu ------------------------- */

.row_menu {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* gelijk houden aan percentage van afbeelding? */
    height: 30px;
    border-style: solid;
    border-color: red;
    border-radius: 5px;
    border-width: 0px; /* no top and bottom because of menu bar */
    background-color: #5A5A5A;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 8;
}

    .row_menu a {
        color: white;
        font-weight: bold;
    }
    .row_menu a:hover {
        color: black;
        font-weight: bold;
    }

/* Menu style level 1 = horizontal, left to right (on small screens vertical) */
.top-level-menu {
    list-style: none;
    padding: 0; /* vertical */
    margin-left: auto;
    margin-right: auto;
}

    .top-level-menu > li {
        position: relative;
        float: left;
        height: 30px;
        min-width: 40px;
        background: #5A5A5A;
        padding: 0px 8px 0px 8px; /* top right bottom left */
    }

        .top-level-menu > li:hover {
            background: gold;
            color: black;
        }

    .top-level-menu li:hover > ul {
        display: inline; /* On hover, display the next level's menu */
    }

    .top-level-menu a /* Apply to all links inside the multi-level menu */ {
        font: bold 14px Congenial, Helvetica, sans-serif;
        color: #FFFFFF;
        text-decoration: none;
        display: block; /* Make the link cover the entire list item-container */
        line-height: 30px;
    }

    .top-level-menu .menu-item_right {
        float: right;
        text-align: right;
    }

/* ------------------------- hamburger menu ------------------------- */

.hamburger {
    display: none;
    padding: 10px;
}

.bar { /* thee lines to create the hamburger menu */
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px; /* top and bottom 5px */
    -webkit-transition: all 0.3s ease-in-out; /* speed of animation to cross and back */
    transition: all 0.3s ease-in-out;
    background-color: white;
}

@media only screen and (max-width: 700px) {
    .hamburger {
        position: fixed;
        top: 10px;
        display: inline;
        cursor: pointer;
        left: 0px;
        width: 50px;
    }

    .row_menu {
        height: 3px; /* same as bar? cant be zero */
        background-color: black;
    }

    .top-level-menu {
        position: fixed;
        left: -120%;
        top: 70px;
        flex-direction: column;
        width: 80px; /* min-width 80 + 2x padding 8 */
        text-align: left;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    }

        .top-level-menu.active {
            left: 0px;
        }

        .top-level-menu > li {
            position: relative;
            float: left;
            width: 80px; /* min-width 80 + 2x padding 8 */
        }

        .top-level-menu .menu-item_right {
            /* position: relative; */
            float: left;
            text-align: left;
            /* width: 96px; min-width 80 + 2x padding 8 */
        }
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0; /* hide middle bar */
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* rotate top one clockwise */
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); /* rotate bottom one counter clockwise */
}