<!DOCTYPE html> 
<html lang="en"> 

	<style>

        /* Blog page layout using CSS Flex constructs */ 
        /* General text defaults for page */
		body { 
			font-family: Verdana, Arial, sans-serif; 
			margin: 0; 
			padding: 0; 
            line-height: 1.5em;
        }

        a:hover {
	        text-decoration: underline;
        }

        /* Semantic tag for main page header area within body, full width */

        header h1 {
            font-size: 26pt;
        }

        header  p {
            font-size: 15pt;
        }

		header { 
			background-color: #e0ffe0; 
			color: #000000; 
			text-align: center;
            font-family: Verdana, Arial, sans-serif;
            font-size: 18t;
		} 

        /* Properties for semantic navigation bar link items below title */
		nav { 
			background-color: #242424; 
			padding: 10px; 
		} 

        /* Link styling in navigation bar */
		nav a { 
			color: #fff; 
			text-decoration: none; 
			padding: 10px; 
			margin-right: 10px; 
			display: inline-block; 
		} 

        /* Layout properties for flex box containment area */
		.flex-container { 
			display: flex; 
			justify-content: space-between; 
			max-width: 95%; 
			margin: 0 auto; 
			padding: 20px; 
		} 

        /* Alignment properties of text within flex box */
		article p { 
            font-family: Verdana, Arial, sans-serif;
            font-size: 14pt;
            padding-top: 6pt;
            padding-bottom: 6pt;
			text-align: justify; 
		} 

		article h2 { 
            font-family: Verdana, Arial, sans-serif;
            font-size: 18pt;
			text-align: justify; 
		} 

        /* Flex box items should try to be twice as large when added */
		main { 
			flex: 2.5; 
		} 

        /* Styling around HTML article item with outline border in flex box */
		article { 
			margin-bottom: 20px; 
			padding: 10px 20px; 
			border: 1px solid rgb(145, 145, 145); 
			margin-right: 10px; 
		}
 
        /* For various specialty items within articles */
        .post-meta { 
            background-color: #e8f8f0;
        }

        .image, .content { 
            display: inline-block; position: relative;
        }

       .image {
            float: left;
            width: 50%;
            height: $blog--height;
            background-size: cover;
            background-position: center center;
        }
           
        .time {
            background: rgba(255,255,255,0.5);
            width: 50px;
            text-align: center;
            padding: 0.5em 0;
            color: #444;
        }       
        .date {
            font-weight: bolder; 
        }
        .month {
            font-size: 0.7em; 
        }
   

        /* Semantics for side bar structure in flex box of normal size */
		aside { 
			flex: 1; 
			background-color: #e4e4e4; 
			padding: 10px; 
            font-family: Verdana, Arial, sans-serif;
		} 

        aside a {
            font-family: "Times New Roman, Serif";
        }


        /* Full width footer structure semantics for page after flex */
		footer { 
			background-color: #b0b0b0; 
			text-align: center;
            font-size: 12pt; 
			position: fixed; 
			bottom: 0; 
			width: 100%; 
		} 
	</style> 

