html, body {
  height: auto;
  @media  screen and (min-width: 20.000em) {
    background-color: $color-grayish-blue;
  }
}

body {
  font-size: 15px;
  font-family: $font-poppins;
  font-weight: normal;
  margin: 0 auto;
  line-height: 1.3;
  overflow: auto;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  width: 100%;
  z-index: -1;
}

h1 {
  font-size: 25px;
  font-weight: 700;
  margin: 0;
}

h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}
h4 {
  font-size: 17px;
  font-weight: 400;
  margin: 0;
}

h5, h6  {
  font-size: 16px;
  font-weight: normal;
  margin: 0;
}

p {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

a {
  text-decoration: none;
  &:visited, &:focus {
    @media screen and (min-width: 20.000em) {
      outline: none;
    }
  }
}

ul, ol {
  margin: 0;
  padding: 0;
}

img {
  border: 0;
  height:auto;
  width: auto;
}

*:focus {
  @media screen and (min-width: 20.000em) {
    outline: none;
  }
}
