html {
    background-color: #E8ECF3;
}

body {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif
}

header {
    display: flex;
    color: white;
    font-family: verdana;
    font-size: 300%;
    background-image: linear-gradient(#326DB9, #173C66);
    height: 100px;
}

.block {margin-top:5px;}

.block-header {
    background-image: linear-gradient(#FFFFFF, #DDE4EE);
    height: 27px;
    line-height: 27px; /*same has height to have the text vertically centered*/
    padding-left: 5px;
    padding-right: 5px;
}

.block-header-alert { /* Specificity rule: since block-header-alert is declared after block-header if an element has both classes, the back-ground image of block-header-alert will be used https://gomakethings.com/understanding-the-cascade-and-specificity-in-css/#:~:text=be%20blue.-,The%20order,-of%20classes%20on    */
    background-image: linear-gradient(#FEFCF6, #F0CD4B);
}

.block-body {
    background-color: white;
    padding: 5px;
}


.content {
    display: flex;
    gap: 5px;
}

.menu {
    background-color: #c9f5da;
    width: 150px;
}

.logo {
    width: 150px;
}

.main {
    flex-grow: 1;
    flex-basis: 0;
}

.hamburger {
    display: none
}

footer {
    background-color: #558a81;
    color: white;
    height: 100px;
    margin-top:5px;
}

.gap-5 {
    gap: 5px
}

.flex-responsive {
    display: flex
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-basis-0 {
    flex-basis: 0;
}

.hide {display: none}
/*.text-small-90 {font-size: 90%;}
.text-small {font-size: 80%;}*/
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-justify {text-align: justify;}
.text-bold {font-weight: bold;}
.text-italic {font-style: italic;}
.text-underline {text-decoration: underline;}
.text-highlight {background-color: #FFFF00;}
.text-line-through {text-decoration: line-through;}

@media (max-width: 600px) {
    /*.menu {position:absolute;z-index:1001;top:100px} /* same as header height */
    .menu {
        display: none
    }

    .ss-hide {
        display: none
    }

    .flex-responsive {
        flex-direction: column;
    }

    .overlay {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(153,153,153,0.8);
        z-index: 1000;
    }
    /*https://stackoverflow.com/a/5770362/15928 */
    .hamburger {
        display: inline
    }
}

.col1 {
    background-color: #bedff7
}

.col2 {
    background-color: #f7dfb0
}