import { colors , breakpoints } from './variables' ; const normalize = `
  html {
    box-sizing: border-box;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  a {
    text-decoration: none;

    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }

  img {
    max-width: 100%;
    object-fit: contain;
    position: relative;
  }

  figure {
    margin: 2rem 0;
  }

  figcaption {
    font-size: 80%;
  }

  table {
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid ${ colors . gray02 };
    font-size: 85%;
    border-collapse: collapse;
  }

  td,
  th {
    padding: .25rem .5rem;
    border: 1px solid ${ colors . gray02 };
  }

  th {
    text-align: left;
  }

  tbody {
    tr {
      &:nth-of-type(odd) {
        td {
          background-color: ${ colors . gray01 };
        }
        tr {
          background-color: ${ colors . gray01 };
        }
      }
    }
  }

  h1, h2, h3, h4, h5, h6 {
    margin-top: 1.414rem;
    margin-bottom: .5rem;
    font-weight: 600;
    text-rendering: optimizeLegibility;
  }

  h1 {
    margin-top: 0;
  }

  p {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  ul,
  ol,
  dl {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  dt {
    font-weight: bold;
  }

  dd {
    margin-bottom: .5rem;
  }

  hr {
    position: relative;
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid ${ colors . gray02 };
  }

  blockquote {
    margin: .8rem 0;
    padding: .5rem 1rem;
    border-left: .25rem solid ${ colors . gray02 };
    color: ${ colors . gray05 };

    p {
      &:last-child {
        margin-bottom: 0;
      }
    }

    @media (min-width: ${ breakpoints . md }px) {
      padding-right: 5rem;
      padding-left: 1.25rem;
    }
  }
` ; export default normalize ;