@matchain/matchid-sdk-react 0.1.56-alpha.1 → 0.1.56-alpha.10

package/dist/index.css

@@ -1,3 +1,7 @@
+* {
+    box-sizing: border-box;
+}
+
 body {
     /**value**/
     --matchid-light-orange: #FFF3EB;
@@ -153,10 +157,11 @@ body {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    gap: 64px;
-    @media screen and (max-width: 768px) {
+    gap: 24px;
+
+    /* @media screen and (max-width: 768px) {
         gap: 48px;
-    }
+    } */
 
     .matchid-login-recommend-list {
         width: 100%;
@@ -165,6 +170,7 @@ body {
         align-items: center;
         flex-direction: column;
         gap: 16px;
+
         @media screen and (max-width: 768px) {
             gap: 12px;
         }
@@ -193,6 +199,7 @@ body {
                 padding: 16px;
                 cursor: pointer;
                 color: var(--matchid-login-method-color, #000000);
+
                 @media screen and (max-width: 768px) {
                     height: 56px;
                     padding: 10px 16px;
@@ -205,6 +212,7 @@ body {
                     gap: 8px;
                     font-size: 16px;
                     font-weight: 600;
+
                     @media screen and (max-width: 768px) {
                         gap: 12px
                     }
@@ -241,6 +249,7 @@ body {
                     flex-direction: column;
                     gap: 8px;
                     width: 100%;
+
                     @media screen and (max-width: 768px) {
                         margin-top: 10px;
                     }
@@ -254,6 +263,7 @@ body {
                         border-radius: 8px;
                         font-size: 16px;
                         font-weight: 600;
+
                         @media screen and (max-width: 768px) {
                             height: 48px;
                         }
@@ -294,22 +304,70 @@ body {
         }
     }
 
+    .matchid-privacy-policy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+
+        .matchid-privacy-policy-content {
+            width: 100%;
+            text-align: center;
+            font-size: 14px;
+            color: var(--matchid-gray-600);
+            font-weight: 400;
+            padding: 0 24px;
+            line-height: 17px;
+
+            .matchid-privacy-policy-content-link {
+                color: var(--matchid-highlight-orange);
+                text-decoration: underline;
+                cursor: pointer;
+            }
+        }
+
+        .matchid-privacy-policy-powered-by {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 16px;
+            font-weight: 500;
+            color: var(--matchid-gray-350);
+        }
+    }
+
     .matchid-login-other {
         width: 100%;
         gap: 16px;
         display: flex;
         flex-direction: column;
+        margin-top: 12px;
+
+        .matchid-login-other-line-box {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
 
         .matchid-login-other-text {
+            position: relative;
             text-align: center;
             font-size: 14px;
             color: var(--matchid-login-other-color, #6E6E6E);
             font-weight: 400;
+
             @media screen and (max-width: 768px) {
                 font-size: 12px;
             }
         }
 
+        .matchid-login-other-line {
+            flex-grow: 1;
+            height: 1px;
+            background-color: var(--matchid-line);
+            opacity: 0.5;
+        }
+
         .matchid-login-method-box {
             display: grid;
             padding: 16px;
@@ -331,12 +389,13 @@ body {
     display: flex;
     flex-direction: column;
     gap: 24px;
+
     @media screen and (max-width: 768px) {
         gap: 16px;
     }
 
     .matchid-login-panel-box {
-        max-height: 500px;
+        max-height: 683px;
         overflow-y: auto;
 
         &::-webkit-scrollbar {
@@ -362,12 +421,15 @@ body {
             display: flex;
             gap: 4px;
             flex-direction: column;
+            align-items: flex-start;
         }
 
         .matchid-login-panel-header-title {
             color: var(--matchid-login-panel-title-color, #000000);
             font-size: 18px;
             font-weight: 600;
+            text-align: left;
+
             @media screen and (max-width: 768px) {
                 font-size: 16px;
             }
@@ -378,6 +440,7 @@ body {
             font-size: 14px;
             font-weight: 400;
             line-height: 120%;
+
             @media screen and (max-width: 768px) {
                 font-size: 12px;
             }
@@ -404,6 +467,7 @@ body {
     backdrop-filter: blur(2px);
     background: rgba(0, 0, 0, .3);
     color: var(--matchid-overlay-color);
+
     @media screen and (max-width: 768px) {
         align-items: center;
     }
@@ -417,11 +481,13 @@ body {
     width: 480px;
     max-width: 90vw;
     padding: var(--matchid-modal-padding, 32px);
+
     @media screen and (max-width: 768px) {
         width: calc(100vw - 20px);
         max-width: calc(100vw - 20px);
         padding: var(--matchid-mobile-modal-padding, 20px);
         padding-top: 0px;
+
         .matchid-modal-mobile-header {
             width: 44px;
             height: 5px;
@@ -437,6 +503,7 @@ body {
         display: flex;
         align-items: center;
         justify-content: space-between;
+
         @media screen and (max-width: 768px) {
             height: 38px;
             padding-bottom: 16px;
@@ -448,7 +515,8 @@ body {
             margin-bottom: 24px;
         }
 
-        .matchid-modal-header-back, .matchid-modal-header-close {
+        .matchid-modal-header-back,
+        .matchid-modal-header-close {
             cursor: pointer;
         }
 
@@ -461,6 +529,7 @@ body {
                 color: var(--matchid-modal-header-color, #000);
                 font-size: 20px;
                 font-weight: 500;
+
                 @media screen and (max-width: 768px) {
                     font-size: 16px;
                     font-weight: 500;
@@ -479,19 +548,23 @@ body {
     padding-left: 24px;
     padding-right: 24px;
     border-radius: 12px;
+    position: relative;
     border: 1px solid var(--matchid-input-border-color);
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: var(--matchid-input-bg);
     gap: 24px;
+
     @media screen and (max-width: 768px) {
         height: 48px;
         padding-left: 16px;
         padding-right: 16px;
     }
 
-    &:active, &:focus, &:focus-within {
+    &:active,
+    &:focus,
+    &:focus-within {
         border-color: var(--matchid-input-focus-border-color);
         background: var(--matchid-input-focus-bg);
     }
@@ -500,6 +573,7 @@ body {
         background: var(--matchid-input-focus-bg);
     }
 
+
     .matchid-input-field {
         flex: 1;
         height: 100%;
@@ -509,7 +583,8 @@ body {
         font-weight: 500;
         background: none;
         min-width: 0;
-        border:0;
+        border: 0;
+
         @media screen and (max-width: 768px) {
             font-size: 16px;
             font-weight: 500;
@@ -520,7 +595,8 @@ body {
             font-weight: 300;
         }
 
-        &:active, &:focus {
+        &:active,
+        &:focus {
             outline: 0;
         }
     }
@@ -531,6 +607,7 @@ body {
         align-items: center;
         width: 20px;
         flex-shrink: 1;
+
         @media screen and (max-width: 768px) {
             width: 16px;
         }
@@ -541,6 +618,7 @@ body {
         cursor: pointer;
         width: 20px;
         flex-shrink: 1;
+
         @media screen and (max-width: 768px) {
             width: 16px;
         }
@@ -551,12 +629,51 @@ body {
             opacity: 1;
         }
     }
+
+    .matchid-input-length {
+        color: var(--matchid-gray-400);
+        --icon-color: var(--matchid-gray-400);
+        position: absolute;
+        bottom: 8px;
+        right: 8px;
+        display: flex;
+        align-items: flex-end;
+        gap: 4px;
+        font-size: 18px;
+
+        @media screen and (max-width: 768px) {
+            font-size: 14px;
+        }
+    }
+
+    &:active,
+    &:focus,
+    &:focus-within {
+        .matchid-input-length {
+            color: var(--matchid-highlight-orange);
+            --icon-color: var(--matchid-highlight-orange);
+        }
+    }
+
+    &.matchid-input-textarea {
+        height: auto;
+        padding: 24px;
+
+        .matchid-input-field {
+            line-height: 24px;
+            height: 24px;
+            max-height: calc(24px * var(--max-rows));
+            resize: none;
+            overflow: auto;
+        }
+    }
 }
 
 .matchid-field-box {
     display: flex;
     flex-direction: column;
     gap: 16px;
+
     @media screen and (max-width: 768px) {
         gap: 8px;
     }
@@ -565,6 +682,7 @@ body {
         color: var(--matchid-field-color);
         font-size: 18px;
         font-weight: 500;
+
         @media screen and (max-width: 768px) {
             font-size: 14px;
             font-weight: 500;
@@ -611,7 +729,10 @@ body {
 }
 
 
-.matchid-btn-highlight, .matchid-btn-highlight:hover, .matchid-btn-highlight:focus, .matchid-btn-highlight:not(:disabled):hover {
+.matchid-btn-highlight,
+.matchid-btn-highlight:hover,
+.matchid-btn-highlight:focus,
+.matchid-btn-highlight:not(:disabled):hover {
     background: var(--matchid-btn-highlight-bg);
     color: var(--matchid-btn-highlight-color);
     border: 0;
@@ -639,6 +760,7 @@ body {
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
@@ -691,25 +813,30 @@ body {
     }
 }
 
-.matchid-email-verify-box, .matchid-password-box {
+.matchid-email-verify-box,
+.matchid-password-box {
     display: flex;
     flex-direction: column;
     gap: 64px;
+
     @media screen and (max-width: 768px) {
         gap: 36px;
     }
 
-    .matchid-email-verify-header, .matchid-password-header {
+    .matchid-email-verify-header,
+    .matchid-password-header {
         display: flex;
         align-items: center;
         gap: 16px;
         height: 40px;
+
         @media screen and (max-width: 768px) {
             gap: 12px;
             height: 32px;
         }
 
-        .matchid-email-verify-header-icon, .matchid-password-header-icon {
+        .matchid-email-verify-header-icon,
+        .matchid-password-header-icon {
             width: 40px;
             height: 40px;
             display: flex;
@@ -717,6 +844,7 @@ body {
             align-items: center;
             border-radius: 8px;
             border: 1px solid var(--matchid-black);
+
             @media screen and (max-width: 768px) {
                 width: 32px;
                 height: 32px;
@@ -736,6 +864,7 @@ body {
                 font-size: 24px;
                 font-weight: 600;
                 line-height: 100%;
+
                 @media screen and (max-width: 768px) {
                     font-size: 16px;
                     font-weight: 500;
@@ -745,7 +874,9 @@ body {
             .matchid-email-verify-header-tips {
                 color: var(--matchid-email-verify-header-value-tips);
                 font-size: 14px;
-                line-height: 120%; /* 16.8px */
+                line-height: 120%;
+
+                /* 16.8px */
                 @media screen and (max-width: 768px) {
                     font-size: 12px;
                 }
@@ -753,9 +884,10 @@ body {
         }
 
         .matchid-password-header-content {
-            flex:1;
+            flex: 1;
             font-size: 14px;
             color: var(--matchid-password-header-color);
+
             @media screen and (max-width: 768px) {
                 font-size: 14px;
             }
@@ -764,7 +896,8 @@ body {
 }
 
 
-.matchid-unlogin-btn, .matchid-login-btn {
+.matchid-unlogin-btn,
+.matchid-login-btn {
     gap: 8px
 }
 
@@ -776,7 +909,8 @@ body {
     border-color: var(--matchid-login-btn-border-color);
 }
 
-.matchid-login-btn:hover, .matchid-login-btn:not(:disabled):hover {
+.matchid-login-btn:hover,
+.matchid-login-btn:not(:disabled):hover {
     background: var(--matchid-login-btn-hover-bg-color);
     color: var(--matchid-login-btn-hover-text-color);
     fill: var(--matchid-login-btn-hover-icon-color);
@@ -801,6 +935,7 @@ body {
     display: flex;
     flex-direction: column;
     gap: 16px;
+
     @media screen and (max-width: 768px) {
         gap: 4px;
     }
@@ -810,6 +945,7 @@ body {
         font-size: 14px;
         gap: 8px;
         align-items: flex-start;
+
         @media screen and (max-width: 768px) {
             font-size: 12px;
             line-height: normal;
@@ -1034,6 +1170,7 @@ body {
     font-size: 16px;
     font-weight: 500;
     display: block;
+
     @media screen and (min-width: 768px) {
         display: none;
     }
@@ -1044,6 +1181,7 @@ body {
     flex-direction: column;
     gap: 36px;
     align-items: center;
+
     @media screen and (min-width: 768px) {
         justify-content: space-between;
         flex: 1;
@@ -1056,6 +1194,7 @@ body {
         gap: 24px;
         align-items: center;
         width: 100%;
+
         @media screen and (min-width: 768px) {
             gap: 48px;
         }
@@ -1064,6 +1203,7 @@ body {
             font-size: 24px;
             font-weight: 500;
             display: none;
+
             @media screen and (min-width: 768px) {
                 display: block;
             }
@@ -1074,10 +1214,12 @@ body {
             height: 96px;
         }
 
-        .matchid-hashpanel-hash,.matchid-hashpanel-text {
+        .matchid-hashpanel-hash,
+        .matchid-hashpanel-text {
             width: 100%;
             font-size: 14px;
             word-break: break-all;
+
             @media screen and (min-width: 768px) {
                 font-size: 16px;
             }
@@ -1099,7 +1241,8 @@ body {
     position: relative;
     transition: background-color 0.3s ease;
 
-    .matchid-switch-ball, .matchid-switch-loading-icon {
+    .matchid-switch-ball,
+    .matchid-switch-loading-icon {
         width: 24px;
         height: 24px;
         transition: transform 0.3s ease, left 0.3s, background-color 0.3s ease;
@@ -1118,7 +1261,8 @@ body {
         height: 24px;
         border-radius: 12px;
 
-        .matchid-switch-ball, .matchid-switch-loading-icon {
+        .matchid-switch-ball,
+        .matchid-switch-loading-icon {
             width: 18px;
             height: 18px;
             left: 3px;
@@ -1129,16 +1273,19 @@ body {
     &.matchid-switch-checked {
         background-color: var(--matchid-switch-checked-bg);
 
-        .matchid-switch-ball, .matchid-switch-loading-icon {
+        .matchid-switch-ball,
+        .matchid-switch-loading-icon {
             left: 36px;
         }
 
-        &.matchid-switch-sm .matchid-switch-ball, .matchid-switch-sm .matchid-switch-loading-icon {
+        &.matchid-switch-sm .matchid-switch-ball,
+        .matchid-switch-sm .matchid-switch-loading-icon {
             left: 27px;
         }
     }
 
-    &.matchid-switch-disabled, &.matchid-switch-loading {
+    &.matchid-switch-disabled,
+    &.matchid-switch-loading {
         cursor: not-allowed;
         background-color: var(--matchid-switch-disabled-bg);
 
@@ -1186,6 +1333,7 @@ body {
     display: flex;
     flex-direction: column;
     gap: 48px;
+
     @media screen and (max-width: 768px) {
         gap: 36px;
     }
@@ -1194,6 +1342,7 @@ body {
         display: flex;
         flex-direction: column;
         gap: 24px;
+
         @media screen and (max-width: 768px) {
             gap: 16px;
         }
@@ -1208,12 +1357,14 @@ body {
             border: 1px solid var(--matchid-line);
             border-radius: 16px;
             transition: border-color 0.2s;
+
             @media screen and (max-width: 768px) {
                 padding: 10px 16px;
                 border-radius: 12px;
             }
 
-            &:hover, &.matchid-change-network-selected {
+            &:hover,
+            &.matchid-change-network-selected {
                 border-color: var(--matchid-highlight-orange);
             }
 
@@ -1221,6 +1372,7 @@ body {
                 display: flex;
                 align-items: center;
                 gap: 16px;
+
                 @media screen and (max-width: 768px) {
                     gap: 8px;
                 }
@@ -1229,6 +1381,7 @@ body {
                     width: 28px;
                     height: 28px;
                     border-radius: 8px;
+
                     @media (min-width: 768px) {
                         width: 40px;
                         height: 40px;
@@ -1238,6 +1391,7 @@ body {
                 .matchid-change-network-item-name {
                     font-size: 14px;
                     font-weight: 500;
+
                     @media (min-width: 768px) {
                         font-size: 16px;
                     }
@@ -1250,11 +1404,14 @@ body {
 
 .matchid-toast-box {
     position: fixed;
-    top: 20px; /* 5 * 4px = 20px */
-    right: 20px; /* 5 * 4px = 20px */
+    top: 20px;
+    /* 5 * 4px = 20px */
+    right: 20px;
+    /* 5 * 4px = 20px */
     display: flex;
     flex-direction: column;
-    gap: 8px; /* space-y-2 -> 2 * 4px = 8px */
+    gap: 8px;
+    /* space-y-2 -> 2 * 4px = 8px */
 
     .matchid-toast {
         display: flex;
@@ -1279,6 +1436,7 @@ body {
     align-items: center;
     flex: 1;
     gap: 48px;
+
     @media screen and (max-width: 768px) {
         gap: 36px;
     }
@@ -1288,6 +1446,7 @@ body {
         flex-direction: column;
         align-items: center;
         gap: 48px;
+
         @media screen and (max-width: 768px) {
             gap: 24px;
         }
@@ -1305,6 +1464,7 @@ body {
             border: 2px solid var(--matchid-line);
             border-radius: 12px;
             padding: 16px;
+
             @media screen and (max-width: 768px) {
                 padding: 10px;
             }
@@ -1312,6 +1472,7 @@ body {
             .matchid-qr-code {
                 width: 148px;
                 height: 148px;
+
                 @media screen and (max-width: 768px) {
                     width: 88px;
                     height: 88px;
@@ -1333,6 +1494,7 @@ body {
     display: flex;
     flex-direction: column;
     gap: 48px;
+
     @media screen and (max-width: 768px) {
         gap: 36px;
     }
@@ -1341,6 +1503,7 @@ body {
         display: flex;
         flex-direction: column;
         gap: 24px;
+
         @media screen and (max-width: 768px) {
             gap: 16px;
         }
@@ -1351,6 +1514,7 @@ body {
     display: flex;
     flex-direction: column;
     gap: 16px;
+
     @media screen and (max-width: 768px) {
         gap: 8px;
     }
@@ -1366,6 +1530,7 @@ body {
         padding: 16px;
         border: 1px solid var(--matchid-line);
         border-radius: 16px;
+
         @media screen and (max-width: 768px) {
             padding: 10px 16px;
         }
@@ -1380,6 +1545,7 @@ body {
             width: 42px;
             display: flex;
             align-items: center;
+
             @media screen and (max-width: 768px) {
                 width: 36px;
                 height: 36px;
@@ -1389,6 +1555,7 @@ body {
                 width: 40px;
                 height: 40px;
                 border-radius: 8px;
+
                 @media screen and (max-width: 768px) {
                     width: 36px;
                     height: 36px;
@@ -1402,6 +1569,7 @@ body {
                 height: 12px;
                 right: 0px;
                 bottom: 1px;
+
                 @media screen and (max-width: 768px) {
                     width: 10px;
                     height: 10px;
@@ -1431,6 +1599,7 @@ body {
                 -webkit-box-orient: vertical;
                 overflow: hidden;
                 text-overflow: ellipsis;
+
                 @media (max-width: 768px) {
                     font-size: 14px;
                 }
@@ -1446,6 +1615,7 @@ body {
                     font-size: 16px;
                     font-weight: 500;
                     color: var(--matchid-black);
+
                     @media (max-width: 768px) {
                         font-size: 14px;
                     }
@@ -1470,6 +1640,7 @@ body {
                     font-size: 16px;
                     font-weight: 500;
                     color: var(--matchid-success);
+
                     @media (max-width: 768px) {
                         font-size: 14px;
                     }
@@ -1542,6 +1713,7 @@ body {
                 font-size: 20px;
                 font-weight: 500;
                 color: var(--matchid-black);
+
                 @media (max-width: 768px) {
                     font-size: 16px;
                 }
@@ -1555,6 +1727,7 @@ body {
             padding: 16px;
             background: var(--matchid-gray-100);
             border-radius: 12px;
+
             @media (max-width: 768px) {
                 gap: 8px;
             }
@@ -1563,6 +1736,7 @@ body {
                 color: var(--matchid-black);
                 font-size: 16px;
                 font-weight: 500;
+
                 @media (max-width: 768px) {
                     font-size: 14px;
                 }
@@ -1573,6 +1747,7 @@ body {
                 word-break: break-all;
                 font-size: 14px;
                 color: var(--matchid-secondary-grey);
+
                 @media (max-width: 768px) {
                     font-size: 12px;
                 }
@@ -1588,6 +1763,7 @@ body {
     flex-direction: column;
     padding-bottom: 200px;
     gap: 40px;
+
     @media (max-width: 768px) {
         padding-bottom: 0px;
         gap: 68px;
@@ -1598,7 +1774,8 @@ body {
         flex-direction: column;
         gap: 16px;
 
-        .matchid-token-amount-content, .matchid-token-address-content {
+        .matchid-token-amount-content,
+        .matchid-token-address-content {
             padding: 16px;
             background: var(--matchid-light-grey);
             border-radius: 16px;
@@ -1625,6 +1802,7 @@ body {
                     font-size: 16px;
                     font-weight: 500;
                     color: var(--matchid-black);
+
                     @media (max-width: 768px) {
                         font-size: 14px;
                     }
@@ -1658,6 +1836,7 @@ body {
                 align-items: center;
                 gap: 8px;
                 font-size: 14px;
+
                 @media (max-width: 768px) {
                     font-size: 12px;
                 }
@@ -1680,6 +1859,7 @@ body {
                     font-size: 16px;
                     font-weight: 500;
                     color: var(--matchid-black);
+
                     @media (max-width: 768px) {
                         font-size: 14px;
                     }
@@ -1704,6 +1884,7 @@ body {
         font-weight: 600;
         border-bottom: 1px solid var(--matchid-line);
         caret-color: var(--matchid-black);
+
         @media (max-width: 768px) {
             font-size: 20px;
         }
@@ -1725,6 +1906,7 @@ body {
     &.matchid-token-input-sm {
         .matchid-token-input {
             font-size: 16px;
+
             @media (max-width: 768px) {
                 font-size: 14px;
             }
@@ -1760,6 +1942,7 @@ body {
         flex: 1;
         overflow-y: scroll;
         max-height: calc(70vh - 48px - 50px);
+
         @media (max-width: 768px) {
             max-height: calc(70vh - 48px - 38px);
         }
@@ -1774,12 +1957,14 @@ body {
             border: 1px solid var(--matchid-line);
             border-radius: 16px;
             transition: border-color 0.2s;
+
             @media (max-width: 768px) {
                 padding: 10px 16px;
                 border-radius: 12px;
             }
 
-            &:hover, &.matchid-token-send-checked {
+            &:hover,
+            &.matchid-token-send-checked {
                 border-color: var(--matchid-highlight-orange);
             }
 
@@ -1788,6 +1973,7 @@ body {
                 align-items: center;
                 flex: 1;
                 gap: 16px;
+
                 @media (max-width: 768px) {
                     gap: 8px;
                 }
@@ -1826,6 +2012,7 @@ body {
                     align-items: center;
                     justify-content: space-between;
                     gap: 10px;
+
                     @media (min-width: 768px) {
                         font-size: 16px;
                     }
@@ -1849,6 +2036,7 @@ body {
     height: 78px;
     background: var(--matchid-wallet-transaction-bg);
     color: var(--matchid-wallet-transaction-color);
+
     @media screen and (max-width: 768px) {
         height: 64px;
     }
@@ -1870,6 +2058,7 @@ body {
             display: flex;
             align-items: center;
             justify-content: center;
+
             @media screen and (max-width: 768px) {
                 width: 36px;
                 height: 36px;
@@ -1889,6 +2078,7 @@ body {
                 font-size: 16px;
                 font-weight: 500;
                 color: black;
+
                 @media screen and (max-width: 768px) {
                     font-size: 14px;
                 }
@@ -1942,6 +2132,7 @@ body {
     display: flex;
     flex-direction: column;
     gap: 16px;
+
     @media screen and (max-width: 768px) {
         gap: 8px;
     }
@@ -1956,6 +2147,7 @@ body {
     align-items: center;
     justify-content: center;
     color: var(--matchid-secondary-grey);
+
     @media screen and (max-width: 768px) {
         font-size: 14px;
     }
@@ -1972,6 +2164,7 @@ body {
     padding-bottom: 100px;
     gap: 24px;
     justify-content: space-between;
+
     @media screen and (max-width: 768px) {
         padding-bottom: 0;
         gap: 115px;
@@ -1982,6 +2175,7 @@ body {
         flex-direction: column;
         gap: 48px;
         align-items: center;
+
         @media screen and (max-width: 768px) {
             gap: 24px;
         }
@@ -1995,6 +2189,7 @@ body {
             font-size: 24px;
             font-weight: 500;
             color: var(--matchid-success);
+
             @media screen and (max-width: 768px) {
                 font-size: 18px;
             }
@@ -2021,6 +2216,7 @@ body {
     0% {
         background-position: 200% 0;
     }
+
     100% {
         background-position: -200% 0;
     }
@@ -2034,6 +2230,7 @@ body {
     font-size: 16px;
     color: var(--matchid-secondary-grey);
     padding: 20px 0;
+
     @media screen and (max-width: 768px) {
         font-size: 14px;
     }
@@ -2088,10 +2285,10 @@ body {
     width: 100%;
     align-items: center;
     justify-content: center;
+
     @media (min-width: 768px) {
         font-size: 16px;
         gap: 12px;
     }
 
-}
-
+}