.customers-screen
{
	width: min(780, 100vw);
	margin:	2rem;
	height: auto;
	padding: 1rem;
	display: flex;
	flex: column nowrap;
	justify-content: space-between;
	align-items: center;
	overflow: auto;
	position: relative;
	background:hsl(181 35% 95% / 1 );
	color:black;
	border-radius:25px;
}

.customer-screen section
{
	display: flex;
	flex-flow: column nowrap;
	height: 100%;
	width: 100%;
	padding: 3em;
	overflow: auto;
}

.customer-registered
{
	width: 100%;
	margin: 2rem auto;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	background: hsl(181 35% 95% / 1 );
	color: black;
	border-radius: 25px;
	position: relative;
}
 
.customer-registered-card
{
	width: 100%;
	background: hsl(181 35% 95% / 1 );
	border: 2px solid black;
	border-radius: 25px;
	font-size: 1em;
	margin: 1rem auto;
	padding: 1em;
}

.billing-section
{
	margin: 1rem;
	background: hsl(195 25% 90% / .7);
}

.customer-edit form fieldset:first-of-type div:first-of-type
{
	overflow: auto;
	margin-inline: auto;
	padding: 1rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
}
 

.customer-form
{
	overflow: auto;
	margin-inline: auto;
	padding: 5em;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
}
 
.customer-form input[type='text'], label
{
	font-size: clamp(1rem, 3vh + .38em, 1.5rem);
} 
 
.billing-form
{	
	width: 100%;
	margin: 1.5rem auto;
	padding: 1.5rem auto;
	background: hsl(183 50% 95% / 1);
	border: none;
	
}
 
.billing-form div
{	
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	font-size: inherit;
	margin: 1.5em auto;
	padding: 1.5em auto;
	width: min(80ch, 100%);
	background: transparent;
	border: none;
	
}
 
.billing-form label
{
	font-family: Tahoma;
	font-size: clamp(1em, 1.5vh + .38em, 2.5em);
	
}
 
.billing-form input[type="text"], input[type="date"]
{
	width: 20ch;
	font-family: Tahoma;
	font-size: clamp(12px, 1.5vh + .38em, 155px);
	
}

.customer-screen input[type="text"], input[type="date"]
{
	width: 20ch;
	font-family: Tahoma;
	font-size: clamp(12px, 1.5vh + .38em, 155px);
	
}
 
.customer-form input
{
	width: 100%;
}

.customer-form fieldset
{
	margin: .3em;
	padding: 5em auto;
	position: relative;
}
 

.customer-form fieldset:first-of-type
{
	background: hsl(10 100% 50% /.5);
}
 
.customer-form fieldset:nth-of-type(2n)
{
	background: hsl(100 100% 50% /.5);
}
 
.customer-form fieldset:last-of-type
{
	background: hsl(180 100% 50% /.5);
}
 
.personal-info legend
{
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 15rem;
}
 
.customer-information
{
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
	align-content: center;
	width: 100%;
	height: auto;
	padding: 2em;
} 
 
.customer-information > section
{
	padding: 2em;
} 
 
.customer-address
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: center;
	border: 2px solid black;
	background: brown;
	width: 100%;
	height: auto;
	margin: 2em;
	padding: 2em;
} 
 
.customer-address article:first-child
{
	background: chocolate;
} 

#shipping-option:checked article.shipping-option
{
	background: white;
} 
 
.customer-btns
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 2em;
	padding: 2em;
	background: hsl(203 100% 50% / 1 );
	border-radius: 25px;
	box-shadow: 1em 1em 2em hsl(203 100% 30% / 1 );
}

.customer-btns button
{
	border-radius: 15px;
	box-shadow: .75em .75em 1em hsl(0 0% 30% / 1);
}

@media (max-width: 650px) 
{
	main{
		padding: 0;
	}

	.customer-form
	{
		width: 100%;
		height: auto;
		margin: 1.3em;
		padding: 1.3em auto;
		background: hsl(180 100% 50% / 1);
	}
	 
	.customer-form fieldset
	{
		padding: .5em auto;
	}
	 

	.customer-form fieldset:first-of-type
	{
		background: hsl(108 100% 50% /.5);
	}
	 
	.customer-form fieldset:nth-of-type(2n)
	{
		background: hsl(108 100% 50% /.5);
	}
	 
	.customer-form fieldset:last-of-type
	{
		background: hsl(188 100% 50% /.5);
	}
	 
	.customer-form legend
	{
		position: absolute;
		bottom: 0;
		right: 0;
		margin-top: 15rem;
	}
	 
	.customer-information
	{
		width: 100vw;
		height: auto;
		padding: .2em;
	} 
 
	.customer-registered-card
	{
		width: 100%;
		background: hsl(205 8% 91% / 1 );
		margin: 0;
		padding: .5em;
	}

	.customer-btns
	{
		flex-direction: column;
		margin: 2em;
		padding: 2em;
		background: hsl(293 100% 50% / 1 );
		border-radius: 25px;
		box-shadow: 2em 2em 2em hsl(203 100% 50% / 1 );
	}

	.customer-btns button:last-of-type
	{
		margin-top: 3em;
	}

}