body { margin: 0px; padding: 0px;
background: 
repeating-linear-gradient(0deg, #ffffff 0px,hsla(0, 1%, 50%,.4) 6px); 
background-color: #c4e4d6; /*не загоняемя будет градинт*/
     color: darkblue;
     background-attachment: fixed;
}




/*Нарисуем сетку*/
div.container {  
    display: grid; /* пошла сетка /////////////////////    */
    grid-template-columns:   1fr  ;   /* одна колонка  */   
    grid-template-rows: auto auto 1fr auto;  /*количество строк 4*/

/* собираем сетку*/
    grid-template-areas: "header" /* три колонки */
                         "menu"     /* меню убрали*/
                         "content"              
                         "footer"  ;
  min-height: 100vh;  /*прижатие футера книзу работает только
    в присутствии fr в template-rows */
    grid-gap: 5px;
 }

div.header {grid-area: header;     /*border: 1px solid blue;*/ }  /*сетка - класс*/
div.menu { grid-area: menu;       /* border: 1px solid blue;*/ }
div.content { grid-area: content;  /*border: 1px solid blue;*/ }
div.footer { grid-area: footer;    /*border: 1px solid blue;*/ }

 /* Собрали сетку*/

div#container { 
    
border: 2px solid maroon;  border-radius: 15px;
        max-width: 82%; /*ширина контейнера*/
        background: rgba(245,245,255, .9);
        margin: 15px auto; /* Тридцать сверху, остальное посередине */ 
        padding: 20px 20px;  /*врутренний отчтуп*/
         }

div#header { background: rgba(100,100,100,.2);
    border-radius: .7em;
    height: auto; /*временно*/
    display: flex; 
    flex-direction: row; /*горизонталь*/
    justify-content: space-between;
    align-items: center;
    padding: .7em 0; 
}

div#header:hover
{
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#555555)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #fff,  #555555); /* for firefox 3.6+ */
 background: -o-linear-gradient(top,  #fff,  #555555); /* for Opera 11.10+ */
 background: linear-gradient(top, #fff, #555555);

	color: maroon;  /* цвет текста */
	border-spacing: solid 1px #f8f8f8;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-o-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); 
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
        transition:  2s  all; 
}

div#left { /*это типа логотип*/
    padding-left: .5em; 
    font-family: serif; 
    font-size: 400%;
    font-style: normal; 
    font-weight: 900; 
}

div#rigth  { font-weight: 600; 
    font-size: 200%; 
    text-align: center;
    padding-right: 1em; 
    /*color: maroon;*/
}

div#menu ul {
    padding: 0;
	list-style: none; /*убрали точки*/
    font-family: /* Arial, Helvetica, */ sans-serif; 
    font-size: 105% ;
    /*font-weight: ;*/
    display: flex;  /* флекс бокс*/
    flex-direction: row; 
    justify-content: center;
    align-items: center;
}

div#menu ul li a { margin-left: .3em; 
    display: block;
    color: #fff;
  /*  border: 1px solid darkblue; */
    border-radius: 1em;
    padding: .5em 1em ;
    list-style-type: none;
    background: rgba(50,60,60,.7);
    text-decoration: none;
    transition:  0.5s ; /* - плавное изменение при действии 
	у нас 0.5 сек */
}      

div#menu ul li > a.active {background: maroon; }

div#menu ul li a:hover
        { 
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#555555)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #fff,  #555555); /* for firefox 3.6+ */
 background: -o-linear-gradient(top,  #fff,  #555555); /* for Opera 11.10+ */
 background: linear-gradient(top, #fff, #555555);

	color: maroon;  /* цвет текста */
	border-spacing: solid 1px #f8f8f8;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-o-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); 
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
	}


div#footer { 
    text-align: center;
    font-family: serif; 
    font-size: 1.3em;
    font-style: normal; 
    font-weight: bold;
    

}

div#list

{   font-family: sans-serif;
    font-size: .8em;  
    vertical-align: middle; 
font-weight: normal;
vertical-align: middle;
}

div#list img { vertical-align: middle;}

div#list a { 
    color: maroon;
    text-decoration: none; 
    vertical-align: middle;
}