<style type="text/css">
a         {text-decoration: none}
a:link    {color: white}
a:visited {color: yelow}
a:active  {color: black}
a:hover   {color: red; text-decoration: underline}
p    {text-indent: 30px; margin: 0px;} /* ODSAZENÍ ODSTAVCE */
h2     {color: blue; font-style: italic}
h1    {color: green; text-align: center}

@supports ( grid-auto-flow: row ) {
	    body {
 		/*width: 100%;
   		height: 100%;
  	  	margin: 0;
    		padding: 0; vyplní obsah prohlížeče*/
        	display: grid;
        	grid-template-columns: 1fr; /* asi není nutno */
        	grid-template-areas:
            	"zahlavi"
            	"menu"
		"hlavni"
            	"zapati";   	
		}

	header     { grid-area: zahlavi; }
    	.mainmenu  { grid-area: menu; }
    	main       { grid-area: hlavni; }
     	footer     { grid-area: zapati; }
    	.logo      { grid-area: znak}

	@media ( min-width: 45rem ) {
		body {
            	grid-template-columns: 15rem 1fr;
            	grid-template-areas:
                	"zahlavi zahlavi  "
                	"menu hlavni "
                	"znak zapati ";    
 		}


		main {
		display: grid;
	       	grid-template-columns: 1fr 1fr 1fr;
       	
  		row-gap: 8px;
  		column-gap: 10px;

			.item_1{grid-column: 2 / 1;
				grid-row: 3 / 1; }
			.item_2 { grid-column: 3 / 1;
		  		grid-row: 1 / 1;}
			.item_3 { grid-column: 1 / 1;
  				grid-row: 2 / 1; }
			.item_4 { grid-column: 2 / 1;
  				grid-row: 2 /  1;}
			.item_5 { grid-column: 3 /  1;
  				grid-row: 2 /  1;}
			.item_6 { grid-column: 1 /  1;
  				grid-row: 3 /  1;}
			.item_7 { grid-column: 2 /  1;
  				grid-row: 3 /  1;}
			.item_8 { grid-column: 3 /  1;
  				grid-row: 3 /  1;}
    		}

	}
}
	header {
    	padding: 0.5rem;
   	background-color: #555;
  	color: #fff;
    	text-align: center;
	}

	.mainmenu {
    	padding: 0.5rem;
   	background-color: #777;
    	color: #fff;
    	text-align: center;
	}

	main {
    	padding: 0.5rem;
	}

	.logo {
	padding: 0.1rem;
	background-color: #fff;
	items-align: end; 
	}

	footer {
	padding: 0.5rem;
	background-color: #888;
	color: #fff;
	text-align: center;
	}


</style>
