@layer reset {

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

@font-face {
  font-family: 'Karla-Regular', sans-serif;
  src: url(/assets/fonts/static/Karla-Regular.woff2) format('woff2');
  src: url(/assets/fonts/static/Karla-Regular.woff) format('woff');
  src: url(/assets/fonts/static/Karla-Regular.ttf) format('ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Karla-Bold', sans-serif;
  src: url(/assets/fonts/static/Karla-Bold.woff2) format('woff2');
  src: url(/assets/fonts/static/Karla-Bold.woff) format('woff');
  src: url(/assets/fonts/static/Karla-Bold.ttf) format('ttf');
  font-weight: bold;
  font-style: normal;
}

:root {
  /* Colors */
  --gray-500: hsl(186deg, 15%, 59%);
  --gray-900: hsl(187deg, 24%, 22%);
  --green-200: hsl(148deg, 38%, 91%);
  --green-600: hsl(169deg, 82%, 27%);
  --green-600-hover: hsl(169deg, 82%, 16%);
  --white: hsl(0deg, 0%, 100%);
  --red: hsl(0deg, 66%, 54%);
  --radio-border-color: var(--gray-500);
  --radio-checked-color: var(--green-600);
  --radio-hover-color: var(--gray-500);
  --radio-disabled-bg-color: #d9d9d9;

  /* Typography */
  --body-sm: 1rem;
  --body-md: 1.125rem;
  --fs-heading: 2rem;
}

body {
  accent-color: var(--green-600);
  font-family: 'Karla-Regular', sans-serif;
  font-size: var(--body-sm);
  line-height: 1.6;
  background: var(--green-200);
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  margin:0;

}

h1,
h2,
p {
  margin-block: 0;

}

@layer layout {
  .form-group-full {
    grid-column: 1 / -1;
  }
}

@layer form {
    
  .form-wrapper {
    width: 100%;
    max-width: 46rem;
    padding: 1.5rem;
    background-color: var(--white);
    border-radius: 16px;
     @media (width > 560px) {
      padding: 2.5rem;
    }
  }

  h1 {
    color: var(--gray-900);
    font: bold var(--fs-heading)/1 'Karla-Bold', sans-serif;
    letter-spacing: -1px;
    padding-block-end: 1.5rem;
  }

  form {
    display: grid;
    gap: 1rem;
    
    @media (width > 560px) {
      grid-template-columns: repeat(2, 1fr);
      row-gap: 1.5rem;
    }
  }
.form-group:has(input[type="checkbox"]){
  margin-block: 1rem;
  
}
  fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: inherit;
    grid-template-columns: inherit;
  }

  textarea {
    height: 3.8lh;
    box-sizing: content-box;
    resize: block;
    align-content: center;
  }

  .form-group {
    display: grid;
  }
.error-msg{
  display: block;
}
  .form-group .error-msg,
  fieldset .error-msg  {
    color: var(--red);
    font-size: var(--body-sm)
  }

  fieldset:has([required]) legend,
  .form-group:has(:not([type="radio"], [type="checkbox"])[required]) label {
    display: flex;
    gap: 1ch;
    margin-block-end: .5rem;

    &::after {
      content: "*";
      color: var(--green-600);
    }
  }

  input,
  textarea,
  .form-group:has([type="radio"]) {
    border: 1px solid var(--gray-500);
    border-radius: 6px;
    padding: .75rem 1.5rem;
    font-family: inherit;
    font-size: var(--body-md);
    color: var(--gray-900);
    &:focus-visible,
    &:hover:not([type="radio"], [type="checkbox"]) {
      outline: 1px solid var(--green-600);
    }
     &:focus-visible[aria-invalid="true"],
     &:hover[aria-invalid="true"] {
      outline: 0;
  }
}

  input[aria-invalid="true"],
  textarea[aria-invalid="true"]{
      border-color:var(--red);
    }

  [type="radio"],
  [type="checkbox"] {
    width: 1rem;
  }

  .form-group:has([type="radio"]) {
    position: relative;

    label::after {
      content: "";
      position: absolute;
      inset: 0;
    }
  }

  .form-group:has([type="radio"]) {
    display: flex;
    gap: 1ch;
    &:has([type="checkbox"]){
      flex-direction: column;

    }
  }

  .form-group:has([type="radio"]:checked) {
    background-color: var(--green-200);
    border: 1px solid var(--green-600);
  }

  button {
    background-color: var(--green-600);
    color: var(--white);
    font-size: var(--body-md);
    font-weight: bold;
    border: none;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    transition: background .3s ease;
    cursor: pointer;

    &:hover{
      background-color: var(--green-600-hover);
    }
  }
}

.attribution{
  text-align: center;
  padding-block: 16px;

  a{
    color: var(--green-600);
    text-decoration: none;
    transition: text-decoration .3s ease, color .3s ease;
    &:hover{
      text-decoration: underline;
      color: var(--green-600-hover);
    }
  }
}