style.css

/* customize variables here */
:root {
  
/* --color-primary: #49169D; */
  --color-primary: #49169D
}
p {font-family: "Arial", Helvetica, sans-serif; font-size: 1em}
.p2 {font-family: "Arial", Helvetica, sans-serif; font-size: 1.25em}
.p3 {font-family: "Arial", Helvetica, sans-serif;}


h1 {font-family: "Arial", Helvetica, sans-serif; font-size: 2em;}
h2 {font-family: "Arial", Helvetica, sans-serif;}
h3 {font-family: "Arial", Helvetica, sans-serif;}
h4 {font-family:Arial, Helvetica, sans-serif; color: white;}

body {
  display:grid;
  grid-template-rows: 10rem 1fr;
  grid-gap: 2rem;
  
}

.bg-primary a, .bg-success a {
  color: white;
}

main#cardcontainer {
  justify-content: center;
  display: grid;
  grid-auto-rows: 80rem;
  grid-gap: 2rem;
}


section.card {
  border: 1px solid var(--color-darkGrey) ;
  background-color: var(--color-lightGrey);
  display: grid;
  grid-template-rows: 1fr 7fr 7fr 1fr;
  grid-gap: 0rem;
  align-items: stretch;
  justify-items: stretch;
  padding: 0;
}

.card-body {
  padding: 0 2rem;
  overflow: auto;
}

section.card header, section.card footer {
  font-family:Arial, Helvetica, sans-serif;
  font-size: 2.5rem;
  color: whitesmoke;
  text-align: center;
  padding-top: 0.3rem;
  /* background-color: var(--color-success) */
  background-color: var(--color-primary)
}

section.card header a, section.card footer a {
  color: black;
}

.progress-bar {
  width: 100%;
  background-color: #e0e0e0;
  padding: 3px;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill {
  display: block;
  height: 22px;
  background-color: var(--color-primary);
  border-radius: 3px;
  
  transition: width 500ms ease-in-out;
}

section.card img.profile-image {
  object-fit: cover;
  height: 35rem;
  /* height: 100%; */
  /* width: 100%; */
  /* object-fit: contain; */
  /* object-position: 50% 0; */
  
}