text: import { createGlobalStyle } from "styled-components";
  
  const GlobalStyles = createGlobalStyle`
    :root {
      --red: #FF4949;
      --black: #2E2E2E;
      --yellow: #ffc600;
      --white: #fff;
      --grey: #eee;
      --blue: #2a265f;
    }
  
  
    html {
      font-size: 62.5%;
      box-sizing:border-box;
      scrollbar-width: thin;
      scrollbar-color: var(--blue) var(--white);
    }
  
    body {
      font-size: 2rem;
      color: var(--black);
    }
  
    figure{
      margin:0;
    }
  
    fieldset {
      border-color: rgba(0,0,0,0.1);
      border-width: 1px;
    }
  
    .gatsby-image-wrapper img[src*=base64\\,] {
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
    }
  
    /* Scrollbar Styles */
    body::-webkit-scrollbar {
      width: 10px;
    }
  
    body::-webkit-scrollbar-track {
      background: var(--white);
    }
    body::-webkit-scrollbar-thumb {
      background-color: var(--blue) ;
      border-radius: 6px;
      border: 3px solid var(--white);
    }
  
    img {
      max-width: 100%;
    }
  
    .tilt {
      transform: rotate(-2deg);
      position: relative;
      display: inline-block;
    }`;
  
  export default GlobalStyles;
  