import { css } from '@emotion/react'

export const globalStyles = css`
html {
    height: 100%;
    max-width: 100%;
    min-width: 320px;
    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), 
        rgb(239 244 246) 65%
        /* rgba(255, 255, 255, 0) 65% */
    );
    height: 100%;
    /* font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; */
    font-weight: 600;
}
#app {
    height: 100%;
    overflow-y: auto;
}

@font-face {
    font-family: 'KiyosunaSans';
    src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'KiyosunaSans';
    src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
    font-weight: lighter;
    font-style: normal;
}
@font-face {
    font-family: 'RFKrabuler';
    src: url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.eot'}');
    src:
        url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff2'}') format('woff2'),
        url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff'}') format('woff'),
        url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
    font-weight: normal;
    font-style: normal;
}
`