body,html{
	margin: 0;
	padding: 0;
	font-family: arial,sans-serif;
}
main{
	width: 1fr;
	display: grid;
	/*grid-template-rows: 50px 600px 270px 270px 170px 50px;*/
	grid-template-rows: 50px 650px auto auto 170px 50px;
	grid-template-columns: repeat(auto-fit, minmax(500px,1fr));
	grid-auto-rows: auto; 
	grid-column-gap: 10px;
}
.d2{
	background-color: #fff;
	color: #000;
	grid-column:1/-1;
}
.d2 img{
	width: 100%;
	height: 600px;
}
.d3, .d4{
	background-color: #0F89E1;
	box-shadow: 1px 1px 5px 1px #0F89E180;
	border-radius: 5px;
	width: 1fr;
	margin: 6px 15px;
}
.d4{
	background-color: #0aac99;
}

.d3 img, .d4 img{
	position: relative;
	width: 100px;
	height: 100px;
	top:-70px;
	margin-bottom: 0;
	box-shadow: 2px 4px 6px 1px #444;
	border-radius: 50px;
	padding: 0;
}
.d3 p, .d4 p{
	position: relative;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	padding: 5px;
	margin-top: 0px;
	top:-70px;
}
#stLrn,#stFind{
	top: -65px;
	position: relative;
	width: 180px;
}
.d5{
	background-color: #fff;
	color: #000;
	box-shadow: 1px 2px 4px 1px #888;
	grid-column:1/-1;
	background-image: linear-gradient(to bottom right, #ffb01f,#ffffff,#00e000);
	display: flex;
	margin-top: 10px;
}
.d5 img{
	width: 250px;
}
.d5 p{
	font-size: 1.5rem;
	font-weight: bold;
	padding: 30px;
	margin-top: 5px;
	color: #222;
}
.d5 p font{
	float: right;
	font-weight: bold;
	margin-bottom: 0;
}

@media only screen and (min-width : 731px) and (max-width : 1026px){
	main{
		grid-template-rows: 50px 530px 270px 270px auto 170px 50px;
		/*grid-template-columns: repeat(auto-fit, minmax(360px,1fr));*/
		grid-auto-rows: unset; 
		grid-column-gap: 10px;
	}
	.d2 img{
		height: 450px;
	}
	.d3,.d4{
		margin: 40px 0;
	}
}

@media only screen and (min-width : 580px) and (max-width : 730px){
	main{
		grid-template-rows: 50px 500px 270px 270px auto auto 50px;
		grid-template-columns: repeat(auto-fit, minmax(360px,1fr));
		grid-auto-rows: auto; 
		grid-column-gap: 10px;
	}
	.d2 img{
		height: 420px;
	}
	.d3,.d4{
		margin: 40px 0;
	}
}

@media only screen and (min-width : 100px) and (max-width : 579px){
	main{
		grid-template-rows: 50px 400px 220px 275px auto auto 50px;
		grid-template-columns: repeat(auto-fit, minmax(360px,1fr));
		grid-auto-rows: auto; 
		grid-column-gap: 10px;
	}
	.d2 img{
		height: 340px;
	}
	.d4{
		margin-top: 60px;
	}
	.d3 img, .d4 img{
		width: 80px;
		height: 80px;
		top:-50px;
	}
	.d3 p, .d4 p{
		font-size: 1.3rem;
		top:-40px;
	}
	#stLrn,#stFind{
		top: -40px;
	}
	.d5 img{
		width: 150px;
		margin: 0;
		padding: 0;
	}
	.d5 p{
		font-size: 1.2rem;
		font-weight: bold;
		padding: 5px;
		margin: 5px 0 0 0;
		color: #222;
	}
	.d5 p font{
		margin-bottom: 18px;
	}
}

/*@media only screen and (min-width : 320px) and (max-width : 479px){
	main{
		grid-template-rows: 50px 360px 220px 275px auto auto 50px;
		grid-template-columns: repeat(auto-fit, minmax(360px,1fr));
		grid-auto-rows: auto; 
		grid-column-gap: 10px;
	}
	.d2 img{
		height: 300px;
	}
}*/

/*------For height 1280px and width 1500px*/
@media only screen and (min-width : 1500px) and (min-height : 1280px){
	main{
		grid-template-rows: 1.2% 40% 15% 15% auto 500px 100px;
		grid-template-columns: 1fr;
		grid-auto-rows: unset; 
		grid-column-gap: unset;	
	}
	.d2 img{
		height: 90%;
	}
	.d3{
		width: 50%;
		height: fit-content;
		margin: 0 25%;
	}
	.d4{
		width: 50%;
		height: fit-content;
		margin: -1% 25%;
	}
	.d3 img, .d4 img{
		width: 150px;
		height: 150px;
		top:-100px;
		border-radius: 100px;
	}
	.d3 p, .d4 p{
		font-size: 2.3rem;
		top:-40px;
	}
	#stLrn,#stFind{
		top: -40px;
		font-size: 2rem;
		height: 80px;
		width: 250px;
	}
	.d5{
		display: inline-flex;
		margin-top: 0px;
	}
	.d5 img{
		width: 450px;
		margin: 0;
		padding: 0;
	}
	.d5 p{
		margin-top: 50px;
		line-height: 90px;
		margin-left: 18vw;
		margin-right: 0;
		padding: 0;
		width: 50%;
		font-size: 2.5rem;
	}
	.d5 p font{
		float: right;
		font-weight: bold;
		margin-bottom: 0;
	}
}

/*------For height 1280px and width 300px*/
@media only screen and (min-width : 300px) and (min-height : 1280px){
  main{
		grid-template-rows: 1.2% 40% 15% 15% auto 350px 100px;
	}
}