/******* 
 resets
 *******/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*******
 set up the body 
 *******/

body {
  line-height: 1.2;
  min-height: 100vh;
  font-family: sans-serif;
}

/*******
 make image easier to deal with 
 *******/

img,
figure {
  display: block;
  max-width: 100%;
}

/*******
 ulility classes
  *******/

.flex {
  display: flex;
}

.grid {
  display: grid;
}
.container {
  padding-inline: 2em;
  margin-inline: auto;
  max-width: 80vw;
}

/*******
 colors 
 *******/

.bg-dark {
  background-color: #84a59d;
}
.bg-medium {
  background-color: #e5e7eb;
}
.bg-light {
  background-color: #fff;
}

/*******
 typography
  *******/

h1 h2 h3 {
  font-size: 24px;
}
.hero-primary {
  font-size: 48px;
  font-weight: 900;
}
.section-products span {
  color: goldenrod;
}
.hero-secondary {
  font-size: 18px;
  font-weight: 200;
  max-width: 45ch;
}
.logo {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.section-title {
  font-size: 36px;
  font-weight: 900;
}
.quote-primary {
  font-size: 36px;
  font-weight: 200;
  font-style: italic;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/*******
 layout 
 *******/

header {
  background-color: #1f2937;
  color: #fff;
}
section {
  padding: 1em;
  padding-bottom: 5em;
}
/******
 navigation 
 *******/

.nav-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 80vw;
  margin: 0 auto;
  padding: 0 2em;
  padding-top: 1em;
  padding-bottom: 0.5em;
}
@media (max-width: 715px) {
  .container-nav {
    flex-direction: column;
  }
  header {
    text-align: center;
  }
}
.nav-list,
nav ul {
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
  color: #e5e7eb;
}
.nav-list-item,
nav li {
  padding: 0 2em;
  letter-spacing: 0.5px;
}
@media (max-width: 550px) {
  .nav-list,
  nav li {
    flex-direction: column;
    margin-bottom: 0.5em;
  }
  .logo {
    margin-bottom: 0.5em;
  }
}
/*******
 intro section 
 ********/

.section-intro {
  background-color: #84a59d;
  color: #fff;
  padding-top: 5em;
}
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0;
}
.container-hero {
  padding: 0 0.5em;
  align-items: center;
  margin-right: 1em;
}
.hero-primary span {
  display: block;
}

.container-hero-img {
  flex-basis: 500px;
}
.hero-img {
  background-color: #e5e7eb;
  width: 100%;
  aspect-ratio: 5/3;
  display: block;
}
.hero-img p {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1150px) {
  .container-intro {
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-bottom: -4.5em;
    height: 100vh;
  }
  .container-hero {
    width: 90%;
  }
  .hero-secondary {
    margin: 0 auto;
    margin-top: 0.75em;
  }
  /* TODO: shrink the .intro-container size or hero-img content */
  .container-hero-img {
    margin-top: 2em;
    width: 70%;
  }
}
/***
button 
***/

button {
  font-size: 18px;
  border: none;
  background-color: #277da1;
  color: #fff;
  width: max-content;
  border-radius: 10px;
  padding: 10px 30px;
  margin: 1em 0;
}
button:hover,
button:focus {
  background-color: #67b0f5;
}
/**** 
special features section 
****/

.section-title {
  color: #1f2937;
  text-align: center;
  margin: 1em 0;
}
.subheader {
  text-align: center;
  margin-bottom: 1em;
  margin-top: -20px;
  font-size: 20px;
}
.product-features {
  text-align: center;
  max-width: 90vw;
}

.feature-item {
  justify-content: center;
}
.section-about img {
  border: #000 2px solid;
  height: 200px;
  width: auto;
  border-radius: 10px;
  margin: 0 auto;
  margin-bottom: 0.5em;
}
.feature-item p {
  color: #1f2937;
  font-weight: 200;
}
@media (max-width: 1250px) {
  .product-features {
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .feature-item {
    margin-bottom: 1em;
  }
}
@media (max-width: 600px) {
  .product-features {
    grid-template-columns: 1fr;
  }
}

/****
 testimonial section
  ****/

.section-quote {
  background-color: #e5e7eb;
  color: #1f2937;
  padding: 5em 0;
}
.container-quote {
  display: flex;
  flex-direction: column;
  max-width: 800px;
}
.quote-primary {
  margin-bottom: 1.5em;
}
.quote-secondary {
  display: flex;
  justify-content: flex-end;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
@media (max-width: 800px) {
  .container-quote {
    max-width: 80vw;
  }
}
/**** 
featured products section
 ****/

.container-products {
  max-width: 90vw;
}
.product-link:hover,
.product-link:focus {
  opacity: 0.8;
}
.product-thumbnail {
  width: 250px;
  height: 200px;
}
.product-post-thumb {
  width: 250px;
  height: 100px;
  background-color: #1f2937;
  color: #fff;
  text-align: center;
  padding: 1em;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}
.product-thumbnail-voice {
  background-color: goldenrod;
}
.product-thumbnail-instrument {
  background-color: #f28482;
}
.product-thumbnail-online {
  background-color: #588157;
}
.product-thumbnail-adult {
  background-color: #9e2a2b;
}
@media (max-width: 1150px) {
  .container-products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .product-link {
    margin-bottom: 2em;
  }
}
/*****
 special call to action section
  *****/

.section-promotion {
  padding: 4em 0;
}
.container-signup {
  max-width: 800px;
  background-color: #84a59d;
  color: #fff;
  padding: 2em 5em;
  border-radius: 10px;
}
.container-signup p {
  font-weight: 200;
  font-size: 16px;
}
.btn-signup {
  border: 1px solid #fff;
  font-weight: 500;
  padding: 10px 25px;
  border-radius: 10px;
  background-color: #277da1;
}
.btn-signup:hover,
.btn-signup:focus {
  background-color: #67b0f5;
}
@media (max-width: 900px) {
  .container-signup {
    max-width: 90vw;
  }
}
/****
 footer 
 ****/

footer {
  background-color: #1f2937;
  color: #fff;
  padding: 1.5em 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
footer .container {
  width: 800px;
}
/* TODO: make media queries more uniform. no random browser widths */