:root {
  --neutral-900: #2B2B2B;
  --neutral-500: #595959;
  --neutral-400: #9B9B9B;
  --neutral-300: #BFBFBF;
  --neutral-200: #E6E6E6;
  --neutral-100: #F7F7F7;
  --neutral-50: #FFFFFF;

  --primary-main: #FF4086;
  --primary-dark: #B02C5C;
  --secondary-main: #368CF5;
  --secondary-dark: #235CA1;
  --tertiary-main: #272976;
  --tertiary-dark: #1A1C5E;

  --green-dark: #00923F;
  --green-light: #7ABC30;
  --yellow-light: #FFCD00;
  --yellow-dark: #FB8F00;
  --red-light: #F44910;
  --red-dark: #C02220;
}

body {
  background: var(--neutral-100);
}

main {
  display: flex;
  justify-content: center;
}

main .section-content {
  background: var(--neutral-50);
  padding: 2rem 2rem;

  text-align: justify;
}

.section-content h1 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--tertiary-main);
  margin-bottom: 1rem;
}

.terms-section h2 {
  margin: 1rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.terms-section h3 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--neutral-500);
}

.terms-section p {
  margin: 0.5rem 0 0 2rem;
}

.terms-subsection p {
  margin: 0.5rem 0 0 4rem;
}

.terms-section a {
  color: var(--secondary-main);
}

.terms-section a:hover {
  color: var(--secondary-dark);
  text-decoration: underline;
}

p.italic {
  font-style: italic;
}

main .section-content footer {
  margin-top: 2rem;
  background: var(--neutral-100);
  padding: 1rem;
  border-radius: 16px;
}

/* sm */
@media (min-width: 640px) {
  main {
    padding: 2rem 0;
  }

  main .section-content {
    border-radius: 1rem;
  }
}

/* lg */
@media (min-width: 768px) {
  main .section-content {
    padding: 4rem 4rem;
  }

  .section-content h1 {
    font-size: 2.5rem;
  }
}