#contact {
  height: 800px;
  padding: 40px 20px;
  background-color: #f9f9f9; /* Light background for the contact section */
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto; /* Center the section */
  width: 40vw;
}

@media (max-width: 1400px) {
  #contact{
    width: 90%;
  }
}

h2 {
  text-align: center;
  margin-bottom: 20px; /* Space below the heading */
  font-size: 2em; /* Larger font size for the heading */
  color: #333; /* Darker color for the heading */
}

form {
  display: flex;
  flex-direction: column; /* Stack form elements vertically */
  gap: 15px; /* Space between form elements */
}

label {
  font-weight: bold; /* Bold labels */
  color: #555; /* Darker color for labels */
}

input[type="text"],
input[type="email"],
textarea {
  padding: 10px; /* Padding for input fields */
  border: 1px solid #ccc; /* Light gray border */
  border-radius: 5px; /* Rounded corners */
  font-size: 1em; /* Standard font size */
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: #007bff; /* Change border color on focus */
  outline: none; /* Remove outline */
}

button {
  padding: 10px; /* Padding for the button */
  background-color: #007bff; /* Primary button color */
  color: white; /* Text color for the button */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners */
  font-size: 1em; /* Standard font size */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s; /* Smooth transition */
}

button:hover {
  background-color: #0056b3; /* Darker shade on hover */
}

#response-message {
  margin-top: 20px; /* Space above the response message */
  padding: 10px; /* Padding for the message */
  border-radius: 5px; /* Rounded corners */
  background-color: #e0ffe0; /* Light green background */
  color: #333; /* Darker text color */
  text-align: center; /* Center the message */
}

@media (max-width: 950px) {
  #contact {
    width: 80%;
  }
}

/* Second Component */

.main {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
  margin-top: 2.5em;
}

.up {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.down {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.card1 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: rgb(255, 255, 255);
  border-radius: 90px 5px 5px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: 0.2s ease-in-out;
}

.instagram {
  margin-top: 1.5em;
  margin-left: 1.2em;
  fill: #cc39a4;
}

.card2 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: rgb(255, 255, 255);
  border-radius: 5px 90px 5px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: 0.2s ease-in-out;
}

.twitter {
  margin-top: 1.5em;
  margin-left: -0.9em;
  fill: #03a9f4;
}

.card3 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: rgb(255, 255, 255);
  border-radius: 5px 5px 5px 90px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: 0.2s ease-in-out;
}

.github {
  margin-top: -0.6em;
  margin-left: 1.2em;
}

.card4 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: rgb(255, 255, 255);
  border-radius: 5px 5px 90px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: 0.2s ease-in-out;
}

.discord {
  margin-top: -0.9em;
  margin-left: -1.2em;
  fill: #8c9eff;
}

.card1:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #cc39a4;
  box-shadow: 1px 1px 0px #eeb1de, 2px 2px 0px #d365b6, 3px 3px 0px #d365b6,
    4px 4px 0px #d365b6, 5px 5px 0px #d365b6;
}

.card1:hover .instagram {
  fill: white;
}

.card2:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #03a9f4;
  box-shadow: 1px 1px 0px #a1defa, 2px 2px 0px #41bef8, 3px 3px 0px #41bef8,
    4px 4px 0px #41bef8, 5px 5px 0px #41bef8;
}

.card2:hover .twitter {
  fill: white;
}

.card3:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: black;
  box-shadow: 1px 1px 0px rgb(124, 123, 123), 2px 2px 0px #333, 3px 3px 0px #333,
    4px 4px 0px #333, 5px 5px 0px #333;
}

.card3:hover .github {
  fill: white;
}

.card4:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #8c9eff;
  box-shadow: 1px 1px 0px #bdc2e2, 2px 2px 0px #9ca6e0, 3px 3px 0px #9ca6e0,
    4px 4px 0px #9ca6e0, 5px 5px 0px #9ca6e0;
}

.card4:hover .discord {
  fill: white;
}

.card1,
.card2,
.card3,
.card4 {
  box-shadow: 1px 1px 0px rgb(179, 175, 175), 2px 2px 0px rgb(179, 175, 175),
    3px 3px 0px rgb(179, 175, 175), 4px 4px 0px rgb(179, 175, 175),
    5px 5px 0px rgb(179, 175, 175);
}