/* this is the main parent the black color*/
.color{
  padding: 300px 300px  300px 300px;
  background-color: #000000;
}
/* this section is part of how did we do?*/
.h1{
color: #ffffff;
font-weight: bolder;
font-size: 20px;
font-family: 'Anton', sans-serif;
font-family: 'Fascinate', cursive;
font-family: 'Fraunces', serif;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Ubuntu', sans-serif;
}
/* this section is part of the long paragraph within the conteiner*/
.p{
  margin-top: 10px;
  font-size: 15px;
  color: #ffffff;
  font-family: 'Anton', sans-serif;
  font-family: 'Fascinate', cursive;
  font-family: 'Fraunces', serif;
  font-family: 'Lato', sans-serif;
  font-family: 'Oswald', sans-serif;
  font-family: 'Ubuntu', sans-serif;
  display: inline-block;

  /*this is the div box with the h1 and the paragragh and also the button section*/
}
.container-sm{

 background:#252D37;
 margin-top:50px;
 border-radius:30px;
 padding:20px;
 height: 320px;
 width: 370px;
 position:relative;
/* this section is the h1 color*/
}
.h1{
color: #FFFFFF;
margin-top: 5px;
}
/*this section is the paragraph color */
.p{
color:#73777B;

}
/*this section is the circle with the star the div*/
.con{
 margin-top: 10px;
 background-color:#413F42;
 border-radius:50px;
 height:25px;
 width:25px;
 display:inline-block;
 text-align:center;
}
/* this section is the circles with numbers*/
.dot{
 background-color:#413F42;
 border-radius:50px;
 height:30px;
 width:30px;
 display:inline-block;
 margin-bottom:29px;
 text-align:center;
 margin-left: 25px;

 color: #7C8798;

}
/*this is the button section*/
.btn{
 background:#F15412;
 width:320px;
 position:absolute;
 border-radius:50px;
 color:#ffffff;
 text-align: center;
 margin-right:40px;

 }
 .attribution{
   margin-top: 20px;
 }