:root {
  --blue-hue: 215;
  --blue-700: hsl(var(--blue-hue), 100%, 18%);
  --blue-600: hsl(var(--blue-hue), 90%, 27%);
  --blue-500: hsl(var(--blue-hue), 83%, 39%);
  --blue-400: hsl(var(--blue-hue), 73%, 51%);
  --blue-300: hsl(var(--blue-hue), 85%, 72%);
  --blue-200: hsl(var(--blue-hue), 93%, 88%);
  --blue-100: hsl(var(--blue-hue), 100%, 98%);

  --yellow-700: hsl(34, 100%, 15%);
  --yellow-600: hsl(42, 100%, 27%);
  --yellow-500: hsl(50, 100%, 39%);
  --yellow-400: hsl(58, 100%, 51%);
  --yellow-300: hsl(58, 100%, 72%);
  --yellow-200: hsl(58, 100%, 88%);
  --yellow-100: hsl(58, 100%, 96%);

  --gray-700: hsl(209, 15%, 18%);
  --gray-600: hsl(209, 12%, 27%);
  --gray-500: hsl(209, 12%, 39%);
  --gray-400: hsl(209, 12%, 51%);
  --gray-300: hsl(209, 12%, 72%);
  --gray-200: hsl(209, 10%, 88%);
  --gray-100: hsl(204, 45.5%, 97.8%);

  --pink-700: hsl(305, 100%, 18%);
  --pink-600: hsl(305, 76%, 32%);
  --pink-500: hsl(305, 53%, 54%);
  --pink-400: hsl(305, 55%, 72%);
  --pink-300: hsl(305, 61%, 84%);
  --pink-200: hsl(305, 78%, 92%);
  --pink-100: hsl(305, 100%, 98%);

  /* https://www.modularscale.com/?1.125&rem&1.618 */
  --space-xxs: 0.266rem;
  --space-xs: 0.43rem;
  --space-sm: 0.695rem;
  --space-md: 1.125rem;
  --space-lg: 1.82rem;
  --space-xl: 2.945rem;
  --space-xxl: 4.765rem;

  --shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);

  --font-size-sm: 0.695rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.82rem;
  --font-size-xl: 2.945rem;
  --font-size-md-grow: min(var(--font-size-md) + 1vw, var(--font-size-lg));
  --font-size-lg-grow: min(var(--font-size-md) + 2vw, var(--font-size-xl));
  --font-size-xl-grow: min(var(--font-size-lg) + 2vw, var(--font-size-xl));

  --margin-bottom-with-grid: 0;
  --center-align-with-grid: center;
  --serif-body-font: 'Georgia Pro', Georgia, 'Times New Roman', Times, serif;
  --serif-emphasis-font: 'Playfair Display', 'Georgia Pro', Georgia, serif;
  --sans-serif-font: 'Montserrat', sans-serif;

  font-family: var(--serif-body-font);
  font-size: var(--font-size-md);
  color: var(--gray-700);
  line-height: 1.6;

  --background-color: white;
}

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

ul {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  min-height: 100vh;
}

p {
  font-size: var(--font-size-md);
}

a {
  text-decoration: underline;
  text-decoration-color: var(--gray-200);
  color: hsl(215, 83%, 39%); /* IE11 Fallback */
  color: var(--blue-500);
  font-weight: 500;
}
a:hover {
  color: var(--pink-500);
}

.list {
  padding-left: var(--space-md);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

img {
  max-width: 100%;
}

p {
  margin-bottom: var(--space-md);
}

/* ASYMMETRIC TWO COLUMNS */
.asymmetric-two-columns {
  display: flex;
  flex-wrap: wrap;
}

.asymmetric-two-columns__grow {
  flex-grow: 999;
}
/* Remove when `gap: XXX;` is supported */
.asymmetric-two-columns--margin {
  --margin: var(--space-sm);
  margin: calc(-1 * var(--margin));
}
.asymmetric-two-columns--margin > * {
  margin: var(--margin);
}

/* LANDING PAGE */
.landing-page-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.landing-page-layout > * {
  max-width: 45rem;
}
.landing-page-content {
  padding: var(--space-lg);
  background-color: var(--pink-100);
  box-shadow: var(--shadow);
  flex-basis: 20rem;
}

.bg-yellow {
  --background-color: var(--yellow-100);
  background-color: var(--background-color);
}
.bg-gray {
  --background-color: var(--gray-100);
  background-color: var(--background-color);
}

.image-container {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}
.profile-image {
  width: 100%;
  max-width: 10rem;
  box-shadow: var(--shadow);
}

.text-colored {
  font-size: var(--font-size-md);
  color: var(--yellow-600);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

h1 {
  margin-top: 0;
  font-size: 2.945rem;
  font-size: var(--font-size-xl-grow);
}

h1 {
  line-height: 1.2;
  font-weight: 800;
  margin-bottom: var(--space-md);
  font-family: var(--serif-emphasis-font);
  font-weight: 600;
}