@import url(./style.css);
main {
  text-align: center;
  padding-block-start: 85px;
  padding-inline: 20px;
}

.imgPing {
  width: 16%;
}
main .main-header,
form {
  padding-inline: 28px;
}

main h2 {
  color: var(--gray);
  font-size: 22px;
  font-weight: 300;
  margin-block-start: 36px;
  margin-block-end: 10px;
}
main h2 span {
  color: var(--very-dark-blue);
  font-weight: 700;
}
main p {
  color: var(--very-dark-blue);
  font-size: 12px;
  margin-block-start: 18px;
  margin-block-end: 32px;
}
form {
  height: 150px;
}
form #email {
  font-weight: 300;
  border-radius: 24px;
  border: none;
  outline: 1px solid var(--pale-blue);
  padding: 12px 32px;
}
form #email::placeholder {
  color: var(--gray);
  opacity: 0.5;
}
form div:nth-child(2) {
  margin-block-end: 10px;
}
form span#errorMessage {
  display: block;
  color: var(--light-red);
  font-size: 10px;
  margin-block-end: 24px;
  letter-spacing: 0.1px;
  margin-block-start: 6px;
  font-style: italic;
}
form input#btnSubmit {
  cursor: pointer;
  border: none;
  border-radius: 34px;
  line-height: 40px;
  font-weight: 600;
  background-color: var(--blue);
  color: white;
}
form input#btnSubmit:hover {
  background-color: #7195f5;
}

main img.main-img {
  padding-block-start: 8px;
  padding-block-end: 96px;
  padding-inline: 8px;
}

/*---------------------FOOTER------------------------*/
footer {
  text-align: center;
}
footer ul {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-block-start: 20px;
  margin-block-end: 10px;
}
footer ul li a {
  display: flex;
  border-radius: 50%;
  cursor: pointer;
  height: 31px;
  width: 31px;
  border: 1px solid #f3f2f7;
  padding: 4px;
}
footer ul li a:hover {
  background-color: var(--blue);
}
footer ul li a:hover path {
  fill: white;
}

footer ul li a path {
  fill: #4d7ff3;
}
footer p {
  color: var(--gray);
  font-size: 10px;
  font-weight: 300;
  margin-block: 28px;
}
/*-----------------footer frontend mentor-------------------*/
.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}