@charset "UTF-8";

/* CSS VARS */
:root {
  /* CSS HEX */
  --mint-cream: #f1f7eeff;
  --laurel-green: #b0bea9ff;
  --asparagus: #92aa83ff;
  --nyanza: #e0edc5ff;
  --key-lime: #e7f59eff;

  /* CSS HSL */
  --mint-cream: hsla(100, 36%, 95%, 1);
  --laurel-green: hsla(100, 14%, 70%, 1);
  --asparagus: hsla(97, 19%, 59%, 1);
  --nyanza: hsla(80, 53%, 85%, 1);
  --key-lime: hsla(70, 81%, 79%, 1);

  /* CSS HEX */
  --dark-purple: #270722ff;
  --deep-champagne: #ecce8eff;
  --medium-champagne: #dbcf96ff;
  --laurel-green: #c2c6a7ff;
  --opal: #9ac2c5ff;

  /* CSS HSL */
  --dark-purple: hsla(309, 70%, 9%, 1);
  --deep-champagne: hsla(41, 71%, 74%, 1);
  --medium-champagne: hsla(50, 49%, 72%, 1);
  --laurel-green: hsla(68, 21%, 72%, 1);
  --opal: hsla(184, 27%, 69%, 1);

  /* CSS HEX */
  --blush: #ea638cff;
  --fandango: #b33c86ff;
  --midnight-blue: #190e4fff;
  --oxford-blue: #03012cff;
  --dark-green: #002a22ff;

  /* CSS HSL */
  --blush: hsla(342, 76%, 65%, 1);
  --fandango: hsla(323, 50%, 47%, 1);
  --midnight-blue: hsla(250, 70%, 18%, 1);
  --oxford-blue: hsla(243, 96%, 9%, 1);
  --dark-green: hsla(169, 100%, 8%, 1);

  --navy-blue: #05445E;
  --blue-grotto: #189AB4;
  --blue-green: #75E6DA;
  --baby-blue: #D4F1F4;

  --main-text-color: #111;
  --main-bg-color: #fffff8;
  --main-bg-color: #fff7eb;
  --main-bg-color: #fefaf6;
  --base-font-size: 18px;
  --base-line-height: 24px;
  --small-font-size: 14px;

  --content-max-width: 860px;
}

/* FONTS */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-v7-latin-regular.woff2') format('woff2'),
  url('../fonts/ibm-plex-sans-v7-latin-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Calistoga';
  src: url('../fonts/calistoga-v2-latin-regular.woff2') format('woff2'),
  url('../fonts/calistoga-v2-latin-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* STRUCTURAL */
*, *:before, *:after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: 'IBM Plex Sans', system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
}

/* HEADERS */
h1, h2, h3 {
  font-weight: normal;
  font-family: 'Calistoga';
  line-height: 1;
}
h4, h5, h6 {
  font-weight: 600;
  line-height: 1;
}

h1 {
  margin-top: 64px;
  margin-bottom: 24px;
  font-size: 44px;
}

h2 {
  margin-top: 33px;
  margin-bottom: 22px;
  font-size: 32px;
}

h3 {
  font-style: italic;
  font-size: 24px;
  margin-top: 32px;
  margin-bottom: 22px;
}

hr {
  display: block;
  height: 1px;
  width: 100%;
  max-width: var(--content-max-width);
  border: 0;
  border-top: 1px solid #ccc;
  margin: 16px auto;
  padding: 0;

}

/* .underlined { */
/*   position: relative; */
/*   padding-bottom: 32px; */
/* } */
/* .underlined::after { */
/*   content: ''; */
/*   position: absolute; */
/*   width: 96px; */
/*   height: 4px; */
/*   background: currentColor; */
/*   top: 100%; */
/*   left: 0; */
/* } */

article {
  padding: 80px 0px;
}

section {
  padding: 24px 0;
}

article,
section {
  margin: 0 auto;
  max-width: var(--content-max-width);
}
/* remove centering when the parent article is already handling */
article > section {
  margin: 0;
  max-width: auto;
}

p {
  margin-top: 24px;
  margin-bottom: 24px;
}

blockquote {
  font-size: 22px;
}

/* LINKS: replicate underline that clears descenders */
a:link,
a:visited {
  color: inherit;
}

/* You can NOT combine the below selectors. It will break if you do */
a:link::selection {
  background: #b4d5fe;
  border-radius: 4px;
}

a:link::-moz-selection {
  background: #b4d5fe;
}

img {
  max-width: 100%;
}

code, pre > code {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 1.6rem;
  line-height: 1.42;
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
}

pre > code {
  font-size: 14px;
  overflow-x: auto;
  display: block;
}

dl {
  border: 1px solid black;
  border-top-width: 4px;
  margin: 24px 0;
  padding: 20px;
}
dt {
  font-weight: 600;
}
dt:not(:first-of-type) {
  margin-top: 24px;
}
dd {
  display: list-item;
  list-style: disc;
  padding: 5px 0;
}
@media (max-width: 760px) {
}

.separator {
  width: 55%;
  height: 0.8rem;
}

/* https://github.com/iros/patternfills */
.crosshatch { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPgogIDxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmYnLz4KICA8cGF0aCBkPSdNMCAwTDggOFpNOCAwTDAgOFonIHN0cm9rZS13aWR0aD0nMC41JyBzdHJva2U9JyNhYWEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* FINE DOT PATTERN */
/* https://www.heropatterns.com/#appearance-settings */
/* background-color: #fdfcff; */
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); */