nav a { font-size: 1.05rem !important; color: black !important; }

.center {
  text-align: center;
  width: 100%;
  background-color: #502bcf;
}

.center > * {
  display: inline-block;
  margin: 0 auto !important;
}

/* https://stackoverflow.com/questions/33451683/pen-highlighter-effect-in-css */
.highlighter {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(to right, rgba(0, 225, 0, 0.1), rgba(255, 225, 0, 0.7) 4%, rgba(255, 225, 0, 0.3));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.fg-primary {
    color: #502bcf;
}

[class*="bg-"] > 
    p:last-child,
    ol:last-child,
    ul:last-child {
    margin-bottom: 0px
}

.fg-primary {
  color: #502bcf !important;
}

.bg-primary {
    color: #fff;
    background-color: #502bcf;
}

.bg-blue {
    color: #1b5cbe;
    background-color: #e6f0ff;
    padding: 1rem;
    margin-bottom: 24px;
}

.bg-green {
    color: #19AF56;
    background-color: #E1FFED;
    padding: 1rem;
    margin-bottom: 24px;
}

.bg-red {
    color: #AF1956;
    background-color: #FFE1ED;
    padding: 1rem;
    margin-bottom: 24px;
}

.bg-yellow {
    color: #47473d;
    background-color: #fafab3;
    padding: 1rem;
    margin-bottom: 24px;
}

.bg-grey {
    color: #444444;
    background-color: #EEEEEE;
    padding: 1rem;
    margin-bottom: 24px;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px auto;    
}

.card {
    max-width: 260px;
    margin: 1em 1em;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
  
  .card-header {
    padding: 15px;
    text-align: center;
  }

  .card-center {
    text-align: center;
  }
  
  .card-content {
    padding: 20px;
  }
  
  .card-item {
    border: 1px solid green;
  }
  
  .card-content h2 {
    margin-top: 0;
    color: #333333;
  }
  
  .card-content p {
    color: #777777;
  }
  
  @media (max-width: 768px) {
    .card {
      max-width: 100%;
    }
  }