body {
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background: linear-gradient(to top, #696969, #FFFFFF);
            }

            .vorbook {
                margin: auto;
                line-height: 0.9;
                float: left;
                width: 99%;
                position:relative
            }

            .topi {
                position:absolute;top:10;left:10;
              }
            
              .topi2 {
                position:absolute;top:10;left:20;
              }
            .container {
                grid-template-areas: "h  h  h" "m  m  m " "a1 a2 a3""u  u  u " "f  f  f";
                display: grid;
                grid-gap: 5px;
                grid-template-columns: 15% 50% 15%;
                /* определяем количество и ширину столбцов в макете сетки */
                justify-content: center;
            }
            
            .header {
                grid-area: h;
                background: #808080;
                padding: 3px;
                line-height: 70%;
                text-shadow: 2px 2px 3px black;
                box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
            }
            
            .menu {
                grid-area: m;
                background: white;
                padding: 3px;
                text-align: center;
                font-weight: bold;
            }
            
            .unten {
                grid-area: u;
                background: white;
                padding: 3px;
                text-align: center;
                font-weight: bold;
                box-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC;
            }
            
            .art.first {
                grid-area: a1;
                background: white;
                padding: 2px;
            }
            
            .art.second {
                grid-area: a2;
                background: white;
                padding: 3px;
                min-height: 750px;
                padding-bottom: 33px;
               
            }
            
            .art.third {
                grid-area: a3;
                background: white;
                padding: 2px;
            }
            
            .footer {
                grid-area: f;
                background: SkyBlue;
                padding: 5px;
            }
            
            .pocentru {
                text-align: center;
            }

             .spravo {
                text-align: right;
            }
            
            .leftimg {
                float: left;
                /* Выравнивание по левому краю */
                margin: 5px 2px 5px 0;
                /* Отступы вокруг картинки */
            }
            
            .rightimg {
                float: right;
                /* Выравнивание по правому краю  */
                margin: 5px 0 2px 5px;
                /* Отступы вокруг картинки */
            }
            /* Предупреждения о куках модальное окно */
            
            #zatemnenie {
                background: rgba(102, 102, 102, 0.5);
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                display: none;
                z-index: 1000;
            }
            
            #okno {
                width: 300px;
                height: 125px;
                text-align: center;
                padding: 15px;
                border: 3px solid #0000cc;
                border-radius: 10px;
                color: #000000;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                background: #fff;
            }
            
            #zatemnenie:target {
                display: block;
            }
            
            .close {
                display: inline-block;
                border: 1px solid #0000cc;
                color: #0000cc;
                padding: 0 12px;
                margin: 10px;
                text-decoration: none;
                background: #f2f2f2;
                font-size: 14pt;
                cursor: pointer;
            }
            
            .close:hover {
                background: #e6e6ff;
            }
            
            @media only screen and (max-width: 600px) {
                .container {
                    grid-template-areas: "h" "m" "a2" "u" "f";
                    grid-template-columns: 100%;
                    justify-content: center;
                }
                .header {
                    grid-area: h;
                    line-height: 120%;
                }
                body {
                    background-image: none;
                }
                .vorbook {
                    margin: auto;
                    line-height: 0.9;
                    float: left;
                    width: 99%;
                    position:relative
                }

                .topi {
                    position:absolute;top:10;left:10;
                  }
                  .topi2 {
                    position:absolute;top:10;left:20;
                  }
                .recht {
                    margin: auto;
                    text-align: justify;
                    color: #800000;
                    padding: 2px;
                    max-width: 99%;
                }
                .silkaunten {
                    display: none;
                }
                .textrecht {
                    color: #00008B;
                    padding: auto;
                    width: 97%;
                }
            }
            
            .knigi {
                border: 2px outset #996633;
                margin: auto;
                line-height: 0.9;
                background-color: BurlyWood;
                float: left;
                width: 99%;
            }
            
            .opisanie {
                border: none;
                margin: auto;
                padding: 4px;
                line-height: 1.5;
                background-color: BurlyWood;
                width: 98%;
            }
            
            .pic {
                float: left;
                /* Обтекание картинки текстом */
            }
            
            .text {
                margin-left: 55px;
                /* Отступ от левого края */
            }
            
            .merriweatherIt {
                font-family: Merriweather-Italic;
            }
            
            .merriweather {
                font-family: Merriweather;
            }
            
            .roman {
                font-family: Times New Roman;
            }
            
            .italic {
                font-family: Times New Roman;
                font-style: italic;
            }
            
            .marck {
                font-family: Marck_Script;
            }
            
            .montserrat {
                font-family: MontserratAlternates;
            }
            
            a {
                text-decoration: none;
                color: black;
                font-family: Times New Roman;
                font-weight: bold;
            }
            
            .oben {
                padding: 5px;
                text-indent: 20px;
                font-weight: bold;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            
            .recht {
                margin-left: auto;
                margin-right: 2px;
                max-width: 45%;
                text-align: right;
                color: #800000;
                padding: 2px;
            }
            
            .silka {
                color: #00008B;
            }
            
            .silkaunten {
                text-align: right;
                padding-right: 5px;
                margin-bottom: 10px;
            }
            
            .textrecht {
                color: #00008B;
                text-align: right;
                padding-right: 5px;
            }
            
            .vorbook {
                width: 24%;
                margin: 2px;
                padding-top: 4px;
                padding-bottom: 4px;
                text-align: center;
                float: left;
                height: 285px;
            }
            
            .pusto {
                width: 99%;
                padding-bottom: 15px;
                padding-top: 15px;
                padding-left: 10px;
                padding-right: 10px;
                margin-bottom: 10px;
                text-indent: 20px;
                box-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC;
                margin: auto;
            }
            
            .book {
                margin-top: 4px;
                margin-bottom: 4px;
            }
            
            .number {
                border: 1px solid #0000cc;
            }
            
            .silkaknopka {
                width: 95%;
                text-align: center;
                padding: 5px;
                margin: auto;
                box-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC;
            }
            
            .menuleft {
                width: auto;
                margin-left: auto;
                margin-right: auto;
                margin-top: 20px;
                margin-bottom: 10px;
                text-indent: 10px;
                padding: 7px;
                box-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC;
                background-color: #f5f4f4;
            }
            
            #menu_left {
                padding: 0px;
                margin: 5px;
                border: solid 0px gray;
                border-bottom-width: 1px;
            }
            
            #menu_left a {
                text-decoration: none;
                color: #000;
                font: 700 13px Georgia, Verdana, serif;
                display: block;
                margin: 0px;
                padding: 3px;
                background-color: #f6f6f6;
            }
            
            #menu_left li {
                margin: 0px;
                padding: 0px;
                list-style: none;
                border: solid 1px gray;
                border-bottom-width: 0px;
            }
            
            #rottat {
                transform: rotate(90deg);
            }
            
            #myBtn {
                position: fixed;
                bottom: 80px;
                right: 50px;
                z-index: 9999;
                width: 35px;
                height: 35px;
                text-align: center;
                text-decoration: none;
                font-size: 1.3em;
                font-weight: bold;
                line-height: 30px;
                color: #fff;
                cursor: pointer;
                border-radius: 2px;
                display: none;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px rgba(0, 0, 0, 0.3);
            }
            
            #myBtn:hover {
                background: #e9ebec;
                color: #000000;
            }
            /* форма поиска */
            
            #searchform {
                width: 100%;
                float: right;
                margin-left: 46px;
                display: inline-block;
                position: relative;
                border: 1px solid #EBEBE3;
                margin-top: 2px;
            }
            
            #searchform input {
                float: left;
                border: none;
                padding-left: 10px;
                height: 30px;
                overflow: hidden;
                outline: none;
                color: #9E9C9C;
                font-style: italic;
            }
            
            #searchform button {
                background: transparent;
                height: 30px;
                border: none;
                position: absolute;
                right: 10px;
                color: #EF5A42;
                cursor: pointer;
                font-size: 18px;
            }
            
            #searchform input:focus {
                border: none;
            }
            /* Живой поиск */
            
            .autocomplete-items {
                position: absolute;
                border-bottom: none;
                border-top: none;
                z-index: 99;
                /* расположите элементы автозаполнения на той же ширине, что и контейнер: */
                top: 100%;
                left: 0;
                right: 0;
            }
            
            .autocomplete-items div {
                padding: 5px;
                cursor: pointer;
                background-color: #fff;
                outline: 1px solid #EBEBE3;
            }
            /* при наведении курсора на элемент: */
            
            .autocomplete-items div:hover {
                background-color: #e9e9e9;
            }
            /* при навигации по элементам используйте клавиши со стрелками: */
            
            .autocomplete-active {
                background-color: #e9e9e9 !important;
            }