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

:root {
    --green-200-lighter: hsl(148, 38%, 91%);
    --green-600-medium: hsl(169, 82%, 27%);
    --red: hsl(0, 66%, 54%);
    --grey-500-medium: hsl(186, 15%, 59%);
    --grey-900-darker: hsl(187, 24%, 22%);
    --font-family: 'Karla', sans-serif;
}

body {
    background: var(--green-200-lighter);
    font-family: var(--font-family);
    display: grid;
}

.main,
input,
.radio,
textarea,
button {
    border-radius: 0.5em;
}

.main,
.form,
.form > div,
.radio {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.main {
    background: white;
    margin: 2em;
    padding: 2em;
}

.form {
    color: var(--grey-900-darker);
}


input {
    outline: 0;
    cursor: pointer;
    padding: 1em;
    border: 1px solid var(--grey-900-darker);
}

input:hover,
input:target {
    border: 2px solid var(--green-600-medium);
}



.radio {
    padding: 0.5em 2em;
    border: 1px solid var(--grey-900-darker);
    flex-direction: row !important;
}

.radio:hover{
    background: var(--green-200-lighter);
    border: 2px solid var(--green-600-medium);
}

input[type='radio'], 
input[type='checkbox'] {
    color: hsl(169, 82%, 27%);
    accent-color: var(--green-600-medium);
}
.choice {
    flex-direction: row !important; 
}

.radios {
    display: grid;
    gap: 1em;
}

textarea {
    outline: 0;
    border: 1px solid var(--grey-900-darker);
    padding: 2em;
    color: var(--grey-900-darker);
    font-weight: bold;
}

textarea:hover {
    border: 2px solid var(--green-600-medium);
}

button {
    padding: 1em;
    font-weight: bold;
    color: white;
    background: var(--green-600-medium);
    border: none;
}

button:hover {
    background: hsl(169, 82%, 15%);
}

footer {
    padding: 0 2em 2em 2em;
    text-align: center;
}

span {
    margin-top: -10px;
    padding-left: 1em;
    color: var(--red);
    font-size: 12px;
}

label > span {
    color: green;
}

input.error, textarea.error {
    border: 2px solid red;
  }
  
  .error-message {
    color: red;
    font-size: 0.8em;
    display: none;
    margin-top: 5px;
  }

  
.modal {
    display: none;
    background: var(--grey-900-darker);
    color: white;
    padding: 2em;
    border-radius: 1em;
    gap: 1em;
    margin: 1em;
    position: absolute;
}

.icon-info {
    display: flex;
    gap: 1em;
}


@media (min-width: 768px){
    .main {
        margin: 5em auto 2em auto;
        width: 50%;
    }
    
    .form {
        display: grid;
        grid-template-areas: 
            'first last'
            'email email'
            'query query'
            'message message'
            'choice choice'
            'submit submit'
        ;
    }

    .radios {
        display: flex;
        gap: 1em;
    }

    .radios > div {
        display: flex;
        flex-grow: 1;
    }

    .first-name {
        grid-area: first;
    }

    .last-name {
        grid-area: last;
    }
    
    .email {
        grid-area: email;
    }

    .query {
        grid-area: query;
    }

    .message {
        grid-area: message;
    }

    .choice {
        grid-area: choice;
    }

    .submit {
        grid-area: submit;
    }

    .modal {
        top: 1em;
        left: 50%;
        transform: translateX(-50%);
    }

}