* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  min-height: 100vh;
  grid-template-columns: 100%;
  grid-template-rows: 10% 75% 15%;
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
}
header {
  display: flex;
  justify-content: space-between;
  color: white;
  padding: 2rem 1rem;
  border-bottom: 2px solid #a9508b;
  grid-area: header;
}
.nav__links {
  display: inline-block;
  padding: 1rem;
  color: white;
  text-decoration: none;
  font-size: 0.8rem;
}
.purple {
  color: #a9508b;
}
.dark {
  color: white;
  background-color: #35424a;
}
.light {
  color: black;
  background-color: white;
}
button {
  background-color: #f16529;
  color: white;
  padding: 8px 15px;
  border: none;
}
/* main */

.section-top {
  min-height: 200px;
  background-image: url(./img/showcase.jpg);
  background-position: center;
  background-size: cover;
  color: white;
  text-align: center;
}
.section-top h2 {
  font-size: 2.5rem;
  padding: 3rem 0 1rem;
}

.section-subscribe {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  color: white;
}
.section-subscribe span,
.section-subscribe input {
  padding: 8px 10px;
  border: none;
}
.section-subscribe span {
  font-weight: 700;
}

.section-middle {
  display: flex;
  padding: 1rem;
  justify-content: space-between;
}
.left,
.right {
  padding: 0 1rem;
}
.right {
  min-width: 400px;
}
.section-middle h3,
.section-middle p,
.section-top p {
  padding-bottom: 1rem ;
}
.about--inner {
  padding: 1rem;
}
.section-middle input,
textarea {
  width: 100%;
  padding: 5px;
}

.section-bottom {
  background-color: white;
  display: flex;
  justify-content: space-around;
}
.section-bottom__works {
  text-align: center;
  padding: 2rem 1rem;
}
.section-bottom__works h3 {
  padding: 1rem;
}
.section-bottom img {
  width: 100px;
}

/* Footer */

footer {
  grid-area: footer;
  text-align: center;
  padding: 2rem;
  width: 100%;
  height: 100%;
}

@media (max-width: 660px) {
  body{
    grid-template-rows: 10% 80% 10%;
   

  }
    header {
    display: block;
    text-align: center;
}
.section-middle {
    flex-direction: column;
  }
  .section-bottom {
   flex-direction: column;

  }

}