body {
    color: #333;
    font-weight: 500;
    line-height: 2.0625rem;
    word-wrap: normal;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
  }

  p {
    margin: 0;
  }

  .link {
    color: var(--nar);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--nar-light);
  }

  .link:hover {
    text-decoration-color: var(--nar);
  }

  span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 1000ms linear;
  }

  @keyframes ripple {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }

  input[type='range']::-webkit-slider-thumb,
  input[type='range']::-moz-range-thumb,
  input[type='range']::-ms-thumb {
    opacity: 0;
  }

  /* h1,h2,...,h5 need important for font-weight and size to override tailwinds defaults */

  h1 {
    font-weight: 700;
    font-size: 2rem;
    color: var(--nar);
    font-family: 'Montserrat', sans-serif;
    line-height: 40px;
  }

  h2 {
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--nar);
    line-height: 40px;
  }

  h3 {
    font-weight: 700;
    font-size: 1.2rem;
    color: #000;
    line-height: 30px;
    margin-bottom: 0;
  }

  h4 {
    font-weight: 700;
    font-size: 0.95rem;
    color: black;
    line-height: 30px;
  }

  input {
    font-weight: 500;
  }

  textarea {
    font-weight: 500;
  }

  input[type='date'] {
    height: 2.3rem;
    width: 150px;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 15px;
    padding-left: 5px;
    border: none;
    border-radius: 3px;
    outline: 1px #c4c4c4 solid;
    background-color: white;
    cursor: pointer;
  }

  input[type='date']:hover {
    outline: 1px black solid;
  }
  input[type='date']:focus {
    outline: 2px var(--nar) solid;
  }

  ::-webkit-calendar-picker-indicator {
    background-color: white;
    padding: 5px;
    cursor: pointer;
    border-radius: 3px;
  }