* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  background-color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  font-size: 20px;
}
img {
  width: 50%;
}

header {
  max-width: 50%;
  margin-top: 10%;
}
header .ping {
  width: 10%;
  margin-bottom: 3rem;
}

header h1 {
  color: hsl(0, 0%, 59%);
  font-weight: lighter;
  margin-bottom: 1rem;
}
header h1 span {
  color: hsl(209, 33%, 12%);
  font-weight: lighter;
}

header p {
  color: hsl(209, 33%, 12%);
  font-size: 15px;
  margin-bottom: 1rem;
  font-weight: lighter;
}
header .btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items:baseline;
  gap: 0.3rem;
  margin-bottom: 2rem;
}
header .btn input {
  width: 100%;
  border-radius: 20px;
  padding: 10px 15px;
  border: 1px solid hsl(223, 69%, 84%);
  font-size: 10px;
}
header .btn div{
  width: 50%;
}
header button {
  background-color: hsl(223, 87%, 63%);
  color: white;
  font-size: 12px;
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
}
header button:hover {
  background-color: hsl(223, 64%, 70%);
}

#email-err{
  color: rgb(241, 96, 96);
  font-size: 10px;
  margin-left: 10px;
  text-align: start;
}

.section-center img {
  width: 60%;
}

.section-footer .icons{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.section-footer .icons a{
  color: hsl(223, 87%, 63%);
  background-color: white;
  border: 1px solid hsl(0, 0%, 78%);
  border-radius: 50%;
  padding: 9px;
}
.section-footer .icons a:hover{
  text-align: center;
  color: hsl(223, 64%, 70%);
  background-color: transparent;
}
.section-footer .copy{
  color: hsl(0, 0%, 59%);
  font-size: 10px;
  font-weight: 300;
}
@media screen and (max-width: 760px) {
  header .ping{
    margin-bottom: 2rem;
  }
  header h1{
    font-size: 1.9rem;
  }
  .section-center img{
    width: 100%;
  }
  .btn div input{
    width: 100%;
  }
}