* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --White: hsl(0, 0%, 100%);
  --Grey-500-medium: hsl(186, 15%, 59%);
  --Grey-900-darker: hsl(187, 24%, 22%);

  --Green-200-lighter: hsl(148, 38%, 91%);
  --Green-600-medium: hsl(169, 82%, 27%);
  --Red: hsl(0, 66%, 54%);

  --family: "karla", sans-serif;
  --font-size: 16px;
}

.message_card {
  position: absolute;
  opacity: 0;
  display: none;
  top: 0;
  width: 100%;
  max-width: 330px;
  font-size: 14px;
  margin: 0 auto;
  padding: 20px;
  color: var(--White);
  background-color: var(--Green-600-medium);
  font-family: var(--family);
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.add-msg {
  opacity: 1;
  display: block;
  transform: translateY(4rem);
}
.message_card h2 {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.dont {
  opacity: 0;
  display: block;
  font-size: 12px;
  color: var(--Red);
}

.err_msg {
  display: block;
  opacity: 1;
}
.err_input {
  border: 1px solid var(--Red);
}
body {
  font-size: var(--font-size);
  font-family: var(--family);
  color: var(--Grey-900-darker);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

main {
  background-color: var(--Green-200-lighter);
  margin: auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form_section {
  position: relative;
  width: 375px;
  background-color: var(--White);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 2rem 1.4rem;
  margin: 10px 0;
}

/* .form_section h1 {
  font-size: 2rem;
  padding-bottom: 1.2rem;
} */
.form_card {
  display: inline-flex;
  padding-top: 1rem;
  padding-bottom: 0.8rem;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 1;
}

.input_card {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.input_card input {
  padding: 1rem;
  border: 1px solid var(--Grey-500-medium);
  border-radius: 5px;
  font-family: var(--family);
  font-size: var(--font-size);
}

.query_type {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: none;
}
.radio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: none;
}

.radio div {
  padding: 1rem 1.5rem;
  border: 1px solid var(--Grey-500-medium);
  border-radius: 5px;
  font-size: var(--font-size);
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

.query_type legend {
  margin-bottom: 1rem;
}

.radio div input {
  border: 1px solid var(--Grey-500-medium);
  width: 1.33rem;
  height: 1.33rem;
  cursor: pointer;
  position: relative;
  offset: none;
}

.radio div input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  /* width: 23px; */
  border-radius: 50%;
}

.radio div input[type="radio"]::after {
  content: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" fill="none" viewBox="0 0 20 21"><path fill="%230C7D69" d="M10 .75a9.75 9.75 0 1 0 9.75 9.75A9.76 9.76 0 0 0 10 .75Zm0 18a8.25 8.25 0 1 1 8.25-8.25A8.26 8.26 0 0 1 10 18.75Zm5.25-8.25a5.25 5.25 0 1 1-10.499 0 5.25 5.25 0 0 1 10.499 0Z"/></svg>');
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-0.6px);
  display: none;
}

.radio div input[type="radio"]:hover {
  background-color: var(--Green-200-lighter);
}

.radio div input[type="radio"]:checked::after {
  display: block;
}
.radio div input[type="radio"]:checked {
  border: none;
}

.textarea {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.textarea textarea {
  padding: 1rem;
  border: 1px solid var(--Grey-500-medium);
  border-radius: 5px;
  font-family: var(--family);
  font-size: var(--font-size);
}

.consent article {
  display: flex;
  align-items: center;
  /* justify-content: flex-start; */
  gap: 1.5rem;
  padding: 10px 0;
}

.consent article input[type="checkbox"] {
  border: 1px solid var(--Grey-500-medium);
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
  position: relative;
  offset: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  border-radius: 3px;
}

.consent article input[type="checkbox"]::after {
  content: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="%230C7D69" d="M16.5 0h-15A1.5 1.5 0 0 0 0 1.5v15A1.5 1.5 0 0 0 1.5 18h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 16.5 0Zm-3.22 7.28-5.25 5.25a.748.748 0 0 1-1.06 0l-2.25-2.25a.75.75 0 1 1 1.06-1.06l1.72 1.72 4.72-4.72a.751.751 0 0 1 1.06 1.06Z"/></svg>');
  display: none;
  position: absolute;
}

.consent article input[type="checkbox"]:hover {
  background-color: var(--Green-200-lighter);
}

.consent article input[type="checkbox"]:checked::after {
  display: block;
}
.consent article label {
  font-size: calc(var(--font-size) * 0.8px);
}

button {
  width: 100%;
  padding: 1.2rem;
  border-radius: 0.5rem;
  border: none;
  background-color: var(--Green-600-medium);
  color: var(--White);
  font-size: var(--font-size);
  font-weight: 600;
  letter-spacing: 1px;
}

input:hover {
  border: 1px solid var(--Green-600-medium);
}

@media screen and (min-width: 1000px) {
  main {
    width: 90vw;
    height: 100vh;
    background-color: var(--Green-200-lighter);
    margin: 0 auto;
    padding: 20px;
  }

  .form_section {
    width: 735px;
  }
  .form_section h1 {
    padding-left: 1rem;
  }
  .form_card {
    /* width: 900px; */
    /* display: flex; */
    /* width: ; */
    flex-direction: row;
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 1rem;
  }
  .input_card input[name="first"] {
    width: 20rem;
  }
  .input_card input[name="last"] {
    width: 20rem;
  }

  .input_card input[name="email"] {
    width: 41rem;
  }

  .radio {
    width: 41rem;
    flex-direction: row;
  }

  .radio div {
    width: 50%;
  }

  .textarea {
    width: 41rem;
  }

  .textarea textarea {
    height: 7rem;
  }
  .consent {
    width: 41rem;
  }
  button {
    text-align: center;
    margin: auto;
  }
  .message_card {
    max-width: 400px;
  }
}