src/styles/global.js

import { createGlobalStyle } from "styled-components"
import { modernNormalize } from "styled-modern-normalize"

import { theme } from "src/styles/theme"

export const GlobalStyle = createGlobalStyle`
${modernNormalize}

html {
  font-size: 16px;
}

body {
  font-family: ${theme.fonts.sans};
  font-style: normal;
  font-weight: normal;
  color: ${theme.colors.black};
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
}

button, a {
  &:hover {
    cursor: pointer;
  }
}

blockquote {
  font-style: italic;
  position: relative;
  margin-left: 0;
  padding-left: 2rem;

 &:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  border-radius: 2px;
  background-color: ${theme.colors.red};
  opacity: 0.5;
 }
}

.modal-open {
  overflow: hidden;
}
/* Swiper styles */
.swiper-custom {
  .swiper-pagination-bullets {
    bottom: 0 !important;
    width: auto !important;
  }
  .swiper-pagination-bullet {
    background: #e5e5e5;
  }
  .swiper-pagination-bullet-active {
    background: #fff;
  }
}
`