import React from 'react';
import { Helmet } from 'react-helmet';
import { Global, css  } from '@emotion/react'

import { MainPage } from './pages/main';

const App = () => {
    return(
        <>
            <Helmet>
                <meta name="viewport" content="width=device-width, user-scalable=no" />
            </Helmet>
            <Global
                styles={css`
                    * { box-sizing: border-box; }
                    html {
                        height: 100%;
                        max-width: 100%;
                        overflow: hidden;
                    }
                    body {
                        color: #000;
                        /* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
                        background: radial-gradient(
                            farthest-side at bottom left,
                            rgba(35, 235, 4, 0.709), 
                            rgba(255, 255, 255, 0) 65%
                        ),
                        radial-gradient(
                            farthest-corner at bottom center,
                            rgba(244, 244, 8, 0.6), 
                            rgba(255, 255, 255, 0) 40%
                        ),
                        radial-gradient(
                            farthest-side at bottom right,
                            rgba(0, 195, 255, 0.648), 
                            rgba(255, 255, 255, 0) 65%
                        );
                        height: 100%;
                        /* font-family: "SB Sans Screen"; */
                        font-family: "SBSansScreenRegular";
                    }
                    #app {
                        height: 100%;
                    }

                    @font-face {
                        font-family: 'SBSansScreenRegular';
                        src: url('${__webpack_public_path__ + 'remote-assets/SBSansScreen.eot'}');
                        src:
                            url('${__webpack_public_path__ + '/remote-assets/SBSansScreen.eot?#iefix'}') format('embedded-opentype'),
                            url('${__webpack_public_path__ + '/remote-assets/SBSansScreen.woff2'}') format('woff2'),
                            url('${__webpack_public_path__ + '/remote-assets/SBSansScreen.woff'}') format('woff'),
                            url('${__webpack_public_path__ + '/remote-assets/SBSansScreen.ttf'}') format('truetype'),
                            url('${__webpack_public_path__ + '/remote-assets/SBSansScreen.svg#SBSansScreen-Regular'}') format('svg');
                        font-weight: normal;
                        font-style: normal;
                    }
                `}
            />
            <MainPage />
        </>
    )
}

export default App;