@media only screen and (max-width: 600px) {

.sample{
width: 340px;
height: 200px;
padding: 10px;
margin-left: 1px;
margin-right: 1px;
background-color: rgb(187, 233, 166);
border: 5px solid #85320e;
text-align: center;
}

.purple{
	width: 340px;
	height: auto;
	background-color: rgb(106, 28, 239);
	color: rgb(0, 0, 0);
	border-radius: 25px;
	padding: 20px;
	font-size: 24px;
}


.blue{
	width: 340px;
	height: auto;
	background-color: rgb(107, 165, 231);
	color: rgb(0, 0, 0);
	border-radius: 25px;
	padding: 20px;
	text-align: center;
	justify-content: center;
}


.green{
	width: 340px;
	height: auto;
	text-align: center;
	background-color: rgb(21, 234, 17);
	color: azure;
	border-radius: 25px;

}

.orange {
	width: 300px;
	padding-left: 20px;
	margin-left: 20px;
	padding-right: 20px;
	margin-right: 20px;
	height: auto;
	background-color: rgb(216, 144, 131);
	text-align: center;
	color: #fafafa;
	border-radius: 1px solid #00ff00;

}

.gray {
	width: 340px;
	height: auto;
	background-color: rgb(55, 59, 59);
	text-align: center;
	color: #eaff00;
	padding: 15px;

}
}