import {createGlobalStyle, css} from 'styled-components';

export const GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: 'FallbackFont';
        src: local('Helvetica');
        size-adjust: 98.5%;
    }

    * {
        margin: 0;
        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;
        background-attachment: fixed;
        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 {
        -webkit-touch-callout: none;
        user-select: none;
    }

    @keyframes opacityAnim {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
`;