/* css1/style1.css */
body{
    background:img/gory.jpg;
    background-size: cover; /* Растягивает картинку на весь экран, сохраняя пропорции */
    background-position: center; /* Центрирует изображение */
    background-repeat: no-repeat; /* Запрещает размножение картинки */
    background-attachment: fixed; /* Фиксирует картинку при прокрутке */
    height: 100vh; /* Занимает 100% высоты экрана */
    margin: 0;
    }
.container
{
   display:grid;
   max-width:768px;
   gap:10px;
   margin:0 auto;
   grid-template-rows:auto auto 1fr auto;
   grid-template-columns:1fr;
   grid-template-areas:
        "header   "
        "nav      "
		"main     "
        "footer   ";
}		
.header
{
	grid-area:header;
	background-color:white;
	padding:10px;
}

.nav
{
	grid-area:nav;
	margin-top:2px;
	margin-bottom:-5px;
	background-color:white;
}
.nav ul{
	line-height:40px;
}

.nav ul li{
	display: inline-block;
	background-color:#FAFFFB;
}
.nav a{
	display:block;
    border:1px solid blue;
	color: black;
	font-size: 16px;
	line-height: 40px;
	padding-left:10px;
	padding-right:10px;
	text-decoration: none;
	
}
.nav a:hover{ 
    padding-left:10px;
	padding-right:10px;
    background-color:blue;
    color: white;
    border:1px solid blue;
}

.main
{
	grid-area:main;
	margin-top:5px;
	background-color:white;
	padding:0 20px;
}

.footer
{
    grid-area:footer;
	background-color:white;
	margin-top:2px;
	padding-bottom:5px;
}		

@media(max-width:560px)
{
	.container
    {
      display:grid;
      max-width:560px;
      gap:10px;
      margin:0 auto;
      grid-template-rows:auto auto 1fr auto;
      grid-template-columns:1fr;
      grid-template-areas:
        "header   "
        "main     "
		"nav      "
        "footer   ";
    }
}