Adaptive v2

site/style/background.css

@@ -8,8 +8,8 @@
         top: 10%;
  
         z-index: 2;
-        width: 60vw;
+        width: var(--headFootBoxWhight);
-        background-color:  var(--headerBoxColor);
+        background-color: var(--headerBoxColor);
 
         border-radius: 2vw;
         overflow: hidden;
@@ -22,9 +22,9 @@
     .vologdaDescription{
         position:relative;
         margin: auto;
-        margin-top: 6vw;
+        margin-top: 3vw;
 
-        width: var(--blockSize);
+        width: var(--defaultBoxWhight);
 
         text-align: center;
 
@@ -37,7 +37,7 @@
         position:relative;
         margin: auto;
 
-        width: var(--blockSize);
+        width: var(--defaultBoxWhight);
         margin-top: 6vw;
         height: 25%;
 
@@ -53,7 +53,7 @@
         margin: auto;
         margin-top: var(--vologdaBoxMargin);
 
-        width: var(--blockSize);
+        width: var(--defaultBoxWhight);
         height: 30vw;
 
         text-align: center;
@@ -72,7 +72,7 @@
 		margin: auto;
 
         margin-top: calc(var(--boxHeight) * 1.5);
-        width: 70%;
+        width: var(--headFootBoxWhight);
 
         background-color: var(--headerBoxColor);
         border-radius: 1vw;
@@ -88,8 +88,26 @@
         --bodyBoxColor:rgb(255, 255, 255);
 
         --vologdaBoxMargin: 6vw;
-        --blockSize: 50vw;
         --vologdaBoxColor: rgb(177, 250, 250);
 
         --boxHeight: 3.1vw;
-    }
+
+        --defaultBoxWhight: 600px;
+        --headFootBoxWhight: 900px;
+    }
+
+    @media (max-width: 1100px) {
+        :root {
+            --defaultBoxWhight: 60%;
+            --headFootBoxWhight: 90%;
+        }
+    }
+
+    @media (max-width: 920px) {
+        :root {
+            --defaultBoxWhight: 75%;
+            --headFootBoxWhight: 90%;
+        }
+    }
+
+      

site/style/buttonStyle.css

@@ -35,4 +35,17 @@
 
     :root {
         --sizeButton: 1;
+    }
+
+    @media screen and (max-width: 1100px) {
+        :root {
+            --sizeButton: 1.3;
+        }
+    }
+
+
+    @media screen and (max-width: 920px) {
+        :root {
+            --sizeButton: 1.6;
+        }
     }