<style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        /* Style the header */
        .header {
            padding: 80px;
            text-align: center;
            background: #56aa56;
            color: white;
        }
        .p {
            text-align: right; 
            font-size: 10px;
        }
        .flex-container {
            display: flex;
            background-color: DodgerBlue;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            height: 300px;
            align-items: stretch;
            }
            .flex-container > div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
            border-radius: 10px; 
            width:100%;       
            }
         /* Style the top navigation bar */
         .navbar {
            overflow: hidden;
            background-color: #333;
        }
        /* Style the navigation bar links */
        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }
        /* Right-aligned link */
            .navbar a.right {
            float: right;
        }
        /* Change color on hover */
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
        /* Ensure proper sizing */
        * {
         box-sizing: border-box;
        }
        /* Column container */
        .row {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        /* Create two unequal columns that sits next to each other */
        /* Sidebar/left column */
        .side {
            flex: 30%; /* Set the width of the sidebar */
            background-color:gray;
            padding: 20px;
        }
        /* Main column */
        .main {
            flex: 70%; /* Set the width of the main content */
            background-color: white;
            padding: 20px;
        }
        .footer {
            padding: px;
            text-align: center;
            background: #ddd;
        }
        .footer2{
            padding: 10px;
            text-align: left;
            background: #eba4a4;
        }
        /* The dropdown container */
        .dropdown {
            float: left;
            overflow: hidden;
        }
         /* Dropdown button */
        .dropdown .dropbtn {
            font-size: 16px;
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
            font-style: inherit; /* Important for vertical align on mobile phones */
            margin: 0; /* Important for vertical align on mobile phones */
        }
        /* Dropdown content (hidden by default) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        /* Links inside the dropdown */
        .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
        }
        /* Add a grey background color to dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #ddd;
        }
        /* Show the dropdown menu on hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }
        /* Fake image, just for this example */
        .fakeimg {
            background-color: #aaa;
            width: 100%;
            padding: 20px;
        }

         /* Add responsiveness -
        will automatically display the navbar vertically instead of horizontally
        on screens less than 500 pixels */
        @media screen and (max-width: 500px) {
            .navbar a, .navbar a.right{
            float: none;
            width:100%;
            }
        .dropdown {
            float: none;
            }
        .dropdown-content {
            position: relative;
            width:100%;
            display: block; /* opens the content by default,
            remove this to collapse the content by default */
            }
        .dropdown-content a {
            text-align: center;
            }

        .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: center;
            }
        }
        /* Responsive layout -
        when the screen is less than 700px wide, make the two columns
        stack on top of each other instead of next to each other */
        @media screen and (max-width: 700px) {
        .row {
            flex-direction: column;
            }
        }
</style>
   