:root {
  --color-primary: #00bcdb;
}
@theme {
  --color-primary: #00bcdb;
}

.text-primary {
  color: var(--color-primary);
}

.gradient {
  background-color: #00bcdb;
}

@layer components {
  .text-richtext {
    p {
      font-family: 'Lexend Deca', sans-serif;
      font-weight: 300;
      font-size: 1.125rem;
      line-height: 1.75rem;
    }
    p + p {
      margin-top: 2rem;
    }

    h2 {
      font-size: 1.5rem;
      line-height: 2rem;
      font-weight: 500;
      /* margin-bottom: 0.5rem; */
      margin-bottom: 1.5rem;
    }

    h3 {
      font-size: 1.875rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
      color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    }

    ul {
      list-style-type: disc;
      list-style-position: inside;

      li {
        font-size: 1.125rem;
        line-height: 1.75rem;
      }
    }

    a {
      color: var(--color-primary);
      font-weight: 500;

      &:hover {
        text-decoration-line: underline;
        color: #4b5563;
      }
    }
  }
}

/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* Fix this to work with tailwind */
html {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
}

body strong,
body b {
  font-weight: 500;
}

body p {
  font-weight: 300;
}

body {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
}