:root {
  --contact-font-size: clamp(0.2rem, 2vw + 1vh, 5rem);
}
* {
  box-sizing: border-box;
}

.contact-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
  margin: auto;
  z-index: 1;
}

.contact-form {
  border-radius: calc(1vh + 2vw);
  border: 2px solid #2afd00;
  box-shadow: 0 0 calc(var(--contact-font-size) * 0.5)
    calc(var(--contact-font-size) * 0.2) #2afd0044;
  padding: 2vh 2vw 2vh 2vw;
  animation: fadeIn 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  width: clamp(20%, auto, 90%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.contact-form h2 {
  margin: 0 0.3vw 0 0.3vw;
  color: #e74c3c;
  font-size: calc(var(--contact-font-size) * 1.2);
  text-align: center;
}
.contact-form h3 {
  margin: 0 0.1vw 0 0.1vw;
  color: #16a085;
  font-size: calc(var(--contact-font-size) * 0.5);
  text-align: center;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 0 2vw 0 2vw;
}

.contact-form label {
  margin: 0.5vh 0.1vw 0.1vh 0.4vw;
  color: #38cd54;
  font-size: calc(var(--contact-font-size) * 0.4);
}
.contact-form input,
.contact-form textarea {
  border-radius: calc(0.2vh + 0.7vw);
  padding: 0 0.7vw 0.5vh;
  font-size: calc(var(--contact-font-size) * 0.5);
  border: 2px solid #e92009;
}

.contact-form textarea {
  resize: both;
  min-width: 99.4%;
  max-width: 91dvw;
  min-height: 10vh;
  max-height: 22vh;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border: #00ff1e 2px solid;
  box-shadow: 0 0 2px 3px #2afd0055;
  width: 101%;
}
.err-counter-group {
  display: flex;
  /* justify-content: space-between; */
}

.error-message {
  color: #b31908;
  font-size: calc(var(--contact-font-size) * 0.35);
}

.form-group .char-counter {
  color: #fff;
  font-size: calc(var(--contact-font-size) * 0.25);
  text-align: right;
  margin-left: auto;
  padding: 0 0.5dvh 0 0;
}
.submit-btn {
  margin: 4% 0 4% 0;
  padding: 0 0 1vh 0;
  background: linear-gradient(90deg, #e74c3c 60%, #16a085 100%);
  color: #fff;
  border-radius: calc(0.2vh + 0.7vw);
  font-size: calc(var(--contact-font-size) * 0.6);
  cursor: pointer;
  box-shadow: 0 0 2px 2px #04e63c44;
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
  animation: btnPop 0.7s;
}

@keyframes btnPop {
  0% {
    transform: scale(0.9);
  }
  80% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.submit-btn:hover,
.submit-btn:focus {
  background: linear-gradient(90deg, #16a085 40%, #e74c3c 100%);
  border: 2px solid #00fd19;
  box-shadow: 0 4px 24px #16a08566;
  transform: translateY(-2px) scale(1.04);
}

.form-success {
  color: #38cd54;
  text-align: center;
  font-size: calc(var(--contact-font-size) * 0.6);
}