@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

:root
{
          /* ## Colors
          ### Primary */
          --Green-lighter: hsl(148, 38%, 91%);
          --Green-medium: hsl(169, 82%, 27%);
          --Red: hsl(0, 66%, 54%);
          /* ### Neutral */
          --White: hsl(0, 0%, 100%);
          --Grey-medium: hsl(186, 15%, 59%);
          --Grey-darker: hsl(187, 24%, 22%);
}

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

html 
{
	font-size: 16px;
}

body
{
	width:100%;
	height:100vh;
	font-family: "Karla",sans-serif;
	max-height: 100vh;
	background-color: var(--Green-lighter);
	align-content: center;	
}

form 
{
	background-color: var(--White);
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
	padding: 1.5rem 1.2rem 1.2rem 1.2rem;
	border-radius: 10px;
}

.container
{
	margin-bottom: 1rem;
}

.full
{
	width: 100%;
}

.name-container 
{
	display: flex;
	column-gap: 1.2rem;
}

.name-container > .container 
{
	flex-grow: 1;
	flex-shrink: 1;
}

.container input:not([type="radio"])
{
	width: 100%;
	padding: .6rem;
	border-radius: 5px;
	border: 1px solid gray;
	outline: none;
}

.container input:focus
{
	border: 1px solid var(--Green-medium);
}

.query-container 
{
	margin-top: .5rem;
	width: 100%;
	display: flex;
	justify-content: space-between;
	column-gap: 1.2rem;
	flex-wrap: wrap;
	row-gap: 1rem;
}


.query-input 
{
	flex-grow: 1;
	flex-shrink: 1;
	border: 1px solid black;
	padding: .6rem;
	border-radius: 5px;
	position: relative;
}

.active 
{
	background-color: var(--Green-lighter);
	transition: background-color 0.3s ease;
	border: 1px solid var(--Green-medium);
}


input
{
	cursor: pointer;
}



.query-container input 
{

	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	top: 50%;
	left:1rem;
	transform: translateY(-50%);
	margin: 0;
}

.radio-icon-container
      {
            position: absolute;
            display: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            top: 50%;
            left:1rem;
            transform: translateY(-50%);
            img
            {
                  height: 100%;
                  width: 100%;
            }
      }

.hide 
      {
	display: none;
      }

.text 
      {
	display: inline-block;
	margin-left: calc(1rem + 25px + .5rem);
      }





textarea#message 
{
	width: 100%;
	border-radius: 5px;
	margin-top: .5rem;
	padding-left: 1rem;
	padding-top: .5rem;
}

textarea#message:focus
{
	outline: 1px solid var(--Green-medium);
	border: none;
}

.query-container + p 
{
	margin-bottom: 1rem;
}

.terms 
{
	cursor: pointer;
	input 
	{
		margin-right: 1rem;
		cursor: pointer;
	}

	p 
	{
		margin-top: .5rem;
	}

	p.consent-text 
	{
		display: inline-block;
	}
}

/* Errors */
#firstName:user-invalid + p,
#lastName:user-invalid + p
{
	visibility: visible;
}

#email:invalid:not(:placeholder-shown):not(:focus) + p
{
	visibility: visible;
}

textarea#message:user-invalid + p
{
	visibility: visible;
}

.checkbox:user-invalid ~ .error
{
	visibility: visible;
}

form h3 
{
	margin-bottom: 1rem;
}

label
{
	font-size: 1rem;
}

p.error
{
	color: red;
	font-size: .8rem;
	visibility: hidden;
}

button.submit 
{
	background-color: var(--Green-medium);
	border: none;
	color: var(--White);
	padding: .7rem 0;
	border-radius: 5px;
	font-weight: bold;
	margin-top: 1.5rem;
}



@media (max-width:600px)
{
	

	.name-container
	{
		flex-wrap: wrap;
	}

	form 
	{
		margin-top: 2rem;
	}
}