style.css

* {
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}

/*
The scale is:

1rem
1.25rem
1.5rem
2rem
Color palette
Primary (green):

hsl(160deg, 100%, 30%)
Secondary (gold):

hsl(45deg, 100%, 50%) (lighter)
hsl(45deg, 100%, 40%) (darker)
Grays:

hsl(0deg, 0%, 0%) (black)
hsl(0deg, 0%, 10%) (very dark)
hsl(0deg, 0%, 30%) (dark)
hsl(0deg, 0%, 40%) (medium)
hsl(0deg, 0%, 60%) (light)
hsl(0deg, 0%, 100%) (white)
 */

html,
body {
  margin: 0;
  padding: 0;
}

/* Add styles here! */

strong {
  color: hsl(160, 100%, 30%);
}

.max-width-wrapper{
  background-color: hsl(0, 0%, 100%);
  border-bottom: hsl(0, 0%, 40%) .5rem solid;
}

header { min-height:30%;}
main {
  min-height:70%;
  padding-top:4rem;
  padding-bottom: 2rem;
  background-color: hsl(0, 0%, 60%);
}
.indented-heading {

  background-color: hsl(45, 100%, 50%);
  border-bottom: hsl(45, 100%, 40%) .5rem solid;
  width:-moz-fit-content;
  width:fit-content;
  margin-top:0;
  margin-left:-2rem;
  margin-right:1rem;
  padding: 1.5rem;
  padding-left: 2rem;
}

.intro-chunk {
  padding-top:2rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
h1 {
  padding-top:2rem;
  margin-top:2rem;
}
.max-width-wrapper{
}
.title {
  padding-bottom:1rem;
}
.card {
  padding-top:.25rem;
  margin-left:2rem;
}

.card p {
  margin-right:2rem;
}

.intro-chunk p:last-child {
  padding-bottom: 1rem;
}

.intro-chunk p {
  width:70%;
}

@media (min-width:767px) {
  .intro-chunk p {
    width:60%;
  }
}
@media (min-width: 1120px) {
  .max-width-wrapper{
    margin-left:auto;
    margin-right:auto;
    width:50%;
    border-bottom:none;
  }

  .indented-heading{
    margin-left:-3rem;
    padding-left:3rem;
  }
  .intro-chunk p {
    width:60%;
  }
  main {
    border-top: hsl(0, 0%, 40%) .5rem solid;
  }

  .card{
    margin-left:0;
    padding-left: 2rem;
    padding-right: 2rem;
    border-bottom: hsl(0, 0%, 40%) .5rem solid;
  }
}