replaced open sans with variable

src/assets/styles/_base.scss

-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  overflow-anchor: none;
-  background-color: #F1F1F1;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  min-height: 100%;
-  font-size: 16px;
-
-  @include media-below($bp-xxl) {
-    font-size: 14px;
-  }
-
-  @include media-below($bp-xs) {
-    font-size: 13px;
-  }
-
-  @include media-below($bp-xxs) {
-    font-size: 10.5px;
-  }
-}
-
-html,
-body,
-#root {
-  @include flex-column;
-  flex: 1 0 auto;
-}
-
-input[type='search']::-webkit-search-decoration,
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-results-button,
-input[type='search']::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-}

src/assets/styles/_functions.scss

-@function pxToRem($target, $context: $base-font-size) {
-  @return calc($target / $context) * 1rem;
-}
-
-@function pxToRemMd($target, $context: $base-font-size-md) {
-  @return calc($target / $context) * 1rem;
-}

src/assets/styles/_layout.scss

-.l-page {
-  @include flex-column;
-  flex: 1 1 auto;
-  padding-bottom: 7rem;
-  position:relative;
-  @include media-below($bp-xl) {
-    padding-bottom: 4rem;
-  }
-}
-
-.l-section {
-  padding: 0 3.25rem;
-
-  @include media-below($bp-xl) {
-    padding: 0;
-  }
-}

src/assets/styles/_mixins.scss

-@mixin desktop {
-  @media (min-width: 1280px) {
-    @content;
-  }
-}
+// @mixin desktop {
+//   @media (min-width: 1280px) {
+//     @content;
+//   }
+// }
 
-@mixin desktop-lg {
-  @media (min-width: 1480px) {
-    @content;
-  }
-}
+// @mixin desktop-lg {
+//   @media (min-width: 1480px) {
+//     @content;
+//   }
+// }
 
-@mixin tablet {
-  @media (max-width: 1024px) {
-    @content;
-  }
-}
+// @mixin tablet {
+//   @media (max-width: 1024px) {
+//     @content;
+//   }
+// }
 
-@mixin media-up($media) {
-  @media only screen and (min-width: $media) {
-    @content;
-  }
-}
+// @mixin media-up($media) {
+//   @media only screen and (min-width: $media) {
+//     @content;
+//   }
+// }
 
-@mixin media-below($media) {
-  @media only screen and (max-width: #{$media - 0.02px}) {
-    @content;
-  }
-}
+// @mixin media-below($media) {
+//   @media only screen and (max-width: #{$media - 0.02px}) {
+//     @content;
+//   }
+// }
 
-@mixin media-between($mediaMin, $mediaMax) {
-  @media screen and (min-width: $mediaMin) and (max-width: #{$mediaMax - 0.02px}) {
-    @content;
-  }
-}
+// @mixin media-between($mediaMin, $mediaMax) {
+//   @media screen and (min-width: $mediaMin) and (max-width: #{$mediaMax - 0.02px}) {
+//     @content;
+//   }
+// }
 
-@mixin flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+// @mixin flex-center {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
 
-@mixin flex-column {
-  display: flex;
-  flex-direction: column;
-}
+// @mixin flex-column {
+//   display: flex;
+//   flex-direction: column;
+// }
 
-@mixin button-clear {
-  border: none;
-  padding: 0;
-  background-color: transparent;
-}
+// @mixin button-clear {
+//   border: none;
+//   padding: 0;
+//   background-color: transparent;
+// }
 
-@mixin outline-none {
-  &,
-  &:active,
-  &:focus {
-    outline: none;
-  }
-}
+// @mixin outline-none {
+//   &,
+//   &:active,
+//   &:focus {
+//     outline: none;
+//   }
+// }
 
-@mixin reset-position {
-  position: relative;
-  top: initial;
-  left: initial;
-  right: initial;
-  bottom: initial;
-}
+// @mixin reset-position {
+//   position: relative;
+//   top: initial;
+//   left: initial;
+//   right: initial;
+//   bottom: initial;
+// }
 
-@mixin text-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+// @mixin text-ellipsis {
+//   white-space: nowrap;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+// }
 
-@mixin line-clamp($lines) {
-  display: -webkit-box;
-  -webkit-line-clamp: $lines;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
+// @mixin line-clamp($lines) {
+//   display: -webkit-box;
+//   -webkit-line-clamp: $lines;
+//   -webkit-box-orient: vertical;
+//   overflow: hidden;
+// }

src/assets/styles/_overwrite.scss

-// Overwrite
-.ais-ClearRefinements-button {
-  color: $grey-11;
-  font-size: pxToRem(14px);
-  letter-spacing: 0;
-  line-height: 1.15;
-  background-color: transparent;
-  border: none;
-  text-decoration: underline;
-  position: relative;
-  transition: all 0.2s;
-  outline: none;
-  cursor: pointer;
-
-  &[disabled] {
-    pointer-events: none;
-    opacity: 0.5;
-    cursor: auto;
-  }
-
-  &:hover {
-    color: $color-primary-light;
-  }
-
-  &:active {
-    color: $color-primary-dark;
-  }
-}
-
-.ais-RefinementList {
-  margin-bottom: pxToRem(32px);
-  margin-left: pxToRem(16px);
-
-  &.c-filter__refinement--closed {
-    display: none;
-  }
-}
-
-.ais-RefinementList.expanded {
-  .ais-RefinementList-showMore::before {
-    transform: rotate(180deg);
-  }
-}
-
-.ais-RefinementList-showMore {
-  color: $color-primary;
-  font-size: pxToRem(14px);
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 1.56;
-  text-align: center;
-  background-color: transparent;
-  border: none;
-  position: relative;
-  margin-left: pxToRem(20px);
-  outline: none;
-  transition: all ease-in-out 0.3s;
-  cursor: pointer;
-
-  &[disabled] {
-    display: none;
-  }
-
-  &:hover {
-    color: $color-primary-light;
-  }
-
-  &:active {
-    color: $color-primary-dark;
-  }
-
-  &::before {
-    content: '';
-    background-image: url('../images/chevron-down.svg');
-    fill: $color-primary;
-    -webkit-text-stroke-color: $color-primary;
-    background-position: center;
-    width: pxToRem(20px);
-    height: pxToRem(20px);
-    position: absolute;
-    left: pxToRem(-22px);
-    transition: all 0.2s;
-  }
-}
-
-.ais-SearchBox {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: pxToRem(24px);
-}
-
-.ais-SearchBox-input {
-  border: none;
-  color: $blue;
-  font-size: pxToRem(16px);
-  letter-spacing: 0;
-  line-height: 1.5;
-  outline: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  flex-grow: 1;
-
-  &::placeholder {
-    color: $blue;
-    font-size: pxToRem(16px);
-  }
-
-  @include media-below($bp-xl) {
-    font-size: pxToRemMd(16px);
-
-    &::placeholder {
-      font-size: pxToRemMd(16px);
-    }
-  }
-}
-
-.ais-SearchBox-form {
-  border: 1px solid $grey-6;
-  border-radius: $border-radius;
-  overflow: hidden;
-  padding: 0 pxToRem(12px);
-  height: pxToRem(33px);
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  min-width: pxToRem(340px);
-}
-
-.ais-SearchBox-submit,
-.ais-SearchBox-reset {
-  border: none;
-  background: transparent;
-  outline: none;
-  height: pxToRem(16px);
-
-  > svg {
-    color: $blue-1;
-    fill: $blue-1;
-  }
-}
-
-.ais-SearchBox-submitIcon {
-  width: pxToRem(14px);
-  height: pxToRem(14px);
-  color: $blue-1;
-  fill: $blue-1;
-}
-
-.ais-SearchBox-resetIcon {
-  width: pxToRem(14px);
-  height: pxToRem(14px);
-}
-
-.ais-SearchBox-reset {
-  margin-left: pxToRem(10px);
-  cursor: pointer;
-}
-
-.c-plaid-link {
-  padding: 0 !important;
-  background: transparent !important;
-  border-width: 0 !important;
-  border-radius: 0 !important;
-  box-shadow: $box-shadow !important;
-
-  &.c-plaid-link--select-card {
-    margin-top: pxToRem(40px);
-
-    .c-select-card__button {
-      margin-top: 0;
-    }
-  }
-}
-
-.ais-InfiniteHitsWrap {
-  min-height: pxToRem(200px);
-}
-
-.ais-Highlight-highlighted {
-  background: #fff1d6;
-  font-style: normal;
-}
-
-.acsb-trigger {
-  display: none !important;
-  visibility: hidden !important;
-  width: 0 !important;
-  height: 0 !important;
-}
-
-.ais-CurrentRefinements-list {
-  display: flex;
-  flex-wrap: wrap;
-
-  > :not(:last-child) {
-    margin-right: pxToRem(16px);
-  }
-}
-
-.ais-CurrentRefinements-item {
-  border-radius: $border-radius;
-  background-color: $dark-blue;
-  padding: pxToRem(4px) pxToRem(8px);
-  flex-shrink: 0;
-  margin-bottom: pxToRem(16px);
-}
-
-.ais-CurrentRefinements-item-link {
-  font-size: pxToRem(16px);
-  line-height: 1.5;
-  font-weight: 600;
-  color: $white;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-}
-
-.ais-CurrentRefinements-close {
-  color: $white;
-  width: pxToRem(24px);
-  margin-left: pxToRem(8px);
-}
-
-.recharts-surface {
-  overflow: visible;
-}
-
-.recharts-cartesian-axis-tick-value {
-  color: #9aa1a9;
-  font-size: 10px;
-  letter-spacing: 0;
-  line-height: 20px;
-}
-.recharts-tooltip-wrapper:empty{
-  display: 'none',
-}
-.recharts-text{
-  &.recharts-pie-label-text{
-  font-size: 14px;
-  @include media-below($bp-xl) {
-    font-size: 12px;
-  }
-  }
-}

src/assets/styles/_reset.scss

-/**
- * Reset
- *
- */
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-*,
-body,
-button,
-input,
-textarea,
-select {
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-pre,
-form,
-fieldset,
-button,
-input,
-textarea,
-p,
-blockquote,
-th,
-td {
-  margin: 0;
-  padding: 0;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-fieldset,
-img {
-  border: 0;
-}
-
-address,
-caption,
-cite,
-code,
-dfn,
-em,
-th,
-var {
-  font-style: normal;
-  font-weight: normal;
-}
-
-strong {
-  font-weight: 800;
-}
-
-ol,
-ul {
-  list-style: none;
-}
-
-caption,
-th {
-  text-align: left;
-}
-
-q:before,
-q:after {
-  content: '';
-}
-
-abbr,
-acronym {
-  border: 0;
-}
-
-svg {
-  flex-shrink: 0;
-}
-
-textarea,
-input:matches([type='email'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='url']) {
-  -webkit-appearance: none;
-
-  &::-webkit-autofill,
-  &::-webkit-contacts-auto-fill-button,
-  &::-webkit-credentials-auto-fill-button {
-    visibility: hidden;
-    user-select: none;
-    display: none !important;
-    position: absolute;
-  }
-}
-
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-
-  &::-webkit-autofill,
-  &::-webkit-contacts-auto-fill-button,
-  &::-webkit-credentials-auto-fill-button {
-    visibility: hidden;
-    user-select: none;
-    display: none !important;
-    position: absolute;
-  }
-}

src/assets/styles/_typography.scss

-body,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-pre,
-form,
-fieldset,
-button,
-input,
-textarea,
-p,
-blockquote,
-th,
-td {
-  font-family: $font-family;
-}
-
-p {
-  vertical-align: middle;
-  display: inline-block;
-  word-break: break-word;
-  font-size: pxToRem(16px);
-  line-height: 1.5;
-
-  @include media-below($bp-md) {
-    font-size: pxToRemMd(16px);
-  }
-}
-
-a {
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-}
-
-strong {
-  font-weight: bold;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 500;
-}

src/assets/styles/_utility.scss

-.u-mr-24 {
-  margin-right: 24px;
-}
-
-.u-ml-32 {
-  margin-left: pxToRem(32px);
-}
-
-.u-position-relative {
-  position: relative;
-}
-
-.u-column {
-  @include flex-column;
-}
-
-.u-display-none {
-  display: none;
-}
-
-.u-superscript {
-  font-size: pxToRem(14px);
-  font-weight: medium;
-}
-
-.u-text-align-right {
-  text-align: right;
-}
-
-.u-hide {
-  width: 0;
-  height: 0;
-  visibility: hidden;
-  display: none;
-  position: fixed;
-  top: -20px;
-  right: -20px;
-  z-index: -1;
-}

src/assets/styles/_variables.scss

-$base-font-size: 16px;
-$base-font-size-md: 14px;
-
-$font-family: 'Avenir Next';
-
-// Colors
-$color-primary: #024f86;
-$color-primary-light: #024f86;
-$color-primary-dark: #003246;
-$yellow: #ffeac1;
-$white: #ffffff;
-$grey: #f4f4f4;
-$grey-1: #ccced0;
-$grey-2: #fafafa;
-$grey-3: #c2c5c6;
-$grey-4: #d8d8d8;
-$grey-5: #808285;
-$grey-6: #c9d6db;
-$grey-7: rgba(128, 130, 133, 0.5);
-$grey-8: rgba(201, 214, 219, 0.25);
-$grey-9: #ebeff2;
-$grey-10: #f0f5f6;
-$grey-11: #8b8b8b;
-$grey-12: #b0bfc540;
-$grey-13: #9d9ea4;
-$grey-14: #f7fafa;
-$grey-15: #ebf2f2;
-$dark-blue: #003246;
-$blue: #4e7a8c;
-$blue-1: #6e8fae;
-$blue-2: #024f86;
-$blue-3: #0f85ec;
-$blue-4: #5c7e9f;
-$blue-5: #dde5e7;
-$black: #000;
-$black-1: rgba(0, 0, 0, 0.3);
-$black-2: rgba(32, 38, 43, 0.9);
-$black-4: #172029;
-$black-5: #272727;
-$black-6: #1d2731;
-$red: #ff5028;
-$success: #09846b;
-$success-1: #00876a;
-$success-2: #008a68;
-
-// Shadow
-$button-shadow-hover: 0 5px 6px 0 rgba(112, 120, 135, 0.24);
-$button-shadow-pressed: 0 2px 4px 0 rgba(112, 120, 135, 0.24);
-$box-shadow: 0 3px 8px 0 rgba(112, 120, 135, 0.24);
-$account-dropdown-shadow: 0 6px 38px 0 rgba(112, 120, 135, 0.56);
-
-// Border Radius
-$border-radius: 4px;
-$border-radius-md: 8px;
-
-// Breakpoints
-$bp-xxs: 325px;
-$bp-xs: 400px;
-$bp-sm: 576px;
-$bp-md: 768px;
-$bp-lg: 992px;
-$bp-xl: 1200px;
-$bp-xxl: 1350px;
-
-// z-index
-$index-xxs: 1;
-$index-xs: 2;
-$index-sm: 3;
-$index-md: 4;
-$index-lg: 5;
-$index-xl: 6;
-$index-xxl: 7;

src/components/Buttons/PrimaryButton/PrimaryButton.js

 import React from "react";
 import PropTypes from "prop-types";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import {
   PrimaryButtonContainer,
   PrimaryButtonStyled,
 };
 
 PrimaryButton.defaultProps = {
-  font: "Open Sans",
+  font: TextFont,
 };

src/components/Cards/CreateOfferCard/CreateOffer.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { Label } from "../../CheckBox/Label";
 import Select from "../../Select/Select";
 
   align-items: center;
 `;
 export const CreateOfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   width: 328px;
   height: 33px;
   text-align: center;
   margin-bottom: 40px;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.styled.js

 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
+import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
 import { Label } from "../../../CheckBox/Label";
 import { TextField } from "../../../TextFields/TextField/TextField";
 
 export const CreateOfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   width: 328px;
   height: 33px;
   text-align: center;
   position: relative;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;

src/components/Cards/FilterCard/FilterCard.js

 import qs from "query-string";
 import { useTranslation } from "react-i18next";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 const FilterCard = () => {
   const [appliedFilters, setAppliedFilters] = useState([]);
     <FilterCardContainer>
       <Header>
         <Title>{t("filters.title")}</Title>
-        <Link to="#" textsize={"12px"} font={"Open Sans"} onClick={clearFilters}>
+        <Link to="#" textsize={"12px"} font={TextFont} onClick={clearFilters}>
           {t("filters.cancel")}
         </Link>
       </Header>
           fullWidth
           onClick={handleFilters}
           textcolor={selectedTheme.primaryPurple}
-          font="Open Sans"
+          font={TextFont}
           style={{
             fontWeight: "600",
             fontSize: "12px",

src/components/Cards/FilterCard/FilterCard.styled.js

 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const FilterCardContainer = styled(Box)`
   position: fixed;
   font-size: 24px;
   line-height: 33px;
   font-weight: 700;
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   position: relative;
 `;

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterCheckboxDropdown.js

 import PropTypes from "prop-types";
 import DropdownList from "../../../../Dropdown/DropdownList/DropdownList";
 import selectedTheme from "../../../../../themes";
+import {TextFont} from "../../../../../themes/primaryTheme/primaryThemeFonts"
 import IconWithNumber from "../../../../Icon/IconWithNumber/IconWithNumber";
 import { ReactComponent as DropdownDown } from "../../../../../assets/images/svg/down-arrow.svg";
 import { ReactComponent as DropdownUp } from "../../../../../assets/images/svg/up-arrow.svg";
             value={toSearch}
             onChange={(event) => setToSearch(event.target.value)}
             textsize={"12px"}
-            font={"Open Sans"}
+            font={TextFont}
             fullWidth
             height={"40px"}
             containerStyle={{ marginTop: "6px" }}

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterCheckboxDropdown.styled.js

 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../../themes";
+import { TextFont } from "../../../../../themes/primaryTheme/primaryThemeFonts";
 
 export const SelectedItemsContainer = styled(Box)`
   display: flex;
   padding-right: 6px;
   line-height: 12px;
   letter-spacing: 0.02em;
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   font-size: 12px;
   cursor: pointer;
   margin-right: 3px;

src/components/Cards/FilterCard/FilterDropdown/Radio/FilterRadioDropdown.js

 import DropdownItem from "../../../../Dropdown/DropdownItem/DropdownItem";
 import RadioButton from "../../../../Radio/Button/RadioButton";
 import RadioGroup from "../../../../Radio/Group/RadioGroup";
+import { TextFont } from "../../../../../themes/primaryTheme/primaryThemeFonts";
 
 const FilterRadioDropdown = (props) => {
   const [toSearch, setToSearch] = useState("");
             value={toSearch}
             onChange={(event) => setToSearch(event.target.value)}
             textsize={"12px"}
-            font={"Open Sans"}
+            font={TextFont}
             fullWidth
             height={"40px"}
             containerStyle={{ marginTop: "6px" }}

src/components/Cards/ItemDetailsCard/ItemDetailsCard.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 //import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Icon } from "../../Icon/Icon";
     gap:4px;
 `;
 export const PostDate = styled(Typography)`
-font-family: "Open Sans";
+font-family: ${TextFont};
 font-size: 12px;
 color: ${selectedTheme.primaryText};
 `;
     align-items:center;
 `;
 export const InfoText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   text-transform: capitalize;
 `;
 export const OfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   flex: 1;
   color: ${selectedTheme.primaryPurple};
   font-weight: 700;
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
 `;
 export const OfferLocation = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   padding: 0 72px;
 `;
 export const OfferCategory = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 33%;
 `;
 export const OfferPackage = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferViews = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 22px;
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;

src/components/Cards/OfferCard/OfferCard.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Icon } from "../../Icon/Icon";
   margin-left: 18px;
 `;
 export const OfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   flex: 1;
   color: ${selectedTheme.primaryPurple};
   font-weight: 700;
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
 `;
 export const OfferLocation = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   gap: 1rem;
 `;
 export const OfferCategory = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   }
 `;
 export const OfferPackage = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 export const OfferViews = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   }
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 22px;
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;

src/components/CheckBox/CheckBox.styled.js

 import { Box, Checkbox, FormControlLabel } from "@mui/material";
 import styled from "styled-components";
+import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const CheckBoxContainer = styled(Box)`
   ${(props) =>
     `}
   margin-right: 0;
   & label {
-    font-family: "Open Sans";
+    font-family: ${TextFont};
     font-size: 12px;
   }
   & span:nth-child(1) svg {

src/components/CheckBox/Label.styled.js

 import { Box, FormLabel } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
+import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const LabelContainer = styled(Box)`
     display: flex;
 `
 
 export const LeftLabel = styled(FormLabel)`
-    font-family: "Open Sans";
+    font-family: ${TextFont};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100px;
     cursor: pointer;
     color: ${selectedTheme.primaryText};
-    font-family: "Open Sans";
+    font-family: ${TextFont};
 
 `

src/components/Dropdown/DropdownItem/DropdownItem.styled.js

 import { Box } from "@mui/material";
 import styled from "styled-components";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const DropdownItemContainer = styled(Box)`
 `
 
 export const DropdownItemStyled = styled(Box)`
-    font-family: "Open Sans";
+    font-family: ${TextFont};
 `

src/components/Dropdown/DropdownList/DropdownList.styled.js

 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 
 export const DropdownListContainer = styled(Box)`
   padding-bottom: 10px;
   padding-top: 5px;
   padding-right: 0.9rem;
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${props => props.textcolor ? props.textcolor : selectedTheme.primaryText};
 `;
 

src/components/Icon/IconWithNumber/IconWithNumber.styled.js

 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const IconWithNumberContainer = styled(Box)`
     position: relative;
     font-size: 10px;
     bottom: 0;
     right: -5px;
-    font-family: "Open Sans";
+    font-family: ${TextFont};
 `

src/components/ItemDetails/Header/Header.styled.js

 import { Box, Link, Typography} from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const HeaderContainer = styled(Box)`
     margin-top: 20px;
     gap:12px;
 `
 export const HeaderText = styled(Typography) `
-    font-family: "Open Sans";
+    font-family: ${TextFont};
     line-height: 22px;
     font-size: 16px;
     color: ${selectedTheme.primaryPurple};

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.styled.js

 import { Box, Grid, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Icon } from "../../Icon/Icon";
     flex-direction: row;
     align-items: center;
     gap:7px;
-    font-family: "Open Sans";
+    font-family: ${TextFont};
     color: ${selectedTheme.primaryText};
     line-height: 16px;
     font-size: 12px;
 `;
 export const OfferTitle = styled(Typography)`
   margin-bottom:12px;
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryPurple};
   font-weight: 700;
   font-size: 24px;
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
 `;
 export const OfferLocation = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 export const OfferPIB = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 
 export const StatusText = styled(Grid)`
-font-family: "Open Sans";
+font-family: ${TextFont};
 color: ${selectedTheme.primaryText};
 `
 export const OfferCategory = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 33%;
 `;
 export const OfferPackage = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferViews = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 22px;
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 16px;

src/components/MarketPlace/Header/Header.styled.js

 import selectedTheme from "../../../themes";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import Select from "../../Select/Select";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const HeaderContainer = styled(Box)`
     margin-top: 20px;
     align-items: center;
 `
 export const HeaderLocation = styled(Box)`
-    font-family: "Open Sans";
+    font-family: ${TextFont};
     color: ${selectedTheme.primaryPurple};
     font-weight: 700;
     line-height: 22px;
 export const HeaderSelect = styled(Select)`
     width: 210px;
     height: 35px;
-    font-family: "Open Sans";
+    font-family: ${TextFont};
     margin-top: 3px;
     font-weight: 400;
     position: relative;
     }
 `
 export const SelectItem = styled(MenuItem)`
-    font-family: "Open Sans";
+    font-family: ${TextFont};
 `
 export const IconStyled = styled(Box)`
     position: relative;

src/components/Radio/Button/RadioButton.styled.js

 import { Box, FormControlLabel, Radio } from "@mui/material";
 import styled from "styled-components";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const RadioButtonContainer = styled(Box)`
   ${(props) =>
     `}
   margin-right: 0;
   & label {
-    font-family: "Open Sans";
+    font-family: ${TextFont};
     font-size: 12px;
   }
   & span:nth-child(1) svg {

src/components/Select/Select.styled.js

 import { Box, Select } from "@mui/material";
 import styled from "styled-components";
+import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const SelectStyled = styled(Select)`
     width: ${props => props.width};
     padding: 2px;
     font-size: 16px;
     font-weight: 600;
-    font-family: "Open Sans";
+    font-family: ${TextFont};
 `
 export const SelectIcon = styled(Box)`
     position: relative;

src/components/StepProgress/StepProgress.styled.js

 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
+import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const StepProgressContainer = styled(Box)`
   display: flex;
   background-color: ${(props) =>
     props.done ? selectedTheme.primaryPurple : selectedTheme.primaryDarkGrayText};
   border-radius: 100%;
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   text-align: center;
   border: 5px solid
     ${(props) => (props.current || props.done ? selectedTheme.primaryPurple : "white")};

src/main.scss

-@import './assets/styles/variables';
-@import './assets/styles/mixins';
-@import './assets/styles/functions';
-@import './assets/styles/typography';
-@import './assets/styles/base';
-@import './assets/styles/reset';
-@import './assets/styles/components/button';
-@import './assets/styles/components/icon-button';
-@import './assets/styles/components/app-button';
-@import './assets/styles/components/loader';
-@import './assets/styles/components/radio';
-@import './assets/styles/components/modal';
-@import './assets/styles/components/auth-card';
-@import './assets/styles/components/auth';
-@import './assets/styles/components/login';
-@import './assets/styles/components/login-card';
-@import './assets/styles/components/forgot-password';
-@import './assets/styles/components/input';
-@import './assets/styles/components/error-page';
-@import './assets/styles/layout';
-@import './assets/styles/overwrite';
-@import './assets/styles/utility';
+// @import './assets/styles/variables';
+// @import './assets/styles/mixins';
+// @import './assets/styles/functions';
+// @import './assets/styles/typography';
+// @import './assets/styles/base';
+// @import './assets/styles/reset';
+// @import './assets/styles/components/button';
+// @import './assets/styles/components/icon-button';
+// @import './assets/styles/components/app-button';
+// @import './assets/styles/components/loader';
+// @import './assets/styles/components/radio';
+// @import './assets/styles/components/modal';
+// @import './assets/styles/components/auth-card';
+// @import './assets/styles/components/auth';
+// @import './assets/styles/components/login';
+// @import './assets/styles/components/login-card';
+// @import './assets/styles/components/forgot-password';
+// @import './assets/styles/components/input';
+// @import './assets/styles/components/error-page';
+// @import './assets/styles/layout';
+// @import './assets/styles/overwrite';
+// @import './assets/styles/utility';

src/pages/CreateOffer/CreateOffer.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
+import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const CreateOfferContainer = styled(Container)`
   margin-top: 0px;
   align-items: center;
 `;
 export const CreateOfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   width: 328px;
   height: 33px;
   text-align: center;
   margin-bottom: 40px;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;

src/pages/ForgotPasswordPage/ForgotPassword.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
+import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const ForgotPasswordPageContainer = styled(Container)`
   margin-top: 200px;
   }
 `;
 export const ForgotPasswordTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   width: 328px;
   height: 33px;
   text-align: center;
   margin-top: 36px;
 `;
 export const ForgotPasswordDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   position: relative;
   top: -7px;
   font-size: 14px;

src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const MailSentContainer = styled(Container)`
   margin-top: 300px;
   }
 `;
 export const Title = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   width: 328px;
   height: 33px;
   margin-top: 6px;
 `;
 export const Description = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   margin-top: 9px;
   width: 279px;
   font-style: normal;
   height: 216px;
 `;
 export const StandardText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   font-size: 16px;
   padding-right: 6px;

src/pages/LoginPage/Login.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
+import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const LoginPageContainer = styled(Container)`
   margin-top: 150px;
   }
 `;
 export const LoginTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   width: 328px;
   height: 33px;
   text-align: center;
   margin-top: 36px;
 `;
 export const LoginDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   position: relative;
   top: -12px;
   height: 20px;

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.styled.js

 import { Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
+import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 
 export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   font-style: normal;
   font-weight: 400;
   display: flex;
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   position: relative;
   top: -7px;
   font-size: 14px;

src/pages/RegisterPages/Register/Register.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const RegisterPageContainer = styled(Container)`
   margin-top: 100px;
   }
 `;
 export const RegisterTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   width: 328px;
   height: 33px;
   text-align: center;
   }
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
   }
 `
 export const FooterText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: #505050;
   text-align: center;
   width: 330px;

src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.styled.js

 import { Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
+import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 
 
 export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   font-style: normal;
   font-weight: 400;
   display: flex;
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   position: relative;
   top: -7px;
   font-size: 14px;

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.styled.js

 import {  Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
+import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 
 export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   font-style: normal;
   font-weight: 400;
   display: flex;

src/pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful.styled.js

 import { Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const RegisterSuccessfulContainer = styled(Container)`
   margin-top: 300px;
   padding: 0;
 `;
 export const RegisterTitle = styled(Typography)`
-  font-family: "Mulish";
+  font-family: ${TextFont};
   width: 430px;
   text-align: center;
   flex: 1;
   margin-top: 32px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   margin-top: 36px;
   width: 430px;
   font-style: normal;

src/pages/ResetPasswordPage/ResetPasswordPage.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
+import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const ResetPasswordPageContainer = styled(Container)`
   margin-top: 200px;
   }
 `;
 export const ResetPasswordTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   width: 328px;
   height: 33px;
   text-align: center;
   margin-top: 36px;
 `;
 export const ResetPasswordDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   margin-top: 9px;
   width: 270px;
   font-style: normal;
   justify-content: center;
 `;
 export const FooterText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: ${TextFont};
   color: ${selectedTheme.primaryText};
   padding-right: 6px;
   text-align: center;

src/themes/primaryTheme/base.js

+import { createGlobalStyle } from "styled-components";
+import { pxToRemMd } from "./helper";
+import { TextFont } from "./primaryThemeFonts";
+import { variables } from './variables';
+
+
+export const BaseStyle = createGlobalStyle`
+body {
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-anchor: none;
+    background-color: #F1F1F1;
+}
+
+* {
+    box-sizing: border-box;
+}
+html {
+    min-height: 100%;
+    font-size: 16px;
+}
+html,
+body,
+#root {
+    display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+}
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+form,
+fieldset,
+button,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+  ${TextFont}
+}
+
+p {
+  vertical-align: middle;
+  display: inline-block;
+  word-break: break-word;
+  font-size: ${pxToRemMd(16)};
+  line-height: 1.5;
+}
+
+@media only screen and (max-width: ${variables.breakpoints.bpMd}) {
+    p {
+        font-size: ${pxToRemMd(14)};
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
+}
+
+a {
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+  
+  strong {
+    font-weight: bold;
+  }
+  
+  
+
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+@media only screen and (max-width: ${variables.breakpoints.bpXxl}) {
+    html {
+        font-size: 16px;
+    }
+}
+
+@media only screen and (max-width: ${variables.breakpoints.bpXs})
+{
+    html {
+        font-size: 13px;
+    }
+}
+@media only screen and (max-width: ${variables.breakpoints.bpXxs}){
+    html {
+        font-size: 10.5px;
+    }
+}
+    
+`;

src/themes/primaryTheme/helper.js

+import { css } from 'styled-components';
+import { variables } from './variables';
+
+// Pixels to rems/Rems to pixels
+export const pxToRem = (px) =>
+  `${(px / variables.sizes.baseFontSize).toFixed(3)}rem`;
+
+export const pxToRemMd = (px) =>
+  `${(px / variables.sizes.baseFontSizeMd).toFixed(3)}rem`;
+
+// Breakpoints
+export const mediaUp = (media) =>
+  `@media only screen and (min-width: ${media}px)`;
+
+export const mediaBelow = (media) =>
+  `@media only screen and (max-width: ${media - 0.02}px)`;
+
+export const mediaBetween = (mediaMin, mediaMax) =>
+  `@media only screen and (min-width: ${mediaMin}px) and (max-width: ${
+    mediaMax - '0.02'
+  }px)`;
+
+// Styles props
+const stylesObject = {
+  marginTop: (size) =>
+    css`
+      margin-top: ${pxToRem(size)};
+
+      ${mediaBelow(variables.breakpoints.bpMd)} {
+        margin-top: ${pxToRemMd(size)};
+      }
+    `,
+  marginBottom: (size) =>
+    css`
+      margin-bottom: ${pxToRem(size)};
+
+      ${mediaBelow(variables.breakpoints.bpMd)} {
+        margin-bottom: ${pxToRemMd(size)};
+      }
+    `,
+  marginLeft: (size) =>
+    css`
+      margin-left: ${pxToRem(size)};
+
+      ${mediaBelow(variables.breakpoints.bpMd)} {
+        margin-left: ${pxToRemMd(size)};
+      }
+    `,
+  marginRight: (size) =>
+    css`
+      margin-right: ${pxToRem(size)};
+
+      ${mediaBelow(variables.breakpoints.bpMd)} {
+        margin-right: ${pxToRemMd(size)};
+      }
+    `,
+
+  marginVertical: (size) =>
+    css`
+      margin-top: ${pxToRem(size)};
+      margin-bottom: ${pxToRem(size)};
+
+      ${mediaBelow(variables.breakpoints.bpMd)} {
+        margin-top: ${pxToRemMd(size)};
+        margin-bottom: ${pxToRemMd(size)};
+      }
+    `,
+
+  fontSize: (size) => css`
+    font-size: ${pxToRem(size)};
+
+    ${mediaBelow(variables.breakpoints.bpMd)} {
+      font-size: ${pxToRemMd(size)};
+    }
+  `,
+
+  maxWidth: (size) =>
+    css`
+      max-width: ${size}px;
+      width: 100%;
+
+      ${mediaBelow(variables.breakpoints.bpMd)} {
+        max-width: ${size}px;
+        width: 100%;
+      }
+    `,
+  textDecoration: (value) =>
+    css`
+      text-decoration: ${value};
+    `,
+};
+
+export const getStylesByProps = (props) => {
+  let styles = [];
+
+  Object.keys(props).forEach((key) => {
+    if (stylesObject[key] && props[key]) {
+      styles = [...styles, stylesObject[key](props[key])];
+    }
+  });
+
+  return styles;
+};

src/themes/primaryTheme/layout.js

+import { createGlobalStyle } from "styled-components";
+
+export const LayoutStyle = createGlobalStyle`
+    .l-page {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        padding-bottom: 7rem;
+        position:relative;
+    }
+    .l-section {
+        padding: 0 3.25rem;
+    }
+    @media only screen and (max-width: ${variables.breakpoints.bpXl}) {
+        .l-page {
+            padding-bottom: 4rem;
+        }
+    } 
+    @media only screen and (max-width: ${variables.breakpoints.bpXl}) {
+        .l-section {
+            padding-bottom: 0;
+        }
+    }  
+    `;
+

src/themes/primaryTheme/primaryThemeFonts.js

+import { css } from "styled-components";
+
+export const TextFont = css`
+    font-family: ${TextFont};
+`;
+
+export const AppTitle = css`
+    font-famili: "Josefin Sans";
+`;

src/themes/primaryTheme/utility.js

+import { css } from 'styled-components';
+import { mediaBelow, pxToRem } from './helper';
+import themeColors from './themeColors';
+import { variables } from './variables';
+
+export const uFlexCenter = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const uFlexColumn = css`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const uFlex = css`
+  flex: 1;
+`;
+
+export const uButtonClear = css`
+  border: none;
+  padding: 0;
+  background-color: transparent;
+`;
+
+export const uOutlineNone = css`
+  &,
+  &:active,
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const uResetPosition = css`
+  position: relative;
+  top: initial;
+  left: initial;
+  right: initial;
+  bottom: initial;
+`;
+
+export const uTextEllipsis = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const uLineClamp = ({ lines }) => css`
+  display: -webkit-box;
+  -webkit-line-clamp: ${lines};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+
+export const uTransition = css`
+  transition: all ease-in-out ${variables.transitionSpeed.transitionSpeed};
+`;
+
+export const uPositionRelative = css`
+  position: relative;
+`;
+
+export const uColumn = css`
+  ${uFlexColumn};
+`;
+
+export const uDisplayNone = css`
+  display: none;
+`;
+
+export const uSuperscript = css`
+  font-size: ${pxToRem(14)};
+  font-weight: medium;
+`;
+
+export const uTextAlignRight = css`
+  text-align: right;
+`;
+
+export const uTextAlignLeft = css`
+  text-align: left;
+`;
+
+export const uTextAlignCenter = css`
+  text-align: center;
+`;
+
+export const uHide = css`
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  display: none;
+  position: fixed;
+  top: -20px;
+  right: -20px;
+  z-index: -1;
+`;
+
+export const uDanger = css`
+  color: ${themeColors.colorRed};
+
+  > * {
+    color: ${themeColors.colorRed};
+  }
+`;
+
+export const uLabel = css`
+  color: ${themeColors.colorLabel};
+
+  > * {
+    color: ${themeColors.colorLabel};
+  }
+`;
+
+export const uBold = css`
+  font-weight: 600;
+`;
+
+export const uItalic = css`
+  font-style: italic;
+`;
+
+export const uPrimaryColor = css`
+  color: ${themeColors.colorPrimary};
+
+  > * {
+    color: ${themeColors.colorPrimary};
+  }
+`;
+
+export const uNoUnderline = css`
+  text-decoration: none !important;
+`;
+
+export const uFullWidth = css`
+  width: 100%;
+`;
+
+export const uMaxWidth342 = css`
+  max-width: 342px;
+  width: 100%;
+
+  ${mediaBelow(variables.breakpoints.bpSm)} {
+    max-width: 100%;
+  }
+`;
+
+export const uMaxWidth450 = css`
+max-width: 450px;
+width: 100%;
+
+  ${mediaBelow(variables.breakpoints.bpSm)} {
+    max-width: 100%;
+  }
+`;
+
+export const uTextCapitalize = css`
+  text-transform: capitalize;
+`;
+
+export const uTextUppercase = css`
+  text-transform: uppercase;
+`;
+
+export const mr24 = css`
+  margin-right: ${pxToRem(32)};
+`;
+
+export const ml32 = css `
+  margin-left: ${pxToRem(32)};
+`;
+
+
+

src/themes/primaryTheme/variables.js

 export const variables = {
-    family: {
-      goldSilver: 'Gotham',
-      hardAssetsAlliance: 'Avenir Next',
-    },
     typography: {
       p: {
         large: {
       indexXxl: 7,
     },
     transitionSpeed: {
-      transitionSpeed: '0.3s',
+      transitionSpeed: '0.25s',
     },
     params: {
       welcomeContentWidth: '568px',