@font-face {
  font-family: 'Kadwa';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/kadwa/v10/rnCm-x5V0g7ipiTAT8M.ttf) format('truetype');
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZJ.ttf) format('truetype');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/tajawal/v9/Iura6YBj_oCad4k1nzGBDg.ttf) format('truetype');
}
/***** 
Coded for desktop-first
Max font sizes for fluid text before media queries
*****/
/************* General Styles **************/
* {
  box-sizing: border-box;
}
html {
  font: 17px/1.5 Tajawal, sans-serif;
}
body {
  margin: 4rem 0 0;
}
h1,
h2,
h3 {
  font-family: Merriweather, serif;
}
img {
  border: #333 solid 1px;
  height: auto;
  max-width: 100%;
}
/******** Widths for anything needed to be centered on page **************/
#page-header,
nav ul,
#pool-columns,
#blurbs,
footer p {
  margin: 0 auto;
  max-width: 1183px;
  width: 90%;
}
/******** Page Header *************/
#page-header {
  display: flex;
  flex-wrap: wrap;
}
#page-header div:first-child {
  flex: 1;
  order: 2;
  text-align: center;
}
#page-header div:last-child {
  flex: 1;
  margin-right: 0.5rem;
  order: 1;
}
#page-header h1 {
  font-size: 76px;
  margin: 0;
}
#page-header img {
  display: block;
  margin: 0 auto;
}
#page-header p {
  font: bold small-caps 48px/1.5 Kadwa, serif;
  margin: 0;
}
/************** Navbar ****************/
nav {
  background-color: #005583;
  border-top: #333 solid 5px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
nav ul {
  padding: 0;
}
nav li {
  display: inline;
}
nav a {
  color: #fff;
  display: inline-block;
  font-weight: bold;
  padding: 0.5rem;
  text-decoration: none;
}
nav a:hover {
  background-color: #fff;
  color: #333;
}
#nav-trigger {
  background-color: #000;
  color: #fff;
  cursor: pointer;
  display: block;
  padding: 0.5rem;
  text-align: center;
}
#nav-trigger,
#nav-checkbox {
  display: none;
}
/************ Main Header **************/
main header {
  background-color: #f2f2f1;
  border-bottom: #999 solid 1px;
  border-top: #999 solid 1px;
  margin-top: 1rem;
  padding: 1rem;
  text-align: center;
}
main header h2 {
  font-size: 48px;
  margin: 0;
}
main header p {
  font-size: 36px;
  margin: 0;
}
.phone {
  font-size: 48px;
  margin-bottom: 0;
}
/*********** Pool columns **************/
#pool-columns {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem;
}
#pool-columns section {
  flex: 1;
  margin-right: 1rem;
}
#pool-columns section:last-child {
  margin-right: 0;
}
/************** Specials ************/
#special {
  background-color: #f2f2f1;
  border-bottom: #333 solid 1px;
  border-top: #333 solid 1px;
  padding: 1rem;
  text-align: center;
}
#special h2 {
  font-size: 5vw;
  margin: 0;
}
#special p {
  margin-top: 0;
}
/***************** Blurbs **************/
#blurbs {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem;
}
#blurbs section {
  flex: 1;
  margin-right: 1rem;
  text-align: center;
}
#blurbs section:last-child {
  margin-right: 0;
}
#blurbs img {
  border: #005583 solid 5px;
  border-radius: 50%;
}
/************* Footer ****************/
footer {
  background-color: #deb887;
  border-top: #333 solid 2px;
}
footer p {
  padding: 1rem;
}
/************** Fluid text starts at 1200px *************/
@media screen and (max-width: 1200px) {
  #page-header h1 {
    font-size: calc(36px + (76 - 36) * (100vw - 320px) / (1200 - 320));
  }
  #page-header p,
  main header h2 {
    font-size: calc(20px + (48 - 20) * (100vw - 320px) / (1200 - 320));
  }
  main header p {
    font-size: calc(18px + (36 - 18) * (100vw - 320px) / (1200 - 320));
  }
  .phone {
    font-size: calc(24px + (48 - 24) * (100vw - 320px) / (1200 - 320));
  }
}
/************ 794px and narrower ****************/
@media screen and (max-width: 794px) {
  #nav-trigger,
  #nav-checkbox:checked + ul,
  nav li,
  #pool-columns {
    display: block;
  }
  nav ul {
    display: none;
    width: 100%;
  }
  nav a {
    border-bottom: #000 solid 2px;
    display: block;
    min-height: 45px;
  }
  #pool-columns img {
    float: left;
    margin: 0 2rem 1rem 0;
  }
  #pool-columns p {
    clear: left;
    margin-bottom: 2rem;
  }
}
/************** 569px and narrower ****************/
@media screen and (max-width: 569px) {
  #page-header {
    flex-direction: column-reverse;
  }
  #pool-columns img {
    float: none;
    margin: 0;
  }
  #blurbs {
    display: block;
  }
  #blurbs p {
    padding-bottom: 2rem;
  }
}
/************** Minimum font thresholds *************/
@media screen and (max-width: 320px) {
  #page-header h1 {
    font-size: 36px;
  }
  #page-header p,
  main header h2 {
    font-size: 20px;
  }
  .phone {
    font-size: 24px;
  }
  main header p {
    font-size: 18px;
  }
}