style.css

*{
    border: 0;
    margin: 0;
    box-sizing:border-box;
}
body{
    font-family:"karla";
    background-color: whitesmoke;
    font-size: 100%;
    font-weight:700;
}
main{
  display: flex;
  height: 100vh;
  width: 100%;
  padding: 100px 30px;
}
.container{
  width: 80%;
  padding: 30px;
  margin-top: 345px;
  margin:auto;
  border-radius: 8px;
  background-color: white;
  box-shadow:0px 0px 14px 1px #00000024;
}

.community{
  color:hsl(179, 62%, 43%);
}

.section{
  color: hsl(71, 73%, 54%);
  margin-top: 20px;
}
.section2{
  color: hsl(218, 22%, 67%);
  margin-top: 20px;
  line-height: 1.5;
  margin-bottom: 70px;
}
.flex-container{
  margin: -30px;
  color: white;
}
.flex-left{
  background-color:hsl(179, 62%, 43%);
  padding:35px;
  line-height: 1.5;
}
.flex-left p{
  color:rgba(255, 255, 255, 0.856);
}
.dollar{
  font-size:35px;
  font-weight: 700;
}
.date{
  position: absolute;
  color: rgba(247, 243, 243, 0.589);
  margin-top: 13px;
  margin-left: 14px;
}
.button{
  color: white;
  background-color:hsl(71, 73%, 54%);
  border: none;
  outline: none;
  cursor: pointer;
  width: 100%;
  padding:15px;
  margin-top: 25px;
  border-radius: 4px;
}
.button:hover{
  background-color:hsl(71, 73%, 47%);
}
.flex-right{
  background-color: hsl(179, 62%, 45%);
  padding: 25px ;
}
.right-header{
  color: white;
}
.section3{
  color: rgba(255, 255, 255, 0.856);
  margin-top: 20px;
  line-height: 1.5;
}
.attribution{
      margin-top: 100px;
       text-align: center;
       color: black;
}
.attribution a{
  color: black;
}
@media screen and (max-width:768px) {
  footer{
    display: none;
  }
}
@media screen and (min-width:768px) {
  .container{
    width: 50%;
    display: flex;
    flex-direction:column;
  }
  .flex-container{
    display: flex;
  }
  .flex-left{
    width: 50%;
  }
  .flex-right{
    width: 50%;
  }
  .attribution{
    margin-top: 100px;
  }
}