@use "../utils/colors.scss" as colors;

h2 {
  margin-top: 1.8rem;
  font-size: 2.4rem !important;
  color: colors.$quaternary !important;
}
p,
.link  {
  font-size: 1.68rem !important;
  line-height: 2.9rem;
}
p > strong {
  font-size: 1.68rem !important;
  background-color: colors.$secondary !important;
  border-radius: 10px;
}
.link {
  color: colors.$primary !important;
  text-decoration: underline;
}
ol,
ul {
  list-style: disc;
  li {
    font-size: 1.68rem !important;
    color: colors.$quinary !important;
  }
  li > code {
    font-size: 1.68rem !important;
    color: colors.$primary !important;
    padding: 0 !important;
  }
}
p > code {
  font-size: 1.68rem !important;
  color: colors.$primary !important;
  background-color: colors.$white;
  padding: 0 !important;
}
pre {
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
}
hr {
  opacity: 0;
}
img {
  margin-top: 1.8rem;
}

//Media Query
@media (min-width: 769px) and (max-width: 1023px) {
  h2, h3 {
    font-size: 2.1rem !important;
    color: colors.$quaternary !important;
  }
}

@media (max-width: 768px) {
  h2, h3 {
    font-size: 1.25rem !important;
  }
  p, .link  {
    font-size: 1rem !important;
    line-height: 1.5rem;
  }
  p > code {
    font-size: 1rem !important;
  }
  p > strong {
    font-size: 1rem !important;
  }
  ol,
  ul {
    li {
      font-size: 1rem !important;
    }
    li > code {
      font-size: 1rem !important;
    }
  }
}
