mobile

src/styles/GlobalStyle.ts

@@ -1,4 +1,4 @@
-import { createGlobalStyle } from 'styled-components';
+import {createGlobalStyle, css} from 'styled-components';
 
 export const GlobalStyle = createGlobalStyle`
     @font-face {
@@ -12,13 +12,16 @@ export const GlobalStyle = createGlobalStyle`
         padding: 0;
         box-sizing: border-box;
         font-family: 'Roboto', 'FallbackFont', system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
+        color:#0C3B2E;
     }
 
     html {
         overflow: hidden;
+        height: 100%;
     }
 
     body {
+        height: 100%;
         background-color: ${({ theme }) => theme.colors.pageBg};
         background-image: url('/images/background-raspberry.png');
         background-repeat: no-repeat;
@@ -26,6 +29,17 @@ export const GlobalStyle = createGlobalStyle`
         background-size: contain;
         background-position: left top;
         min-height: 100vh;
+
+        ${({ theme }) => theme.media.mobile(css`
+            background-position: center 72%;
+        `)};
+    }
+
+    #root {
+        height: 100%;
+        ${({ theme }) => theme.media.mobile(css`
+            overflow: auto;
+        `)};
     }
 
     button {

src/styles/theme.ts

@@ -1,3 +1,6 @@
+import {css} from "styled-components";
+import type { RuleSet } from 'styled-components';
+
 export const theme = {
     colors: {
         darkGreen: '#0C3B2E',
@@ -16,4 +19,19 @@ export const theme = {
         button: '12px',
         small: '8px',
     },
+    breakpoints: {
+        xs: '576px'
+    },
+    media: {
+        mobile: (inner: RuleSet) => css`
+          @media (max-width: 576px) {
+            ${inner};
+          }
+        `,
+        tablet: (inner: RuleSet) => css`
+          @media (max-width: 768px) {
+            ${inner};
+          }
+        `
+    } as const
 };