body,html{
  margin: 0;
  padding: 0;
  font-family: arial,sans-serif;
}
main{
  width: 1fr;
  height: 100vh;
  display: grid;
  grid-template-rows: 50px auto 170px 50px;
  grid-auto-rows: auto; 
  grid-column-gap: 10px;
}
#frm{
	padding-top: 20px;
	display: inline-block;
	background: #f5deb3;
	margin-top: 30px;
	width: 35%;
	height: auto;
	border-radius: 5px;
}
#umail{
	margin-top: 8px;
	margin-bottom: 8px;
	width: 75%;
	height: 35px;
	color: #444;
	font-size: 1rem;
	padding: 0 10px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 551px) and (max-width : 900px) {
	main{
		grid-template-rows: 50px auto auto auto;
	}
	#frm{
		width: 60%;
	}
}

@media only screen and (max-width : 550px) {
	main{
		grid-template-rows: 50px auto auto auto;
	}
	#frm{
		width: 320px;
	}
}

/*------For height 1280px and width 1500px*/
@media only screen and (min-width : 1500px) and (min-height : 1280px){
  	main{
    	grid-template-rows: 2% auto 500px 100px;
  	}
}