* {
    font-family: 'Montserrat', sans-serif;
  }

  h4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: rgb(243, 52, 116);
    font-weight: 600;
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
  }

  h3 {
    margin-top: 2rem;
    color: rgb(243, 52, 116);
    font-weight: 600;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
  }
  

  ul {
    margin-top: 8rem;
    box-shadow: 1px 1px 3px 4px #ccc;
    border-radius: 3px;
  }

  .callout-outer {
    box-shadow: 1px 1px 3px 4px #ccc;
    background-color: rgb(67, 68, 64);
    margin-top: 4rem;
    border-radius: 3px;
  }

  .callout-inner {
    box-shadow: 1px 1px 1px 1px #ccc;
  }

  .callout-inner-card {
    box-shadow: 1px 1px 1px 1px #ccc;
  }

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

  .header {
    height: 65vh;
    width: 100%;
    background-image: linear-gradient(
      to right bottom,
      rgba(213, 111, 125, 0.8),
      rgba(213, 111, 111, 0.8)),
     url("../assets/covid19.jpg");
    background-size: cover;
    background-position: top;
    position: relative;
}

.text-box {
  top: 50%;
  left: 50%;
  position: absolute;
  
  transform: translate(-50%, -50%);
}

.heading-primary {
  color: #fff;
  text-transform: uppercase;
}

.heading-primary-main {
  display: block;
  font-size: 50px;
  font-weight: 500;
  letter-spacing: 15px;
}

.heading-primary-sub {
  display: block;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 5px;

}

.footer-text {
  color: rgb(243, 52, 116);
  font-size: 18px;
  font-weight: 500;
}

.us-stats-title {
  font-size: 24px;
  font-weight: bold;
}

thead {
  background-color: rgb(47, 48, 45);
  color: rgb(243, 52, 116);
  font-size: 20px;
  font-weight: 500;
}

.us-stats {
  background-color: rgb(67, 68, 64);
  color: rgb(243, 52, 116);
  font-size: 20px;
  font-weight: 500;
}

tbody {
  background-color: rgb(67, 68, 64);
  color: rgb(243, 52, 116);
  font-size: 18px;
  font-weight: 500;
}


.us-info-header {
  text-decoration: underline;
  font-weight: 500;
}

#search-description {
  font-size: 1rem;
  color: rgb(243, 52, 116);
  font-weight: 900;
  width: 250px;
}

.button {
  background-color: rgb(243, 52, 116);
  color: rgb(67, 68, 64);
  border-radius: 10px;
  font-weight: 800;
  transition: all .2s; 
} .button:hover {
  background-color: rgb(206, 35, 92);}


.expand-button {
  background-color: rgb(243, 52, 116);
  color: rgb(67, 68, 64);
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 1px 1px 1px 1px #ccc;
}   a:focus {
  color: pink;
}

/* Key color */
.severe {
  background-color: rgb(170, 21, 21);
 
} 

.high {
  background-color: rgb(192, 86, 25)
}

.medium {
  background-color: rgb(190, 172, 65)
}

.low {
  background-color: rgb(83, 117, 28)
}

.very-low {
  background-color: rgb(135, 170, 78)
}

.accordion-title {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  transition: all .2s;
} .accordion-title:hover {
  color: #fff;
  background-color: rgb(9, 163, 155);}


li {
  margin-top: 4px;
}

footer {
  margin-top: 10rem;
  background-color: rgb(67, 68, 64);
}

.github-btn {
  margin-bottom: 3rem;
  margin-right: .5rem;
  margin-left: .5rem;
}