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;
      background-color: ${({ theme }) => theme.colors['500']};

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

   * {
      box-sizing: border-box;
   }

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

      font-size: 1rem;

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

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

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

   a {
      color: white;
      text-decoration: none;

      transition: all 0.25s;

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

   img {
      max-width: 100%;
      vertical-align: middle;
   }


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

   ul {
      list-style: none;
      margin: 0;
      padding: 0;
   }

   p {
      padding: 0;
      margin: 0;
   }

   @keyframes typing {
      to { left: 100% }
   }

   @keyframes blinking {
      0% { opacity: 0 }
      50% { opacity: 1 }
      100% { opacity: 0 }
   }
`;
