.App {
  display: grid;
  place-items: center;
  padding-top: 5rem;
  font-family: var(--agnostic-font-family-body);
  font-size: var(--agnostic-body);
  color: var(--agnostic-font-color);
  -webkit-font-smoothing: antialiased;
}

.container {
  width: clamp(23ch, 60%, 80ch);
}

.App,
p {
  line-height: 1.5;
}

h1, h2, h3,
section {
  margin-bottom: 2rem;
}

/**
 * Header Examples
 */
.header-flex-fill {
  flex-grow: 0;
}
.header-flex-fill {
  margin-inline-start: 0;
}

.header-mbe16 {
  margin-inline-end: 0;
}

@media (min-width: 970px) {

  .header-flex-fill {
    flex-grow: 1;
    margin-inline-start: var(--fluid-16)
  }
  
  .header-mbe16 {
    margin-inline-end: var(--fluid-16);
  }
}

.close-button-demo {
  background-color: transparent;
  border: transparent;
  width: 100%;
  margin-block-start: 0.5rem;
}


.demo-icon {
  color: var(--agnostic-gray-mid-dark);
  margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}
.demo-icon-warning {
  color: var(--agnostic-warning-border-accent);
}
.demo-icon-info {
  color: var(--agnostic-primary-dark);
}
.demo-icon-error {
  color: var(--agnostic-error-dark);
}
.demo-icon-success {
  color: var(--agnostic-action-dark);
}

.demo-tooltip {
  width: 100px;
  height: 100px;
  padding: var(--fluid-6) var(--fluid-12);
  border-radius: var(--agnostic-radius);
  border: 1px solid var(--agnostic-gray-light);
  display: flex;
  align-items: center;
  text-align: center;
}
