@import url("https://fonts.googleapis.com/css?family=Karla&display=swap");

body {
  font-size: 16px !important;
  font-family: "Karla", sans-serif !important;
  background-color: hsl(204, 43%, 93%) !important;
  min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  
}
.mt-heading{
  margin-top: 2.5rem !important;
}
.mb-heading{
  margin-bottom: 1rem !important;
}
.color-cyan {
  color: hsl(208.1, 77.9%, 47.8%) !important;
}
.bg-cyan{
  background-color: hsl(208.1, 77.9%, 47.8%) !important;
}
.bg-light-gray{
  background-color:#72C5E6 !important;
}
.btn-bright-yellow{
  width: 75% !important;
  background-color: hsl(137.9, 72.8%, 53.9%) !important; 
  font-size: 16px !important;
  
  
}
.color-bright-yellow {
   color: hsl(137.9, 72.8%, 53.9%) !important; 
}
h1 {
  font-size: 27px !important;
}
h2 {
  font-size: 20px !important;
}
.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}
small{
  font-size: 14px !important;
  opacity: 0.6 !important;
}

.rounded-lg{
  border-radius: 0.5rem !important;
}

@media only screen and (min-width: 320px) and (max-width: 766.98px){
  #landing-div{
    width: 85%;
  }
  h1 {
  font-size: 20px !important;
}
h2 {
  font-size: 18px !important;
}
}
@media only screen and (min-width: 767px){
  h1 {
  font-size: 27px !important;
}
h2 {
  font-size: 20px !important;
}
}