@import '../styles/variables.css';

.title {
  font-family: var(--serifFontFamily);
  font-size: 48px;
  font-weight: bold;
  margin-top: 0;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-white {
  color: var(--white);

  & a {
    color: var(--white);
    text-decoration: underline;
  }
}

.text-success {
  color: var(--successTextColor);
}

.text-error {
  color: var(--errorTextColor);
}

.text-italic {
  font-style: italic;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

h1 {
  font-size: 36px;
  font-weight: bold;
  font-family: var(--sansFontFamily);
  color: var(--textColor);
}

h2 {
  font-size: 28px;
  font-weight: bold;
  font-family: var(--sansFontFamily);
  color: var(--textColor);
}

h5 {
  font-size: 16px;
  font-weight: bold;
  font-family: var(--sansFontFamily);
  color: var(--gray);
  text-transform: uppercase;
}

p {
  font-size: 18px;

  & code {
    font-size: 16px;
  }

  &.medium {
    font-size: 16px;
  }

  &.small {
    font-size: 14px;
  }
}

.page-title {
  display: inline;
  font-size: 28px;
  font-weight: bold;
  color: var(--textColor);
  font-family: var(--sansFontFamily);
}

.prose h1,
h1.prose,
.prose h2,
h2.prose,
.prose h3,
h3.prose,
.prose h4,
h4.prose,
.prose h5,
h5.prose,
.prose h6,
h6.prose,
.prose p,
p.prose {
  margin-bottom: 0.5em;
}

.prose p + p,
.prose h2 + p,
.prose p + ul,
.prose ul + p,
.prose p + .button-group,
.prose .button-group + p,
.prose ul + .button-group,
.prose .button-group + ul {
  margin-top: 1em;
}

pre,
code {
  background-color: var(--darkWhite);
  padding: 2px 6px;
  border-radius: var(--borderRadius);
}
