import { createGlobalStyle } from 'styled-components';
import { deviceSize } from '../../common/deviceSizes';

export const GlobalStyles = createGlobalStyle`
   :root {
      font-family: ${({ theme }) => theme.fonts.primary};
      font-weight: 400;
      font-size: 16px;

      color-scheme: light dark;
      color: white;

      font-synthesis: none;
      text-rendering: optimizeLegibility;

      scroll-behavior: smooth;
   }


   body {
      margin: 0;
      min-height: 100vh;
      width: 100%;
      overflow-x: hidden;
      position: relative;

      font-size: 1rem;
      background-color: ${({ theme }) => theme.colors['bg']};


      @media screen and (max-width: ${deviceSize.md}) {
         /* font-size: calc(0.8vw + 0.6rem); */
      }
   }
   
   
   #root > .site-content {
      margin: 0 auto;
      max-width: 1200px;
      padding: 0 1em;
      overflow-x: hidden;
   }

   .text {
      &--accent {
         color: ${({ theme }) => theme.colors.accent};
      }

      &--gradient {
         background-image: linear-gradient(90deg, rgba(252, 70, 107, 1) 0%, rgba(30, 109, 204, 1) 50%, rgba(252, 70, 107, 1) 100%);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
      }
   }

   section {
      min-height: 100vh;
      padding: 5em 0;
   }

   a {
      &:hover {
      color: ${({ theme }) => theme.colors.accent};
      }
   }

   button {
      font-family: ${({ theme }) => theme.fonts.primary};
      border: none;
   }

`;
