адоптация под планшет

MyWebSite/style.css

@@ -10,10 +10,6 @@ body {
     padding: 0;
     overflow-x: hidden; 
 }
-
-
-
-
 .header {
     background-color: #f8f8f8;
     padding: 10px; 
@@ -24,48 +20,40 @@ body {
     z-index: 1000;
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     display: flex;
-    flex-direction: column; /* Вертикальное расположение элементов */
+    flex-direction: column;
     align-items: center; 
 }
-
 .logo {
     border-radius: 50%;
     width: 80px; 
     height: 80px; 
 }
-
 .navbar {
-    margin-left: 20px; 
+    max-width: 100%;
+    margin-right: 40px;
 }
-
 .navbar ul {
     list-style: none;
     padding: 0;
 }
-
 .navbar li {
     position: relative;
-    display: inline-block; /* Горизонтальное расположение элементов */
+    display: inline-block;
     margin: 0 15px;
 }
-
 .navbar a {
     color: #003366; 
     text-decoration: none; 
 }
-
 .navbar a:hover {
     text-decoration: underline; 
 }
-
 .dropdown {
     position: relative;
 }
-
 .dropdown > span {
     cursor: pointer;
 }
-
 .dropdown:hover .features-menu {
     display: flex;
     flex-direction: column;
@@ -77,22 +65,20 @@ body {
     left: 0;
     z-index: 1;
 }
-
 .features-menu {
     display: none; /* Скрываем выпадающее меню по умолчанию */
+    
 }
-
 .features-menu li {
     list-style: none;
     border-bottom: 1px solid #fff;
     font-size: 0.8em;
     padding: 10px 20px;
+    
 }
-
 .features-menu li:last-of-type {
     border-bottom: none;
 }
-
 .book {
     margin: 10px;
     text-align: center;
@@ -102,31 +88,26 @@ body {
 .book-basket{
     margin-bottom: 30;
 }
-
 .book img {
     width: 200px; 
     height: auto; 
 }
-
 .book-basket img {
     width: 200px; 
     height: auto; 
 }
-
 .container {
     overflow-x: hidden;
-    margin-top: 240px; /* отступ для шапки */
+    margin-top: 240px;
     padding: 20px;
     box-sizing: border-box;
 }
-
 .bestsellers {
     display: flex; 
     justify-content: center; 
     gap: 20px;
     flex-wrap: wrap;
 }
-
 .footer {
     background-color: #f8f8f8;
     padding: 20px;
@@ -135,36 +116,29 @@ body {
     text-align: center;
     clear: both;
 }
-
 .social-media img {
     width: 30px;
     height: 30px;
     margin: 0 10px;
 }
-
 h1, h2 {
     color: #003366; 
 }
-
 hr {
     border: 1px solid #003366; 
 }
-
 .centered-list {
     list-style-position: inside; 
     padding: 0; 
 }
-
 .centered-list li {
     text-align: center;
 }
-
 .large-button {
     font-size: 1.5em; 
     padding: 10px 20px; 
     margin: 10px;
 }
-
 .genre-title {
     background-color: #efefef;
     border: 4px solid #5d6063;
@@ -178,13 +152,16 @@ form{
     background-color: #efefef;
 }
 .form-group {
+    padding: 10px;
     display: flex;
     font-size: 20px;
     flex-direction: column;
     margin-bottom: 15px;
     align-items: center; 
 }
-
+.form-group input, textarea {
+    max-width: 550px;
+}
 @media (max-width: 768px) {
     .bestsellers {
         flex-direction: column; /* Изменение направления для мобильных устройств */
@@ -199,90 +176,98 @@ form{
         flex-direction: column;
         align-items: center; 
         width: 100%;
-        box-sizing: border-box; /* Учитываем отступы в ширине */
+        box-sizing: border-box; 
     }
     .navbar li {
-        display: block; /* Вертикальное расположение пунктов меню */
+        display: block;
         margin: 5px 0; 
     }
     .navbar a {
-        padding: 10px; /* Увеличение области клика */
+        padding: 10px; 
     }
     .container {
         overflow-x: hidden;
-        margin-top: 200px; /* отступ для шапки */
-        padding: 0 10px; /* Добавляем отступы по бокам для контейнера */
-        box-sizing: border-box; /* Учитываем отступы в ширине */
+        margin-top: 210px; 
+        padding: 0 10px; 
+        box-sizing: border-box; 
     }
     .footer {
         width: 100%;
-        box-sizing: border-box; /* Учитываем отступы в ширине */
+        box-sizing: border-box; 
         padding: 20px 10px;
     }
-    
     h1 {
-        font-size: 4vw; /* Адаптивный размер заголовка h1 */
+        font-size: 6vw; 
     }
     h2 {
-        font-size: 3vw; /* Адаптивный размер заголовка h2 */
+        font-size: 5vw; 
     }
 }
-
 @media (min-width: 769px) and (max-width: 1024px) {
     .bestsellers {
         flex-direction: row; /* Горизонтальное расположение для планшетов */
         justify-content: space-around; /* Равномерное распределение элементов */
     }
     .book {
-        width: 45%; /* Уменьшаем ширину книг для планшетов */
-        max-width: 400px; /* Максимальная ширина для книг */
+        width: 45%; 
+        max-width: 400px; 
     }
     .header {
         padding: 10px; 
-        flex-direction: row; /* Горизонтальное расположение элементов */
+        flex-direction: row;
         align-items: center; 
-        justify-content: space-between; /* Распределение элементов по краям */
+        justify-content: space-between; 
         width: 100%;
         box-sizing: border-box; /* Учитываем отступы в ширине */
     }
     .navbar li {
-        display: inline-block; /* Горизонтальное расположение пунктов меню */
-        margin: 0 15px; /* Отступы между пунктами меню */
+        display: inline-block; 
+        font-size: 2vb;
+        margin: 0 15px;
+        margin-right: 20px;
+        
     }
     .navbar a {
-        padding: 10px; /* Увеличение области клика */
-        font-size: 1.1em; /* Увеличение размера шрифта для навигации */
+        padding: 10px; 
+        font-size: 1.1em; 
     }
     .container {
         overflow-x: hidden;
-        margin-top: 140px; /* отступ для шапки */
-        padding: 0 20px; /* Добавляем отступы по бокам для контейнера */
-        box-sizing: border-box; /* Учитываем отступы в ширине */
+        margin-top: 150px; 
+        padding: 0 20px; 
+        box-sizing: border-box; 
     }
     .footer {
         width: 100%;
-        box-sizing: border-box; /* Учитываем отступы в ширине */
-        padding: 20px 20px; /* Отступы для футера */
-        font-size: 1em; /* Размер шрифта для футера */
+        box-sizing: border-box; 
+        padding: 20px 20px; 
+        font-size: 1em; 
     }
     h1 {
-        font-size: 5vw; /* Адаптивный размер заголовка h1 */
+        font-size: 5vw; 
     }
     h2 {
-        font-size: 4vw; /* Адаптивный размер заголовка h2 */
+        font-size: 4vw; 
     }
     p {
-        font-size: 3vw; /* Размер шрифта для параграфов */
+        font-size: 3vw; 
     }
     form {
         display: flex;
+        justify-content: space-between;
         flex-direction: column; 
         width: 100%; 
         max-width: 600px; 
-        margin: 0 auto; 
+        margin: 0 auto;
+        height: 1000px; 
     }
     .form-group {
-        width: 100%; 
+        width: 100%;
+        font-size: 2vb; 
+    }
+    textarea{
+        width: 100%;
+        height: 500px;
     }
     input, textarea {
         width: 100%;