/*
 * GMPF typography
 * ---------------
 * Base type scale built on the tokens in tokens.css. Every heading
 * and paragraph rule here references a token so the visual scale can
 * be tuned in one place.
 */

html {
  font-family: var(--font-family-base);
  font-size: 100%; /* Lets users override at the browser level */
  line-height: var(--line-height-base);
  color: var(--color-text-default);
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-default);
  background-color: var(--color-surface-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-default);
  margin-block-end: var(--space-md);
}

h1 {
  font-size: var(--font-size-h1-mobile);
  letter-spacing: var(--letter-spacing-tight);
}

@media (min-width: 768px) {
  h1 {
    font-size: var(--font-size-h1);
  }
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

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

p:last-child {
  margin-block-end: 0;
}

small,
.text-small {
  font-size: var(--font-size-sm);
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

em,
i {
  font-style: italic;
}

a {
  color: var(--color-brand-dark);
}

ul,
ol {
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-lg);
}

blockquote {
  border-inline-start: 4px solid var(--color-brand-primary);
  padding: var(--space-sm) var(--space-md);
  margin-block: var(--space-md);
  color: var(--color-text-muted);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: 0.95em;
}

pre {
  padding: var(--space-md);
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* background gradient for all pages */

.body-wrapper {
  position: relative;
}

.body-wrapper::before {
  content: '';
  position: absolute;
  width: 100%;
  max-width: 1440px;
  top: 0px;
  right:0px;
  aspect-ratio: 5/3;
  z-index: 0;
 background: 
    linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, #FFFFFF 75%),
    linear-gradient(243.38deg, rgba(255, 255, 255, 0) 9.28%, #FFFFFF 59.84%),
    linear-gradient(203.29deg, #8D68EF 3.47%, #6270FF 31.2%, #518EFF 52.78%, #51B5FF 73.14%);

}

#main-content {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .body-wrapper::before {
    aspect-ratio: 1/1;
  }
}