@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Noto+Color+Emoji&display=swap');

:root {
    --font-family: 'Host Grotesk', 'Inter', Arial, sans-serif;

    --color-accent: #FF6F43;
    --color-purple: #53416E;
    --color-navy: #07052A;
    --color-brown: #7D6D51;
    --color-yellow: #FFE6BA;
    --color-gray: #5A5A5A;

    --brand-primary-mauve: #53416E;
    --brand-primary-midnight: #07052A;
    --brand-primary-papaya: #FF6F43;
    --brand-secondary-porcelain: #F8F3ED;
    --brand-secondary-cream: #FFE6BA;
    --brand-secondary-sand: #7D6D51;
    --brand-basis-nearly-black: #1A1A1A;
    --brand-basis-white: #FFFFFF;
    --brand-warning: #FF3B30;
}

body {
    font-family: var(--font-family);
    background: var(--brand-primary-midnight);
    color: var(--brand-basis-white);
    margin: 20px 0;
    padding: 0 75px;
}

.italic {
  font-family: "Source Serif 4", serif;
  font-style: italic;
}

.page-info-block {
  display: inline-flex;
  gap: 100px;
  align-items: baseline;
  margin-bottom: 40px;
}


.info-text {
  font-size: 1.125rem;
  max-width: 650px;
}

.divider {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  width: 100%;
  margin: 16px 0;
}

@media (max-width: 800px) {
  body {
    padding: 20px;
  }
}