.contact {
  background-color: #1f2022;
  color: #e8e6e3;
  padding: 20px 20px;
  width: 100vw;
  height: 100vh;
}

.contact h2 {
  text-align: center;
  font-size: 3rem;
  /* border: 1px solid red; */
}

.contact-items {
  display: flex;
}

.contact form {
  /* border: 1px solid red; */
  width: 50%;
  /* display: flex; */
  padding: 20px 50px;
  background-color: #1f2022;
}

.contact form h3 {
  font-size: 2rem;
  text-align: center;
}

/* .contact form div {
  margin-top: 20px;
} */

.contact form label {
  font-size: 20px;
  /* margin-bottom: 100px; */
}

.contact form input {
  width: 100%;
  height: 8vh;
  border: none;
  border-bottom: 1px solid rgb(136, 132, 132);
  background-color: #1f2022;
  /* border-radius: 5px; */
  margin-top: 20px;
  font-size: 20px;
  padding: 10px;
  color: white;
}

.contact form input:hover {
  border-bottom: 1px solid rgb(255, 255, 255);
  /* color: rgb(255, 255, 255); */
}

.contact form input:focus {
  outline: none;
}

input::placeholder {
  color: white;
  /* opacity: 5;  */
}

/* .contact form textarea {
  width: 100%;
  height: 15vh;
  border: none;
  border-bottom: 1px solid  rgb(136, 132, 132);
  background-color: #1f2022;
  margin-top: 5px;
  font-size: 25px;
  padding: 10px;

} */
.contact form button {
  margin-top: 30px;
}

.social {
  /* border: 1px solid red; */
  padding: 100px 50px 50px 100px;
}

.social h1 {
  /* border: 1px solid red; */
  text-align: center;
}

.social a {
  color: rgb(39, 38, 38);
  background-color: rgb(179, 175, 175);
  /* color: #67fd67cc;
  background-color: #181a1b; */
  margin: 10px;
  text-decoration: none;
  font-size: 30px;
  padding: 10px;
  border-radius: 12px;
}

.fa-linkedin:hover {
  background: #0077B5;
  color: white;
  /* background: #67fd67cc;
  color: #181a1b; */
}

.fa-github:hover {
  background: #181717;
  color: white;
}

.fa-twitter:hover {
  background: #55acee;
  color: white;
}

.fa-youtube:hover {
  background: #bb0000;
  color: white;
}