fix: update settings

src/core/styles/functions.scss

@@ -0,0 +1,6 @@
+@use 'sass:math';
+
+@function rem($size) {
+  $remSize: math.div($size, $base-font-size);
+  @return $remSize * 1rem;
+}

src/core/styles/globals.scss

@@ -0,0 +1,29 @@
+:root {
+  --background: #ffffff;
+  --foreground: #333333;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

src/core/styles/index.scss

@@ -0,0 +1,3 @@
+@import './variables.scss';
+@import './mixins.scss';
+@import './functions.scss';

src/core/styles/mixins.scss

@@ -0,0 +1,23 @@
+@mixin onlymobile {
+  @media (min-width: 0px) and (max-width: calc($tablet - 1px)) {
+    @content;
+  }
+}
+
+@mixin iftablet {
+  @media (min-width: $tablet) {
+    @content;
+  }
+}
+
+@mixin iflaptop {
+  @media (min-width: $laptop) {
+    @content;
+  }
+}
+
+@mixin ifdesktop {
+  @media (min-width: $desktop) {
+    @content;
+  }
+}

src/core/styles/reset.scss

@@ -0,0 +1,106 @@
+/* Reset and base styles  */
+* {
+  padding: 0;
+  margin: 0;
+  border: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // stop highlights element blue when tapping
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Links */
+
+a,
+a:link,
+a:visited {
+  text-decoration: none;
+  color: unset;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+/* Components */
+
+aside,
+nav,
+footer,
+header,
+section,
+main {
+  display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0;
+  padding: 0;
+  //margin-block-start: 0;
+  //margin-block-end: 0;
+}
+
+ul[role='list'], ol[role='list'] {
+  list-style: none;
+}
+
+ul,
+ul li {
+  list-style: none;
+}
+
+/* Form */
+
+input,
+textarea,
+button,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: transparent;
+}
+
+input::-ms-clear {
+  display: none;
+}
+
+button,
+input[type='submit'] {
+  display: inline-block;
+  box-shadow: none;
+  background-color: transparent;
+  background: none;
+}
+
+input:focus,
+input:active,
+button:focus,
+button:active {
+  outline: none;
+}
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+}
+
+img, picture, svg, video, canvas {
+  background-repeat: no-repeat;
+  background-size: cover;
+}

src/core/styles/variables.scss

@@ -0,0 +1,30 @@
+//frontend breakpoint
+$mobile: 360px;
+$tablet: 768px;
+$laptop: 1024px;
+$desktop: 1440px;
+
+//fonts
+$font-open-sans: var(--font-roboto), sans-serif;
+
+$base-font-size: 16px;
+
+$font-light: 300;
+$font-regular: 400;
+$font-medium: 500;
+$font-semi-bold: 600;
+$font-bold: 700;
+
+// colors
+$color-white: #FFFFFF;
+$color-black: #000000;
+$color-orange: #E96526;
+$color-orange-hover: #ea4b05;
+$color-lightgray: #E4E1E1;
+$color-darkgray: #999999;
+$color-text: #333333;
+$color-text-light: #222222;
+$color-mark: #E96526;
+$color-error: #ff0000;
+$color-error-light: #ff9191;
+$color-gray-border: #555555;