@font-face {
  font-family: "Karla";
  src: url(./assets/fonts/Karla-VariableFont_wght.ttf) format("truetype");

  font-weight: 400 700;
  font-style: italic;
}

:root {
  /* Colors */

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

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

  /* Font */

  --ff-main: "Karla", sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;
}

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

html {
  font-size: 16px;
  color: var(--Grey-900);
}

body {
  font-family: var(--ff-main);
  padding: 1.5rem;
  background-color: var(--Green-200);
  height: 100vh;
  /* max-height: 100%; */
}

.form-container {
  background-color: var(--White);
  padding: 1.3rem;
  height: auto;
  border-radius: 20px;
  position: relative;
}

input {
  color: var(--Grey-500);
  border: 1px solid;
  padding: 0.5rem;
}

span {
  color: var(--Green-600);
}

p {
  display: none;
  color: var(--Red);
}

/* Success container styling */

.success-container {
  display: none;
  width: 90%;
  background-color: var(--Grey-900);
  position: absolute;
  top: 10px;
  left: 5%;
  height: 100px;
  border-radius: 20px;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  padding-left: 1.5rem;
}

.message-sent {
  display: flex;
  padding-bottom: 0.5rem;
  justify-content: left;
}

.success-container > p {
  display: block;
  color: var(--White);
}

.message-sent > h4 {
  color: var(--White);
  font-weight: var(--fw-bold);
}

.radio-button-selected {
  display: none;
}

.first-name,
.last-name,
.email,
.message {
  display: flex;
  flex-direction: column;
}

.first-name > input,
.last-name > input,
.email > input {
  margin-block: 0.5rem;
  height: 50px;
  border-radius: 10px;
}

.first-name > label {
  margin-top: 1rem;
}

section {
  margin-block: 1rem;
}

.radio-section > label {
  margin-bottom: 1rem;
}

.radio-section > div {
  border: 1px solid var(--Grey-500);
  height: 50px;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  margin-block: 1rem;
  border-radius: 10px;
  padding-left: 1.3rem;
}

h4 {
  padding-inline: 0.6rem;
  font-weight: var(--fw-regular);
}

.message > label {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.message > textarea {
  height: 230px;
  border-radius: 10px;
  border: 1px solid var(--Grey-500);
  padding: 0.5rem;
}

.checkbox {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  margin-block: 2rem;
}

.checkbox > label {
  padding-left: 1.2rem;
}

button {
  background-color: var(--Green-600);
  width: 100%;
  padding-block: 1rem;
  border-radius: 10px;
  border: none;
  color: white;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.attribution {
  padding-top: 1rem;
}

/* Active states */

input:hover,
textarea:hover,
.radio-section > div:hover {
  border: 2px solid var(--Green-600);
  cursor: pointer;
}

.checkbox > label:hover {
  cursor: pointer;
}

.radio-section > div:focus-within {
  background-color: var(--Green-200);
}

@media (min-width: 678px) {
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .form-container {
    width: 600px;
    padding: 2rem;
    position: relative;
  }

  .personal-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .first-name {
    grid-column: 1/2;
  }

  .last-name {
    grid-column: 2/-1;
    margin-top: 1rem;
  }

  .email {
    grid-column: span 2;
  }

  .radio-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .general {
    grid-column: 1/2;
  }

  .support {
    grid-column: 2/-1;
  }

  .radio-section > label {
    margin-bottom: 0;
  }

  .message > textarea {
    height: 100px;
  }

  .checkbox {
    justify-content: left;
  }

  .success-container {
    width: 65%;
    top: -14%;
    left: 17.5%;
  }
}