/* Must contain 
External CSS file linked to all pages (ideally the only location for CSS on your site)

At least one CSS rule of each selector learned in this unit: element, grouped,
descendant, independent class, dependent class, pseudo class.

All pages must have fixed with container holding all of the pages content.

Use Flexbox properties and values for Layout

The homepage should have a main banner area and a three column flexbox layout similar to the example here (but only 3 column blocks are needed).

Font and text formatting.

Use of a custom font for headings. Custom or web-safe fonts for paragraphs.

Use of box model including margin and padding values.

Box sizing set to border box.

Use of a border for at least one element.

A common navigation for all pages using the <nav> element and inline style near the top of your pages.

Create a hover effect for the navigation buttons and other links.
*/

/*
Submit this assignment using the following method:
Create a link to the index page of this site on your homework web page.

Use FileZilla to upload both the homework page AND the summit_site
folder to the wdv101 folder on your host server. Check the links to
ensure they all work.

Enter your domain name in the Text Submission area of this assignment
on Blackboard.
*/

<style>
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
</style>

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  box-sizing: border-box;
}

body {
    color: #1A1B23; /* Change font color */
  }

h4 {
    font-weight: 400;
}


h5 {
    line-height: 1.6em;
    font-weight: 400;
}

h6 {
    font-weight: 300;
    font-size: 1.2em;
    color: black;
}

p {
    font-size: 1.2rem;
    font-weight: 300;
    max-width: 600px;
}




/* Nav Bar */
 
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
  }

.navbar .nav-item {
    padding-right: 24px;
}

.nav-link {
    color: #13496c;
}

.nav-link.active {
    color: #0f203f;
    font-size: 1.05rem;
}

.nav-link:hover {
    color: #140c3c;
}

.row .hero {
  align-items: center;
}

.banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    gap: 40px;
}

.banner img {
    width: 100%;
    height: auto;
}

.banner .btn-primary {
    justify-content: ;
}

.hero-text {
    width: 80%;
    max-width: 600px;
    gap: 24px;
}

.hero-text .btn-primary {
    max-width: 300px;
}

.row {
    justify-content: center;
    align-items: center;
    margin: 0;
}

.card {
    margin: 20px;
}

.card-body {
    display: flex;
    flex-direction: column;
}

.content {
    background-color: rgba(26, 27, 35, 0.5);
    color: white;
}



/* Buttons */

.btn-primary {
    color: white;
    background-color: #1f699a;
    padding: 16px 24px;
    align-items: stretch;
}

.btn-primary:hover {
    background-color: #233b66;
  }

.btn-secondary {
    color: #020c1d;
    background-color: #E5EFF6;
    border: 1px solid #237BB5;
    padding: 16px 24px;
    align-items: stretch;
}

.btn-secondary:hover {
    background-color: #193971;
  }

.btn-tertiary {
    font-size: 1.2rem;
    color: #020c1d;
}

.btn-tertiary:hover {
    font-size: 1.25rem;
    color: #193971;
}

  /* CTAs */


.cta-learn {
    background-color: #eff5f9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 30px;
    border: 4px solid #fff;
}

.cta-adopt {
    background-color: #eff5f9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 30px;
    border: 4px solid #fff;
}

.cta-adopt .btn-primary {
    width: 300px;
}

.cta-learn .btn-primary {
    width: 300px;
}







/* Quote */

blockquote {
    padding: 40px;
    background-color: #deecf5;
}

.quote {
    margin-bottom: 80px;
}

blockquote p {
    font-size: 1.1em;
    color: #0b1e3f;
}


/* Footer */

footer {
    background: #333;
    display: flex;
    justify-content: center;
}

.footer-content {
    width: 600px;
    padding: 40px;
}