body {
  background-color: #f9f9f9;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
}
/* Navbar container */
.navbar-full {
    overflow: hidden;
    background-color: rgb(226, 48, 48);
    
  }
  
  /* Links inside the navbar */
  .navbar-full a {
    float: left;
    font-size: 1em;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 1em;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; 
    margin: 0; 
  }
  
  
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 2% 2.1%;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

  /* Style the navigation menu */
  .mobile-navbar {
    overflow: hidden;
    background-color: rgb(226, 48, 48);;
    position: relative;
    display: none;
    width: 100%;
  }

  /* Hide the links inside the navigation menu */
  .mobile-navbar #hidden-links {
    display: none;
  }

  /* Style navigation menu links */
  .mobile-navbar a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }

  /* Style the hamburger menu */
  .mobile-navbar a.icon {
    
    display: block;
    position: absolute;
    right: 10px;
    top: 0px;
  }

  /* Add a grey background color on mouse-over */
  .mobile-navbar a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Style the active link*/
  .active {
    background-color: #04AA6D;
    color: white;
  }
  /* Crops the Image to fit the width but only a portion of the height */
  .home-intro-textimg img {
    width: 100%;
    height: 10%;
    object-fit: cover;
  }
  /*These two style edits make it so the text can overlay the image */
  .home-intro-textimg {
    position: relative;
  }
  .title-text {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%,-50%);
    font-family: 'Raleway', sans-serif;
    font-size: 120%;
    
  }

  /*Creates a floated card with three per row of the screen (desktop view)*/
  .card {
    float: left;
    width: 29.33%;
    margin: 2%;
    background-color:deepskyblue;
    border: 1px;
    height: 80%;
    position: relative;
    
    
  }

  /*Creates a cropped image that fits in the card */
  .card img{
    width: 100%;
    
    height: 55%;
    
    object-fit: cover;
    object-position: top;
  }
  /*Creates a margin for the content in each card*/
  .card-content{
    margin: 5%;
    font-size: 70%;
  }

  .card-content p, .card-content a {
    font-family: 'Open Sans', sans-serif;
  }
  /*puts the link to learn more at bottom of card*/
  .card-content a{
    position: absolute;
    bottom: 2%;
  }
  /*makes the space between header and content even througout*/
  /*also adds a different font to the titles of each card*/
  .card-content h3{
    height: 6%;
    font-family: 'Raleway', sans-serif;
  }
  

  /*centers content in footer*/
  .footer {
    text-align: center;
    padding: 3px;
    background-color: skyblue;
    color: white;
    
    width: 100%;
  }

  @media (max-width: 992px) { 
    /*column drop to two columns for tablets*/
    .card {
        width: 46%;
    }
    
   }

   @media (max-width: 576px) {
    /*column drop to one per row for mobile format*/
    .card{
        width: 96%;
    }
    /*hides full navbar for mobile site */
    .navbar-full{
        display: none;
    }
    .card-content {
        font-size: 80%;
    }
    .card {
      height: 90%
    }
    .mobile-navbar{
      display:block;
    }
   }