import { createGlobalStyle } from 'styled-components';

export const GlobalStyles = createGlobalStyle`
   :root {
      font-family: Inter, system-ui, Arial, sans-serif;
      font-weight: 400;
      font-size: 16px;

      color-scheme: light dark;
      color: white;
      background-color: ${({ theme }) => theme.colors.bg};

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

   * {
      box-sizing: border-box;
   }

   body {
      margin: 0;
      min-height: 100vh;
      width: 100%;
   }

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

      transition: all 0.25s;

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

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

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

   button {
      border: none;
   }

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

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

   }
`;