body{
    display: grid;
    
    background-color: aliceblue;
    margin: 0;
    padding: 0;
   
}

form{
    display: grid;
    place-items: center;
    
}

main{
   
   display: grid;
   place-items: center;
   width:100%;
}

.containter{

    display: grid;
    place-items: center;
    width: 100%;
}

.signup{
border-radius: 10px;
background-color: white;
width: 40%;
margin-top:5px;
/*height: 65vh;*/
display: grid;
place-items: center;
}

.select{

    width:85%;
}

h1{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;

}

input, select{
border-radius: 7px;
    /*display:grid;*/
    width: 50%;
    /* height: 30px; */
    font-size: 18px;
    place-items: center;
    margin-bottom: 16px;
    background-color:rgb(243, 243, 243);
   border:0;
    padding:7px;
   
}
.gender{
accent-color: green;
display: flex;
width:25px;
height: 20px;
  
}
.Female{
	
	accent-color: purple;
}
#buttonform{
	
	background:#FFA41C;
	height:auto;
}

#signupNow{
	
	background: #FFA41C;
	display:grid;
	margin: auto;
	border-radius: 20px;
}

#line{
	
	display: grid;
	grid-templates-row:  1fr;
}

button{

width: 50%;
background-color: green;
   border: none;
   padding: 13px;
   font-size: 15px;
}

.remove{
	
	
	display: none;
}
#cancelbuttonpriceing{
	position: relative;
	left: 93%;
	top: 5%;
	cursor: pointer;
	background: gray;
	font-size:30px;
}



#pricing{
	
	
	position: absolute;
	top: 50%;
	left: 50%;
Transform: translate(-50%, -50%);
background: white;
border:1px solid #f1f1f1;
border-radius: 20px;
}
#offers{
	
	
	display: flex;
	flex-direction: row;
	width:100%;
	height: 208px;
	background: white;
	justify-content:center;
	
}

#monthly,#yearly{
	
	
	width:50%;
	height: 20vh;
	text-align:center;
	
}

#monthly:nth-child(n) {
	
	background:#f5f5f5d9;
   width: 70%;
 
	border-radius: 10px;
}
#yearly:nth-child(n){
	   width: 70%;

	
	background:#f5f5f5d9;
}

#BASIC,#POWER,#ELITES,#YBASIC,#YPOWER,#YELITES{
	
	background: green;
	padding:20px;
	border-radius:10px;
	width:80%;
	color:white;
	font-size: 20px;
	border:1px solid white;
	color:white;
	margin: auto;
	
}

#payment{
	
	
	display:flex;
    font-family:arial;
	flex-direction: column;
	justify-content:center;
}

#payment>h1{
	
	text-align:center;
}

#male, #female{
	display:flex;
}

input:not([type="submit"]):focus
{
	border-left:10px solid green; 
    outline:none;
}

select{
	
	width:50%;
}

:where(.button,a,input[type="submit" i]){
	background: #FFA41C;
	box-shadow: 0 5px 0 #e9961b;
	margin-bottom:5px;
}
a.navLink.Mainlink{margin-inline:2px;	background: #FFA41C;
}
:where(.button,input[type="submit" i],a):active{
	box-shadow: none;
	Transform: TranslateY(5px)
}