/* Reset */

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


/* Page */

html,
body {
    height: 100%;
    font-family: Tahoma, Arial, sans-serif;
    background: #f2f2f2;
}


/* Main container */

#container {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    max-width: 1200px;

    margin: auto;

    background: white;
}


/* Header */

#header {
    background: #1e5aa8;
    color: white;
}

#header-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    height: 80px;

    padding: 0 20px;
}
/* Content */

#content {
    flex: 1;

    padding: 20px;

    font-size: 20px;
}


/* Footer */

#footer {
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #444;
    color: white;
}



#logo img {
    height: 60px;
}

#site-title {
    font-size: 1.5em;
    font-weight: bold;
}

#menu-button {
    font-size: 2em;
    cursor: pointer;
    user-select: none;
}


/* Main menu */
#main-menu {
    background: #184b8d;
}

#main-menu > ul {
    display: flex;

    list-style: none;

    justify-content: space-evenly;

    gap: 20px;

    padding: 0;
    margin: 0;
}

#main-menu ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

#main-menu li {
    position: relative;
}

#main-menu a {
    color: white;
    text-decoration: none;
    font-weight: bold;
	font-size: 16px;
}

#main-menu a:hover {
    text-decoration: underline;
}

#main-menu ul ul {
    display: none;
	position: absolute;

    top: 100%;
    right: 0;

    min-width: 100px;

    background: #0000FF;

    list-style: none;

    padding: 0;
    margin: 0;
}


#main-menu ul ul li {
    width: 100%;
}

#main-menu ul ul a {
    display: block;

    padding: 10px 15px;

    white-space: nowrap;
}

#main-menu li:hover > ul {
    display: block;
}

#main-menu > ul > li > a {
    display: block;

    color: white;

    text-decoration: none;

    padding: 15px 20px;

    font-size: 16px;
}

#main-menu > ul > li:hover {
    background: #2c6ac0;
}


#menu-button {
    display: none;
    font-size: 2em;
    cursor: pointer;
}

@media (max-width: 900px) {

    #menu-button {
        display: block;
    }

    #main-menu {
        display: none;
        width: 100%;
    }

    #main-menu > ul {
        flex-direction: column;
        gap: 0;
    }

    #main-menu > ul > li > a {
        padding: 15px 20px;
        border-top: 1px solid rgba(255,255,255,0.2);
    }

    #main-menu ul ul {
        position: static;
        display: block;
        min-width: auto;
        box-shadow: none;
        background: #184b8d;
    }
}