Сделаны "косметические" изменения

index.html

@@ -40,19 +40,19 @@
     </div>
 
     <div class="inputs">
-        <textarea id="text-input" cols="30" rows="3" placeholder="Введите текст"></textarea>
+        <textarea id="text-input" cols="30" rows="3" placeholder="Текст для генерации"></textarea>
         <input title="Изменить тему" id="isLightTheme" type="checkbox">
     </div>
 
-    <div class="btns">
+    <div class="btns btns1">
         <button class="btn" id="generate-btn" title="Создать QR-код">Создать</button>
         <button class="btn" id="download-qr-btn" title="Скачать QR-код">Скачать</button>
-        <button class="btn3" id="del-qr-btn">Очистить поля</button>
+        <button class="btn3" id="del-qr-btn" title="Очистить поля">Очистить</button>
     </div>
 
-    <div class="zoom-buttons">
+    <div class="btns btns2">
-        <button id="zoom-in-btn">Увеличить</button>
+        <button title="Увеличить размер QR кода" id="zoom-in-btn">Увеличить</button>
-        <button id="zoom-out-btn">Уменьшить</button>
+        <button title="Уменьшить размер QR кода" id="zoom-out-btn">Уменьшить</button>
     </div>
 
     <p id="error"></p>

style.css

@@ -48,13 +48,20 @@ button {
 }
 
 .btns {
-    margin: auto;
+    margin: 7px auto;
     width: 60%;
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
     gap: 10px;
 }
 
+.btns1 {
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+.btns2 {
+    grid-template-columns: 1fr 1fr;
+}
+
 @media (max-width:500px) {
     .btns {
         display: grid;
@@ -85,6 +92,7 @@ textarea::selection {
 input[type='checkbox'] {
     accent-color: orangered;
     cursor: url(img/Orange_pointer.png), pointer !important;
+    margin: auto 0;
 }
 
 button {