<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;
        grid-template-areas:
            "zahlavi"
            "menu"
	    "hlavni"
            "postranni"
	    "znak"	
             "zapati";
    }

    header     { grid-area: zahlavi; }
    .mainmenu  { grid-area: menu; }
    main       { grid-area: hlavni; }
    .sidebar   { grid-area: postranni; }
    .logo      { grid-area: znak}
    footer     { grid-area: zapati; }

    @media ( min-width: 45rem ) {
        body {
            grid-template-columns: 10rem 3fr 1fr;
            grid-template-areas:
                "zahlavi zahlavi zahlavi"
                "menu    hlavni  postranni"
                "znak  zapati  zapati";
        }
    }
}

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;
}

.sidebar {
    padding: 0.5rem;
    background-color: #eee;
    font-size: smaller;
}
.logo {
    padding: 0.1rem;
    background-color: #fff;
    items-align: start; 
}
footer {
    padding: 0.5rem;
    background-color: #888;
    color: #fff;
    text-align: start;
}
</style>