From 28f91b1294a9221d77dedeb70cf3831c686083e8 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Wed, 9 Nov 2022 14:14:29 +0100
Subject: [PATCH 1/4] fixing fontsizes

---
 .../api-guide/ApiGuide/ApiGuide.module.scss   |  1 +
 .../ApiGuideTable/ApiGuideTable.module.scss   |  2 +-
 .../ApiGuide/Navigator/Navigator.module.scss  |  4 ++--
 .../AppManagement/AppManagement.module.scss   |  2 +-
 .../AppRegistrationForm.module.scss           |  5 ++++
 .../AppRegistrationForm.tsx                   | 24 ++++++++++++++-----
 .../RegisterAppTabs/RegisteredAppTabs.tsx     |  4 ++--
 .../docs/Docs/Sidebar/Sidebar.module.scss     |  4 +++-
 src/components/global/Modal/Modal.tsx         |  6 ++++-
 src/main.jsx                                  |  1 +
 src/routes-data/sidebar-routes.jsx            |  2 +-
 src/themes.scss                               |  6 ++++-
 12 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/components/api-guide/ApiGuide/ApiGuide.module.scss b/src/components/api-guide/ApiGuide/ApiGuide.module.scss
index ad73eb5c..ce497eca 100644
--- a/src/components/api-guide/ApiGuide/ApiGuide.module.scss
+++ b/src/components/api-guide/ApiGuide/ApiGuide.module.scss
@@ -42,6 +42,7 @@
 [data-state~="responsive.mobileS"] {
   .apiGuideImage {
     overflow: auto;
+    justify-content: unset;
     img {
       width: 90rem;
     }
diff --git a/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss b/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
index cbbf4107..674ed99f 100644
--- a/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
+++ b/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss
@@ -1,6 +1,6 @@
 .apiGuideTable {
   width: 75%;
-  border-radius: 1.6rem;
+  border-radius: 4px;
   overflow: hidden;
   border: 1px solid var(--gray-02);
   th {
diff --git a/src/components/api-guide/ApiGuide/Navigator/Navigator.module.scss b/src/components/api-guide/ApiGuide/Navigator/Navigator.module.scss
index d135aebf..a14a767c 100644
--- a/src/components/api-guide/ApiGuide/Navigator/Navigator.module.scss
+++ b/src/components/api-guide/ApiGuide/Navigator/Navigator.module.scss
@@ -6,7 +6,7 @@
   right: 40px;
   z-index: 10;
   box-sizing: border-box;
-  padding: 1rem;
+  padding: 1.6rem;
   margin: 0 auto 30px;
   .navigatorContent {
     display: flex;
@@ -26,7 +26,7 @@
         background-color: var(--gray-01);
       }
       &.navigatorSubLink {
-        margin-left: 0.5rem;
+        margin-left: 0.8rem;
       }
     }
   }
diff --git a/src/components/app-registration/AppManagement/AppManagement.module.scss b/src/components/app-registration/AppManagement/AppManagement.module.scss
index 76212196..468cc96a 100644
--- a/src/components/app-registration/AppManagement/AppManagement.module.scss
+++ b/src/components/app-registration/AppManagement/AppManagement.module.scss
@@ -126,7 +126,7 @@
     border: 0.1rem solid #d6dadb;
     border-radius: 0.4rem;
     padding: 0.2rem 0.2rem;
-    font-size: 11px;
+    font-size: var(--text-size-xxs);
 }
 .adminScope {
     border: 0.1rem solid var(--teal-01);
diff --git a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
index e5f7e29b..35ac629c 100644
--- a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
+++ b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.module.scss
@@ -68,6 +68,10 @@ fieldset .customTextInput:last-child {
         align-items: center;
         justify-content: center;
         width: 80%;
+        input[type='number'],
+        input[type='text'] {
+            height: 40px;
+        }
         input[type='number'] {
             appearance: none;
             &::-webkit-outer-spin-button,
@@ -215,6 +219,7 @@ input[type='checkbox'] {
         height: 11px;
         border-radius: 2px;
         transition: background-color 0.25s, border-color 0.25s;
+        top: 3px;
         z-index: 1;
     }
     input:checked + .customCheckbox {
diff --git a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.tsx b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.tsx
index 39849293..9075ce09 100644
--- a/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.tsx
+++ b/src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.tsx
@@ -65,7 +65,11 @@ export default function AppRegistrationForm() {
                     <fieldset>
                         <div className={styles.formHeaderContainer}>
                             <h4 className={styles.registerFormHeader}>App information</h4>
-                            <div className={styles.description}>Paste your API token with the admin scope here.</div>
+                            <div className={styles.description}>
+                                <span>
+                                    Paste your API token with the admin scope here.
+                                </span>
+                            </div>
                         </div>
                         <div className='api-token-wrapper'>
                             <div className={styles.customTextInput} id='custom-text-input'>
@@ -121,8 +125,10 @@ export default function AppRegistrationForm() {
                             <div className={styles.formHeaderContainer}>
                                 <h4 className={styles.registerFormHeader}>Markup</h4>
                                 <div className={styles.description}>
-                                    You can earn commission by adding a markup to the price of each trade. Enter your
-                                    markup percentage here.
+                                    <span>
+                                        You can earn commission by adding a markup to the price of each trade. Enter your
+                                        markup percentage here.
+                                    </span>
                                 </div>
                             </div>
                             <div className='input-container'>
@@ -166,8 +172,10 @@ export default function AppRegistrationForm() {
                             <div className={styles.formHeaderContainer}>
                                 <h4 className={styles.registerFormHeader}>OAuth details</h4>
                                 <div className={styles.description}>
-                                    This allows clients to log in to your app using their Deriv accounts without an API
-                                    token.
+                                    <span>
+                                        This allows clients to log in to your app using their Deriv accounts without an API
+                                        token.
+                                    </span>
                                 </div>
                             </div>
                             <div className='input-container'>
@@ -233,7 +241,11 @@ export default function AppRegistrationForm() {
                             <div>
                                 <div className={styles.formHeaderContainer}>
                                     <h4 className={styles.registerFormHeader}>Scope of authorisation</h4>
-                                    <div className={styles.description}>Select the scope for your app:</div>
+                                    <div className={styles.description}>
+                                        <span>
+                                            Select the scope for your app:
+                                        </span>
+                                    </div>
                                 </div>
                             </div>
                             <div className={styles.scopesField}>
diff --git a/src/components/app-registration/AppRegistration/RegisterAppTabs/RegisteredAppTabs.tsx b/src/components/app-registration/AppRegistration/RegisterAppTabs/RegisteredAppTabs.tsx
index 20ee4a95..8ef8efe3 100644
--- a/src/components/app-registration/AppRegistration/RegisterAppTabs/RegisteredAppTabs.tsx
+++ b/src/components/app-registration/AppRegistration/RegisterAppTabs/RegisteredAppTabs.tsx
@@ -8,14 +8,14 @@ export default function RegisteredAppTabs() {
         id="register_button"
         className="register-button"
       >
-        Register your application
+        <label>Register your application</label>
       </button>
       <button
         onClick={() => send("MANAGE_TOGGLE_TAB")}
         id="manage_button"
         className="manage-button"
       >
-        Manage existing applications
+        <label>Manage existing applications</label>
       </button>
     </div>
   );
diff --git a/src/components/docs/Docs/Sidebar/Sidebar.module.scss b/src/components/docs/Docs/Sidebar/Sidebar.module.scss
index 5bca5043..1b007346 100644
--- a/src/components/docs/Docs/Sidebar/Sidebar.module.scss
+++ b/src/components/docs/Docs/Sidebar/Sidebar.module.scss
@@ -182,8 +182,10 @@
         line-height: 24px;
         .dropdownBtn {
             opacity: unset;
-            font-size: 14px;
             color: var(--text-01);
+            > span {
+                font-size: var(--text-size-xs);
+            }
         }
         .dropdownList {
             margin-top: 16px;
diff --git a/src/components/global/Modal/Modal.tsx b/src/components/global/Modal/Modal.tsx
index f08fe315..3912727c 100644
--- a/src/components/global/Modal/Modal.tsx
+++ b/src/components/global/Modal/Modal.tsx
@@ -32,7 +32,11 @@ export default function Modal({
         {type === "success" && <div className={styles.modalImageSuccess} />}
         {type === "warning" && <div className={styles.modalImageWarning} />}
         <div className={styles.modalTitle}>{title}</div>
-        <div className={styles.modalDescription}>{description}</div>
+        <div className={styles.modalDescription}>
+          <span>
+            {description}
+          </span>
+        </div>
       </div>
       <div className={styles.modalFooter}>
         <Button type="secondary" onClick={onSecondaryButtonClick}>
diff --git a/src/main.jsx b/src/main.jsx
index b027dbe5..362dc987 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { BrowserRouter } from "react-router-dom";
 import ReactDOM from "react-dom";
 import "./index.scss";
+import "./themes.scss";
 import App from "./App";
 import ScrollToTop from "./global-functions/ScrollToTop";
 
diff --git a/src/routes-data/sidebar-routes.jsx b/src/routes-data/sidebar-routes.jsx
index 4fb674f6..43bd1889 100644
--- a/src/routes-data/sidebar-routes.jsx
+++ b/src/routes-data/sidebar-routes.jsx
@@ -108,7 +108,7 @@ const ImplementDropdown = (props) => {
     return (
         <div className={styles.dropdown}>
             <div className={`${styles.dropdownBtn} ${isActive ? styles.boldText : ''}`} onClick={handleToggleDropdown}>
-                Implement Now
+                <span>{props.route.label}</span>
                 <span className={`${styles.arrow} ${isActive ? styles.down : ''}`} />
             </div>
             {isActive && (
diff --git a/src/themes.scss b/src/themes.scss
index b777880c..60715659 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -32,4 +32,8 @@
     --text-align-left: start;
     --text-align-right: right;
     --text-align-center: center;
-}
\ No newline at end of file
+}
+
+a, p, span, b, label, strong, input, td, th, code {
+    font-size: var(--text-size-s);
+}

From f4bb7813cbe337f0c95e96d7ed328ee1864c7a83 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Wed, 9 Nov 2022 14:34:51 +0100
Subject: [PATCH 2/4] refactor

---
 src/index.scss  | 5 +++++
 src/themes.scss | 4 ----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 64a0632a..f56521bc 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -100,6 +100,11 @@
     font-size: 1.6rem;
   }
 }
+
+html * {
+  font-size: 1.6rem;
+}
+
 html,
 body {
   overflow-x: hidden;
diff --git a/src/themes.scss b/src/themes.scss
index 60715659..53c9b4ac 100644
--- a/src/themes.scss
+++ b/src/themes.scss
@@ -33,7 +33,3 @@
     --text-align-right: right;
     --text-align-center: center;
 }
-
-a, p, span, b, label, strong, input, td, th, code {
-    font-size: var(--text-size-s);
-}

From 5eccf9d63353cb000daa9103938a11c4194bbffa Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Wed, 9 Nov 2022 14:40:01 +0100
Subject: [PATCH 3/4] small refactor

---
 src/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.scss b/src/index.scss
index f56521bc..510a9178 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -102,7 +102,7 @@
 }
 
 html * {
-  font-size: 1.6rem;
+  font-size: var(--text-size-s);
 }
 
 html,

From 02ec1da14469149ed283f996132fb3e7084b7676 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Wed, 9 Nov 2022 14:54:56 +0100
Subject: [PATCH 4/4] refactor

---
 src/index.scss | 161 +++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 143 insertions(+), 18 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 510a9178..a9bec3db 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,5 +1,6 @@
 @charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;400;500;700&display=swap");
+
 :root {
   --text-01: #333333;
   --brown-01: #311912;
@@ -67,7 +68,7 @@
   --text-size-xl: 4.8rem;
   --text-size-xxl: 6.4rem;
 
-    //Line Height
+  //Line Height
   --text-lh-xxs: 1;
   --text-lh-xs: 1.25;
   --text-lh-s: 1.4;
@@ -76,29 +77,24 @@
   --text-lh-xl: 2;
   --text-lh-xxl: 2.4;
 
-    //Font Weight
+  //Font Weight
   --text-weight-lighter: lighter;
   --text-weight-normal: normal;
   --text-weight-bold: bold;
   --text-weight-bolder: bolder;
 
-    //Text Align
+  //Text Align
   --text-align-left: start;
   --text-align-right: right;
   --text-align-center: center;
 }
+
 * {
   font-family: "IBM Plex Sans", sans-serif;
   font-size: 10px;
   margin: 0;
   padding: 0;
   scroll-margin-top: 100px;
-  p{
-    font-size: var(--text-size-s);
-  }
-  a{
-    font-size: 1.6rem;
-  }
 }
 
 html * {
@@ -109,48 +105,59 @@ html,
 body {
   overflow-x: hidden;
 }
+
 a {
   color: var(--red-01);
   text-decoration: none;
 }
+
 @mixin header {
   margin-bottom: 16px;
   color: var(--text-01);
 }
+
 h1 {
   @include header;
   font-size: 48px;
   margin-bottom: 40px;
   text-align: center;
 }
+
 h2 {
   @include header;
   font-size: 32px;
   line-height: 1.5;
 }
+
 h3 {
   @include header;
   font-size: 24px;
   line-height: 1.5;
 }
+
 h4 {
   font-size: 20px;
 }
+
 h5 {
   margin-bottom: 10px;
 }
+
 p {
   line-height: 28px;
   margin-bottom: 16px;
 }
+
 .numbered-list {
   margin-left: 40px;
   margin-bottom: 24px;
+
   li {
     margin-bottom: 10px;
     list-style-type: decimal;
   }
 }
+
 .inline-code {
   font-weight: 400;
   color: var(--red-01);
@@ -159,33 +166,42 @@ p {
   background-color: var(--gray-01);
   border: 1px solid var(--gray-02);
 }
+
 .language-json {
+
   .token.string,
   .token.number {
     color: var(--json-purple) !important;
   }
+
   .token.punctuation {
     color: var(--json-gold) !important;
   }
+
   .token.property {
     color: var(--json-magenta) !important;
   }
 }
+
 .doc-content {
   display: flex;
   min-height: 95vh;
   overflow-y: auto;
 }
+
 button:focus {
   outline: none;
 }
+
 [data-state*="responsive.mobile"] {
   #sidebar {
     display: none;
   }
+
   .row-container {
     flex-direction: column;
   }
+
   .term-conditions,
   .term-conditions a {
     text-align: center;
@@ -193,26 +209,33 @@ button:focus {
     font-size: 13px;
     margin-top: 0;
   }
+
   h1 {
     font-size: 32px;
   }
+
   h2 {
     font-size: 24px;
   }
+
   h3 {
     font-size: 18px;
   }
+
   h4 {
     font-size: 16px;
   }
-  .single-container > p {
+
+  .single-container>p {
     text-align: center;
     margin-bottom: 24px !important;
   }
-  body > #content > h1 {
+
+  body>#content>h1 {
     font-size: 24px;
     margin-top: 43px;
   }
+
   .doc-content {
     padding: 75px 15px 40px;
   }
@@ -229,97 +252,122 @@ button:focus {
     padding: 40px 0;
   }
 }
+
 @media (max-width: 992px) and (max-width: 480px) {
   .main-content .main-page-row .clients-opinion {
     margin-bottom: 10px;
   }
 }
+
 @media (max-width: 992px) {
+
   .main-content .main-page-row .row-container,
   .main-content .main-page-row .row-container .single-container {
     width: 100%;
   }
 }
+
 @media (max-width: 992px) {
   .main-content .main-page-row .column-container {
     width: 100%;
   }
+
   .main-content .main-page-row .column-container h1 {
     margin-bottom: 0 !important;
   }
+
   .main-content .main-page-row .column-container .benefits {
     flex-wrap: wrap;
   }
+
   .main-content .main-page-row .column-container .benefits h3 {
     margin: 16px 0;
   }
+
   .main-content .main-page-row .column-container .benefits div {
     width: 100%;
   }
+
   .main-content .main-page-row .column-container .ways {
     max-width: 328px;
   }
+
   .main-content .main-page-row .column-container .prev {
     left: -50px;
   }
+
   .main-content .main-page-row .column-container .next {
     right: -50px;
   }
 }
+
 @media (max-width: 992px) {
   .main-content .main-page-row .card-container {
     flex-direction: column;
     padding: 24px 16px 0;
     margin-bottom: 0;
   }
+
   .main-content .main-page-row .card-container .main-page-card {
     width: unset;
     margin: 0 0 24px;
   }
 }
+
 @media (max-width: 992px) and (max-width: 480px) {
   .main-content .main-page-row h1 {
     font-size: 32px;
   }
 }
+
 @media (max-width: 992px) {
   .main-content .main-page-row .single-container h1 {
     font-size: 24px;
   }
+
   .main-content .main-page-row .single-container .subheader {
     font-size: 16px;
   }
 }
+
 @media (max-width: 992px) {
   .main-content .container {
     flex-direction: column;
   }
+
   .main-content .container .row-container {
     width: 100%;
   }
+
   .main-content .container .row-container .single-container {
     width: unset;
     padding: 40px 16px 0;
   }
 }
+
 @media (max-width: 1499px) {
   .personalisation {
     order: 2;
   }
+
   .personalisation-image {
     order: 1;
   }
+
   .earn-more-image {
     order: 3;
   }
+
   .earn-more {
     order: 4;
   }
 }
+
 li {
   font-size: var(--text-size-s);
   margin-top: 16px;
 }
+
 .container {
   display: flex;
   flex-direction: row;
@@ -329,15 +377,18 @@ li {
   align-items: center;
   justify-content: center;
 }
+
 .error-message {
   color: var(--red-01);
   font-size: 14px;
   font-weight: 400;
   padding-left: 10px;
 }
+
 .take-to-lib {
   padding: 80px 0 0;
 }
+
 .wrapper {
   overflow: hidden;
   position: relative;
@@ -345,6 +396,7 @@ li {
   height: 248px;
   z-index: 1;
 }
+
 .slide {
   width: 588px;
   height: 248px;
@@ -356,6 +408,7 @@ li {
   transition: all 1s;
   position: relative;
 }
+
 .control {
   position: absolute;
   top: 35%;
@@ -363,6 +416,7 @@ li {
   height: 50px;
   z-index: 2;
 }
+
 .prev,
 .next {
   background-size: 22px;
@@ -370,22 +424,27 @@ li {
   background-repeat: no-repeat;
   cursor: pointer;
 }
+
 .prev {
   background-image: url(/img/arrow_left.svg);
   left: -100px;
 }
+
 .next {
   background-image: url(/img/arrow_right.svg);
   right: -100px;
 }
+
 .prev:active,
 .next:active {
   transform: scale(0.8);
 }
+
 blockquote {
   position: relative;
   text-align: left;
 }
+
 blockquote:after {
   box-sizing: border-box;
   content: "\201c";
@@ -398,6 +457,7 @@ blockquote:after {
   color: var(--blockquote-text-color);
   opacity: 56%;
 }
+
 .blockquote-separator {
   margin: 20px 0;
   border: none;
@@ -405,21 +465,25 @@ blockquote:after {
   height: 1px;
   background-color: var(--blockquote-separator-color);
 }
+
 .blockquote-author {
   text-align: left;
   line-height: 1.5;
   font-size: 1rem;
   width: auto;
 }
+
 .with-pattern {
   background-image: url(/img/pattern.svg);
   object-fit: contain;
 }
+
 .card-container {
   display: flex;
   flex-direction: row;
   margin-bottom: 10px;
 }
+
 .column-container {
   display: flex;
   flex-direction: column;
@@ -428,12 +492,15 @@ blockquote:after {
   align-items: center;
   justify-content: center;
 }
+
 .gray {
   background-color: var(--blockquote-separator-color);
 }
+
 .white {
   background-color: var(--white);
 }
+
 .subheader {
   font-size: 24px;
   text-align: center;
@@ -441,6 +508,7 @@ blockquote:after {
   color: var(--text-01);
   margin-bottom: 40px;
 }
+
 textarea {
   width: calc(100% - 16px);
   min-height: 119px;
@@ -448,6 +516,7 @@ textarea {
   border: solid 1px var(--border-normal);
   margin-top: 1.5rem;
 }
+
 .center {
   display: flex;
   width: 100%;
@@ -455,53 +524,66 @@ textarea {
   align-items: center;
   margin-bottom: 1rem;
 }
+
 @media (max-width: 992px) {
-  .row-container .single-container > h2 {
+  .row-container .single-container>h2 {
     font-size: 24px;
   }
 }
+
 @media (max-width: 992px) {
   .main-content .main-page-row {
     padding: 40px 0;
   }
+
   .main-content .main-page-row .row-container,
   .main-content .main-page-row .row-container .single-container,
   .main-content .main-page-row .column-container {
     width: 100%;
   }
+
   .main-content .main-page-row .column-container h1 {
     margin-bottom: 0 !important;
   }
+
   .main-content .main-page-row .card-container {
     flex-direction: column;
     padding: 24px 16px 0;
     margin-bottom: 0;
   }
+
   .main-content .main-page-row .card-container .main-page-card {
     width: unset;
     margin: 0 0 24px;
   }
+
   .main-content .main-page-row h1 {
     width: 90%;
     font-size: 28px;
   }
+
   .main-content .main-page-row .single-container h1 {
     font-size: 24px;
   }
+
   .main-content .main-page-row .single-container .subheader {
     font-size: 16px;
   }
+
   .main-content .container {
     flex-direction: column;
   }
+
   .main-content .container .row-container {
     width: 100%;
   }
+
   .main-content .container .row-container .single-container {
     width: unset;
     padding: 40px 16px 0;
   }
 }
+
 .main-page-row {
   display: flex;
   flex-direction: column;
@@ -511,22 +593,26 @@ textarea {
   align-items: center;
   justify-content: center;
   padding: 80px 0;
+
   &.ways-row {
     padding: 0;
   }
-  .clients-opinion{
+
+  .clients-opinion {
     color: var(--text-01);
     font-size: 48px;
     margin-bottom: 40px;
     text-align: center;
   }
 }
+
 .pageWrapper {
   width: 100%;
   color: var(--text-01);
   padding-bottom: 20px;
   margin-left: 300px;
 }
+
 .single-container {
   display: flex;
   flex-direction: column;
@@ -535,28 +621,34 @@ textarea {
   align-items: center;
   justify-content: center;
   width: 80%;
-  .header{
+
+  .header {
     color: var(--text-01);
     font-size: 48px;
     margin-bottom: 40px;
     text-align: center;
   }
 }
+
 .single-container p {
   margin-bottom: 32px;
   text-align: center;
 }
+
 .single-container p a {
   color: var(--red-01);
 }
+
 .single-container h1 {
   width: 80%;
   margin-bottom: 12px;
   line-height: 1.25;
 }
+
 .single-container img {
   margin-bottom: 24px;
 }
+
 .container {
   display: flex;
   flex-direction: row;
@@ -565,15 +657,18 @@ textarea {
   align-items: center;
   justify-content: center;
 }
-.single-container > h2 {
+
+.single-container>h2 {
   font-size: 32px;
   margin-bottom: 8px;
   color: var(--white);
 }
+
 .with-pattern {
   background-image: url(/img/pattern.svg);
   object-fit: contain;
 }
+
 .community-btn {
   padding: 6px 16px;
   border-radius: 4px;
@@ -582,11 +677,13 @@ textarea {
   line-height: 20px;
   border: solid 1px var(--gray-04);
 }
+
 .card-container {
   display: flex;
   flex-direction: row;
   margin-bottom: 40px;
 }
+
 .column-container {
   display: flex;
   flex-direction: column;
@@ -594,13 +691,15 @@ textarea {
   width: 80%;
   align-items: center;
   justify-content: center;
-  .header_h2{
+
+  .header_h2 {
     color: var(--text-01);
     font-size: 48px;
     margin-bottom: 40px;
     text-align: center;
   }
 }
+
 .row-container {
   display: flex;
   flex-wrap: nowrap;
@@ -608,6 +707,7 @@ textarea {
   align-items: center;
   justify-content: center;
 }
+
 .main-page-card {
   width: 100%;
   max-width: 316px;
@@ -617,14 +717,17 @@ textarea {
   background-color: var(--white);
   margin: 0 12px;
 }
+
 .main-page-card .header {
   display: flex;
   width: 100%;
 }
+
 .main-page-card .header img {
   float: right;
   padding-left: 10px;
 }
+
 .main-page-card .header h3 {
   font-size: 24px;
   font-weight: 700;
@@ -633,45 +736,55 @@ textarea {
   float: left;
   width: 100%;
 }
+
 .main-page-card .content {
   font-size: 16px;
   line-height: 1.5;
   color: var(--text-01);
   margin-bottom: 0;
 }
+
 .main-page-card .hide-on-desktop {
   display: none;
 }
+
 @media (max-width: 480px) {
   .main-page-card .hide-on-desktop {
     display: block;
   }
 }
+
 .main-page-card .hide-on-mobile {
   display: block;
 }
+
 @media (max-width: 480px) {
   .main-page-card .hide-on-mobile {
     display: none;
   }
 }
+
 @media (max-width: 480px) {
   .main-page-card {
     padding: 28px 16px 24px;
   }
 }
+
 ul {
   margin-left: 20px;
 }
+
 ul li {
   margin-bottom: 16px;
 }
+
 .subheader {
   font-size: 24px;
   text-align: center;
   color: var(--text-01);
   margin-bottom: 40px;
 }
+
 textarea {
   width: calc(100% - 16px);
   min-height: 119px;
@@ -679,45 +792,57 @@ textarea {
   border-radius: 4px;
   border: solid 1px var(--border-normal);
 }
+
 button {
   cursor: pointer;
 }
+
 .main-content {
   display: flex;
   flex-direction: column;
 }
+
 textarea {
   font-size: 16px;
   resize: none;
 }
+
 .progress {
   margin: 0 auto;
 }
+
 .dark {
   color: var(--white);
   background-color: var(--black-01);
 }
+
 .dark .selected,
 .dark a {
   color: var(--white);
 }
+
 .dark p {
   color: var(--copy-color);
 }
+
 .hidden {
   display: none;
 }
+
 .mb-16p {
   margin-bottom: 16px;
 }
+
 [data-state*="responsive.mobile"][data-state~="hamburger.hamburger_open"] {
   .sandbox-iframe {
     pointer-events: none;
   }
 }
+
 a.active {
   background-color: var(--hamburger-active-link);
   font-weight: bold;
+
   &::before {
     content: "";
     display: inline-block;
@@ -734,6 +859,6 @@ a.active {
 
 [data-state*="responsive.mobile"] {
   .pageWrapper {
-    margin-left:0;
+    margin-left: 0;
   }
-}
+}
\ No newline at end of file