:root {
  --color   : black;
  --bgcolor : #ecf3f7;
  
  --headerbg: white;
  --mainbg  : white;
  --footerbg: #cce0eb;
  
  --border: #cce0eb;
  --theme : rgb(0 35 126 / 0.27);
  --review: rgb(231 243 250 / 1.0);

  --call-out-1: rgb(226 233 253 / 1.0);

  --box-shadow: rgb(0 0 0 / 0.11);
}

html {
  *, *:before,*:after { box-sizing: border-box; }

  body {
    margin: 0.0rem auto;
    padding: 0.0rem 0.0rem;
    font-size: 1.1rem;
    font-weight: 400;
    font-family: Roboto, system-ui, sans-serif;
    line-height: 1.5;
    overflow: auto;
    color: var(--color);
    background-color: var(--bgcolor);
    
    header {
      margin: 0.0rem auto;
      padding: 0.0rem;
      height: 6.25rem;
      background-color: var(--headerbg);
    }
    
    main {
      margin: 1.25rem auto 1.875rem auto;
      padding: 1.0rem;
      max-width: 50.0rem;
      border-radius: 0.5rem;
      border-bottom: 1px solid var(--border);
      background-color: var(--mainbg);
      
      article {
	margin: 0.0rem auto;
	padding: 0.0rem;
	
	strong { font-weight: bold; }
	
	h1 {
	  margin: 0.0rem;
	  padding: 0.0rem;
	  line-height: 1.1;
	  font-family: "Playfair Display", serif;
	  font-size: clamp(1.80rem, -0.875rem + 8.333vw, 2.10rem);
	  text-align: left;
	  color: #0a2279;
	  
	  @media(max-width: 50.0rem) {
	    text-align: center;
	  }
	}
	
	ul { /* Byline*/
	  width: 100%;
	  margin: 1.0rem 0.0rem;
	  padding: 0.0rem;
	  display: flex;
	  flex-direction: row;
	  justify-content: flex-start;
	  
	  li {
	    margin: 0.0rem 0.25rem;
	    padding: 0.0rem 0.0rem;
	    display: flex;
	    align-items: center;
	    font-size: 1.25rem;
	  }
	}	

	p#opening-quote {
	  display: flex;
	  align-items: center;
	  font-size: 1.2rem;
	  font-style: italic;
	  border: thin solid var(--theme);
	  border-radius: 0.5rem;
	  box-shadow: var(--box-shadow) 1px 1px 15px 0px;
	  
	  span {
	    font-size: 1.50rem;
	    padding: 0.6875rem;
	    margin-right: 1.0rem;
	    color: var(--mainbg);
	    background-color: var(--theme);
	  }
	}
	
	img {
	  height: auto;
	  width: 100%;
	  margin: 0.5rem 0.0rem;
	  border-radius: 0.5rem;
	  box-shadow: var(--box-shadow) 1px 1px 15px 0px;
	}
	
	p { margin: 1.0rem 0.0rem; }
	a { font-weight: bold; }

	ul#features {
	  width: 100%;
	  margin: 0.0rem 0.0rem;
	  padding: 0.625rem;
	  display: flex;
	  flex-direction: column;

	  li {
	    border-bottom: thin solid var(--border);
	    
	    img {
	      height: 3.125rem;
	      width: auto;
	      box-shadow: none;
	    }

	    span { margin-left: 1.25rem; }
	    
	    sup {
	      opacity: 0.49;
	      margin-left: 0.125rem;
	      font-size: smaller;
	      vertical-align: super;
	    } 
	  }
	}

	h2#reviews-heading {
	  text-align: center;
	  font-style: italic;
	  border-top: thin dotted var(--border);
	  border-bottom: thin dotted var(--border);
	  padding: 0.625rem 0.0rem;
	}

	p.review {
	  font-style: italic;
	  margin: 1.25rem; 0.0rem;
	  padding: 1.25rem;
	  border-radius: 0.5rem;
	  background-color: var(--review);

	  span {
	    font-weight: bold;
	    font-style: normal;
	  }
	}

	section#hotel-airbnb {
	  display: flex;
	  
	  p { order: 1; margin:0.0 rem 0.25rem; }
	  img { order: 2; width: 42%; }
	  
	  @media(max-width: 50.0rem) {
	    flex-direction: column;
	    p { order: 2; margin:0.0 rem 0.25rem; }
	    img { order: 1; width: 100%; }
	  }
	}

	section#call-out-1 {
	  margin-top: 1.25rem;;
	  padding: 1.0rem;
	  border: thin solid var(--border);
	  border-radius: 8px;
	  background-color: var(--call-out-1);

	  p {
	    span { color: rgb(10, 34, 121); }
	  }
	}

	section#call-out-2 {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin: 1.25rem 0.0rem;
	  padding: 1.0rem;
	  border: thin solid rgb(205, 202, 202);
	  border-radius: 0.5rem;
	  text-align: center;
	  background-color: rgb(241 241 241 / 1.0);

	  img { box-shadow: none; }
	  
	  h2 {
	    color: rgb(10 34 121 / 1.0);
	    font-size: 1.8rem;
	    font-weight: bold;
	  }

	  button {
	    color: white;
	    padding: 1.375rem;
	    font-size: 1.50rem;
	    font-weight: bold;
	    border: thin solid rgb(71, 149, 72);
	    border-radius: 0.5rem;
	    background-color: rgb(92, 181, 78);
	    box-shadow: rgba(0, 0, 0, 0.49) 1px 1px 16px 0px;

	    span { margin-right: 0.25rem; }
	  }

	  p#special-offer {
	    line-height: 1.1;
	    span {
	      font-weight: 600;
	      color: rgb(213, 105, 101);
	    }
	  }
	}

	section#footnotes {
	  margin: 40px 20px;
	  opacity: 0.56;
	  border-top: thin solid rgb(204, 204, 204);

	  h2 {
	    margin: 0.0rem;
	    font-size: 1.25rem;
	  }
	}
      }
    }
    
    footer {
      margin: 0.0rem;
      padding: 4.0rem 2.0rem;
      min-height: 4.0rem;
      color: inherit;
      background-color: var(--footerbg);
      
      ul {
	width: 100%;
	margin: 0.0rem;
	padding: 0.0rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	li {
	  margin: 0.0rem 0.25rem;
	  padding: 0.25rem;
	  display: flex;
	  align-items: center;
	  white-space: nowrap;
	}
      }
      
      p {
	width: 100%;
	margin: 0.5rem;
	
	&.copyright { text-align: center; }
	span { margin-right: 0.125rem; }
      }
    }
  }
}