#main::before{
	
	background: rgb(50,50,50);
	background: linear-gradient(55deg, rgba(50,50,50,0) 0%, rgba(28,90,115,1) 47%, rgba(50,50,50,0) 73%);

}
#main > div {
	display:flex;
	justify-content:center;
	width:100%;

}

#contact_us_container{
	width: min(60ch, 100%);
	
	margin-top: 0.5rem;
	font-size: 0.7rem;
	overflow: hidden;
}
#contact_form > h1{
	display:block;
	text-align:left;
	font-size: 1rem;
	margin:0;
	margin-bottom: 1rem;
	padding:0;
	color: white;
	/*
	margin-left: 1rem;
	margin-right: 1rem;
	padding: 2rem 1rem 0.5rem;
	
	border-radius: 0.5rem 90% 0 1rem;
	
	box-shadow: 0 0 20px 0px rgba(255,255,255, 0.1); 
	
	box-shadow: 0 0 20px 0px rgba(20,20,20, 0.2) inset; 
	*/
}
#contact_form{
	padding: 2rem;
	border-radius: 1rem;
	background-color: rgba(220,220,220, 0.3);
	color: rgb(211, 199, 212);
	font-size: 0.7rem;
	/* caret-color: white; */
}
#contact_form :is(input, textarea, select){
	display:block;
	width:100%;
	padding: 0.3rem;
	padding-top: 0.5rem;
	margin-bottom: 1rem;
	margin-top: 0.5rem;
	border: 1px solid rgba(255,255,255, 0.3);
	border-radius: 0.25rem;
	
	background-color: rgba(255,255,255, 0.2);
	color: black;
	box-shadow: 0 0 20px 0px rgba(255,255,255, 0.2) inset;
	transition:  background-color 0.5s;
	
	font-size: inherit;
}
#contact_form :is(input, textarea)::selection{
	background: white;
}
#contact_form :is(input, textarea, select):focus{
	outline: 1px solid rgb(85, 140, 166);
	outline-offset: -2px;
	background-color: rgba(255,255,255, 0.3);
}
#contact_form :is(input, textarea):focus{
	color: black;
}
#contact_form :is(input, textarea, select)::placeholder{
	color: rgb(200,200,200);
}
#contact_form select {
	color: rgb(240,240,240);
	padding: 0.3rem;
	margin-bottom: 0.1rem;
	cursor: pointer;
}
#contact_form select > option{
	color: black;
	background-color: rgb(184, 211, 222);
	cursor: pointer;
}
#contact_form select > option:focus{
	background-color: rgba(255,255,255, 0.4);
}
#contact_form label{
	user-select: none;
}
#contact_form > #contact_form_submit_btn{
	color: white;
	background-color: rgba(181, 232, 247, 0.2);
	cursor: pointer;
	transition: background-color 0s;
	margin-bottom:0;
	font-weight: bold;
}
#contact_form > #contact_form_submit_btn:hover{
	background-color: rgba(181, 232, 247, 0.2);
	background-color: rgba(107, 211, 242, 0.2);
}
#contact_form > #contact_form_submit_btn:active{
	background-color: rgba(107, 211, 242, 0);
	color: rgb(180,180,180);
}
/* ------- */
#contact_guide{
	font-size: 0.7rem;
	line-height: 0.8rem;
	color: black;
	margin-bottom: 0.5rem;
	min-height: 3.5rem;
}
#contact_guide > p{
	display:none;
	padding:0.5rem;
	margin:0;
	color: rgb(64, 12, 77);
	
	background-color: rgba(255, 241, 227, 0.4);
	background-color: rgba(240, 240, 240, 1);
	border-radius: 0.5rem;
	user-select:none;
}

#category[data-category-value="GENERAL"] ~ #contact_guide :nth-child(1){
	display:block;
}
#category[data-category-value="FEEDBACK"] ~ #contact_guide :nth-child(2){
	display:block;
}
#category[data-category-value="BUG REPORT"] ~ #contact_guide :nth-child(3){
	display:block;
}

#form_status{
	padding:0.5rem;
	margin:0;
	color: rgb(64, 12, 77);
	
	background-color: rgba(255, 241, 227, 0.4);
	background-color: rgba(240, 240, 240, 1);
	border-radius: 0.5rem;
	text-align: center;
}
#form_status:empty{
	display:none;
}
/*==*/
/* it's a ... */
#contact_form :is(input:nth-of-type(1), label:nth-of-type(1)){
	position: absolute;
	bottom:0px;
	left:0px;
	width: 5ch;
	transform: translateY(200%);
}
/*==*/

@media screen and (max-height: 768px) and (orientation: landscape),
only screen /* ipad & ipad pro */
  and (min-width: 700px) 
  and (max-width: 1366px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) 

{
	#contact_us_container {
		width:100%;
	}
	#contact_form :is(input, textarea, select) {
		font-size: 1.2rem;
	}
}