@charset "utf-8";
/* ==========================================================
   Water Lilly Pharmacy
   fonts_and_colors.css
   Global typography, brand colors, links, and buttons
   ========================================================== */
/* ---------- Fonts ---------- */
@font-face {
  font-family: "Montserrat";
  src:
    url("../fonts/montserrat-semibold-webfont.woff2") format("woff2"), url("../fonts/montserrat-semibold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* ---------- Colors ---------- */ 
.color-deeppink    {color: #EF5BA1;} /* Color Deep Pink */
.color-seagrass    {color: #62A07E;} /* Color Seagrass */
.color-amethyst    {color: #301A4B;} /* Color Amethyst */
.color-blackforest {color: #1E3F20;} /* Color Black Forest */
.color-steelblue   {color: #347FCA;} /* Color SteelBlue */
.color-razzmatazz  {color: #EE246A;} /* Color Razzmataszz */
.color-white       {color: #F0F8FF;} /* Color White */
.color-brightwhite {color: #FFFFFF;} /* Color BrightWhite */
.color-dark        {color: #222222;} /* Color Dark */

.background-color-deeppink    {background: #EF5BA1;} /* Color Deep Pink */
.background-color-seagrass    {background: #62A07E;} /* Color Seagrass */
.background-color-amethyst    {background: #301A4B;} /* Color Amethyst */
.background-color-blackforest {background: #1E3F20;} /* Color Black Forest */
.background-color-steelblue   {background: #347FCA;} /* Color SteelBlue */
.background-color-razzmatazz  {background: #EE246A;} /* Color Razzmataszz */
.background-color-white       {background: #F0F8FF;} /* Color White */
.background-color-brightwhite {background: #FFFFFF;} /* Color BrightWhite */
.background-color-dark        {background: #222222;} /* Color Dark */
/* ---------- Global Typography ---------- */
html, body {
  font-size: 18px;
}
body {
  font-family: "Source Sans 3", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: #222222; /* Color Dark */
}
p {
  margin: 0 0 0.75rem 0;
  font-weight: 400;
  line-height: 1.6;
}
p a:hover {
  color: #347FCA; /* Color SteelBlue */ 
  text-decoration: underline;
}
li {
  margin: 0 0 0.55rem 0;	
  margin-left: 20px;
  line-height: 1.6;
}
strong, b {
  font-weight: 600;
  color: #301A4B; /* Color Amethyst */	
}
/* ---------- Headings ---------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  margin-top: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 600;
}
h1, .h1 {
  font-size: 1.9rem;
  line-height: 1.2;
  color: #301A4B; /* Color Amethyst */
}
h2, .h2 {
  font-size: 1.6rem;
  line-height: 1.3;
  color: #222222; /* Color Dark */	
}
h3, .h3 {
  font-size: 1.3rem;
  line-height: 1.35;
  margin-top: 1.5rem; 
  margin-bottom: 0;
  color: #222222; /* Color Dark */	
}
h4, .h4 {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: 0;
  color: #222222; /* Color Dark */	
}
h5, .h5 {
  font-size: 1.0rem;
  font-weight: 500;
  color: #222222; /* Color Dark */
}
h6, .h6 {
  font-size: 0.8rem;
  font-weight: 600;
  color: #222222; /* Color Dark */	
}
/* ---------- Links ---------- */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
a:hover, a:focus {
  text-decoration: none;
}
/* ---------- Buttons ---------- */
.btn {
  font-family: "Quicksand", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.btn-primary, .btn-primary:visited, .btn-primary:active {
  background-color: #347FCA !important; /* Color SteelBlue */ 
  border: none !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #62A07E !important; /* Color Seagrass */ 
}
.btn-secondary, .btn-secondary:visited, .btn-secondary:active {
  background-color: #62A07E !important; /* Color Seagrass */ 
  border: none !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: #347FCA !important; /* Color SteelBlue */
}
.btn-small {
	font-size: 0.9rem;
}
/* ---------- Responsive Typography ---------- */
:root {
  --readable-content-width-lg: 58rem;
  --readable-content-width-xl: 61rem;
  --readable-content-width-xxl: 64rem;
}

@media (min-width: 992px) {
  .container :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    max-width: var(--readable-content-width-lg);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1200px) {
  .container :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    max-width: var(--readable-content-width-xl);
  }
}

@media (min-width: 1400px) {
  .container :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    max-width: var(--readable-content-width-xxl);
  }
}
@media (max-width: 768px) {
  html, body {
    font-size: 17px;
  }
  h1, .h1 {
    font-size: 1.7rem;
  }
  h2, .h2 {
    font-size: 1.45rem;
  }
}