Update static/css/style.css

static/css/style.css

@@ -204,7 +204,7 @@ input[type="radio"] {
 
 .btn{
     padding: 0.8% 2%;
-    border-radius: 10px;
+    border-radius: 5px;
     border-color: var(--lightBlue);
     color: var(--white);
     margin: 4% 0 0 0;
@@ -245,3 +245,215 @@ input[type="radio"] {
         width: 15vw;
     } */
 }
+
+@media (max-width: 1199px) and (min-width: 992px) {
+    .container{
+        padding: 0 7%;
+    }
+
+/*     .input1Width {
+        width: 15vw;
+    } */
+
+    .f14{
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 991px) and (min-width: 768px) {
+    .container{
+        padding: 0 7%;
+    }
+
+    .input1Width, #inputLink {
+        min-height: 20px;
+    }
+
+    .zayavkaH1{
+        font-size: 20px;
+    }
+
+    .inputZ, .f14 {
+        font-size: 10px;
+    }
+
+}
+
+@media (max-width: 767px) and (min-width: 576px) {
+    .container{
+        padding: 0 7%;
+    }
+
+    .input1Width, #inputLink {
+        min-height: 20px;
+    }
+
+    .zayavkaH1{
+        font-size: 18px;
+    }
+
+    .inputZ, .f14 {
+        font-size: 9px;
+    }
+
+    .logoIMG{
+        max-width: 15%;
+        height: auto;
+    }
+
+    #linkItem{
+        min-height: 200px;
+    }
+}
+
+@media (max-width: 575px) and (min-width: 375px) {
+    .container{
+        padding: 0 5%;
+    }
+
+    .e1 {
+      flex-direction: column;
+      width: 70%;
+      text-align: start;
+      margin: 0 !important;
+      padding: 0 0 4%;
+      align-items: center;
+    }
+
+    .input1Width, #inputLink {
+        min-height: 20px;
+    }
+
+    .input1Width {
+        box-sizing: border-box;
+        padding-left: 3%;
+        color: var(--white);
+    }
+
+    .colms, .input1Width{
+        width: 100%;
+    }
+
+    .zayavkaH1{
+        font-size: 17px;
+        padding: 4% 0;
+    }
+
+    .inputZ, .f14 {
+        font-size: 10px;
+    }
+
+    .inputZ{
+        margin: 0 0 5%;
+    }
+
+    .logoIMG{
+        max-width: 22%;
+        height: auto;
+        margin-top: 6%;
+    }
+
+    #linkItem{
+        min-height: 200px;
+    }
+
+    #linkTao{
+        min-height: 20px;
+    }
+
+    .e3 {
+        flex-direction: column;
+        justify-content: space-between;
+        margin: 0 !important;
+        padding: 0 0 3%;
+        width: 100%;
+    }
+
+    .v{
+        margin-bottom: 2% !important;
+    }
+
+    input[type="radio"] {
+        margin: 0 2% 2% 0;
+    }
+
+    .btn{
+        padding: 2%;
+    }
+}
+
+@media (max-width: 425px) and (min-width: 350px) {
+    .container{
+        padding: 0 2%;
+    }
+
+    .e1 {
+      flex-direction: column;
+      width: 70%;
+      text-align: start;
+      margin: 0 !important;
+      padding: 0 0 4%;
+      align-items: center;
+    }
+
+    .input1Width, #inputLink {
+        min-height: 20px;
+    }
+
+    .input1Width {
+        box-sizing: border-box;
+        padding-left: 3%;
+        color: var(--white);
+    }
+
+    .colms, .input1Width{
+        width: 100%;
+    }
+
+    .zayavkaH1{
+        font-size: 17px;
+        padding: 4% 0;
+    }
+
+    .inputZ, .f14 {
+        font-size: 10px;
+    }
+
+    .inputZ{
+        margin: 0 0 5%;
+    }
+
+    .logoIMG{
+        max-width: 22%;
+        height: auto;
+        margin: 6% 0 0 6%;
+    }
+
+    #linkItem{
+        min-height: 200px;
+    }
+
+    #linkTao{
+        min-height: 20px;
+    }
+
+    .e3 {
+        flex-direction: column;
+        justify-content: space-between;
+        margin: 0 !important;
+        padding: 0 0 3%;
+        width: 100%;
+    }
+
+    .v{
+        margin-bottom: 2% !important;
+    }
+
+    input[type="radio"] {
+        margin: 0 2% 2% 0;
+    }
+
+    .btn{
+        padding: 2%;
+    }
+}