/* COLORS */
/* 
black        #000000
white        #FFFFFF
blue         #1F4876
light blue   #5F7C9D
red          #BC0300
*/


/* PAGE */
* {
    box-sizing: border-box;
    margin: 0;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    color: #ffffff;
    text-shadow:0px 0px 2px #000000;
}

body {
    background-color: #5F7C9D;
}


/* FONTS */
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');


/* HEADINGS */
    h1 {
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        font-size: 1.5em;
        color: #ffffff;
        text-shadow:0px 0px 2px #000000;
    }
    
    h2 {
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        font-size: 1.4em;
        color: #ffffff;
        text-shadow:0px 0px 2px #000000;
    }
    
    h3 {
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        font-size: 1.2em;
        font-weight:600;
        color: #ffffff;
        text-shadow:0px 0px 2px #000000;
    }

    .h {
        padding-top: 40px;
        padding-bottom: 10px;
    }

/* HEADER */

    .header {
        width: 100%;
        background-color: #1F4876;
        padding: 10px;
    }

/* LOGO */

    .mainlogo {
        height: 75px;
        background-color:  #1F4876;
    }

    .mainlogo a {
        background-color:  #1F4876;
    }
/* MENU BOX */

    .menu_box{
        background-color: #5F7C9D ;
        width: 70%;
    }

    /* Style the navigation bar */
    .navbar {
        display: flex;
        flex-direction: column;
    }

    /* Style the navigation bar links */
        .navbar a {
            color: white;
            padding: 14px;
            text-decoration: none;
            text-align: center;
        }

    /* Change menu color on hover */
    .navbar a:hover {
        background-color: #5F7C9D;
        color: white;
    }


/* CONTENT BOX */

    /* main page content container */
    .row {  
        display: flex;
        flex-direction: row;
    }

    .column{
        display: flex;
        flex-direction: column;
        flex-basis: auto;
    }

    .content_box {
        background-color: #1F4876 ;
        width: 70%;
    }

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

    .g-2{
        flex-grow: 2;
    }
    .g-4{
        flex-grow: 4;
    }
    .g-6{
        flex-grow: 6;
    }
    .g-8{
        flex-grow: 8;
    }
    /* Create two unequal columns that sits next to each other */
/* Sidebar (left column that contains the navigation) */
.side {
    flex: 25%;
    color:#ffffff;
    background-color:  #1F4876;
    padding: 20px;
    flex-wrap: nowrap;
}


/* Main column */
.main {
    flex: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 40px;
}

.sleeping_bee_pic {
    flex-basis: auto;
}