body {
	background-color: #fefdeb;
}
:link {
	color: #000080;

}
:visited {
	color: #800000;

}
span.c3 {
	font-family: Verdana, sans-serif;
	font-weight: normal;
	text-decoration: underline;

}
audio.c2 {
	height: 100px;
	width: 90vw;

}
span.c1 {
	font-family: Verdana, sans-serif;

}
#front {
align: middle;
}


@media (min-width:481px) {


#logo {
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
	height: 87.75px;
	width: 25%;
	text-decoration: none;
	}

#front {
	box-shadow: 10px 10px 15px grey;
	width: 90vw;
	}
	#front1 {
	box-shadow: 10px 10px 15px grey;
	width: 90vw;
	}

#musaks {
	width 800px;
	}

div {
	/*
	margin: 0 auto!important;
	max-width: 728px !important;
	width: 100% !important;
	*/
	font-size:4vw;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	}

body {
	background-color: #fefdeb;
	}

	#essay {
	text-align: center;
	font-size: 18px;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	}
	body {
		background-color: #fefdeb;
	}
	:link { color: #000080 }
	:visited { color: #800000 }
	p {font-family: Verdana, sans-serif; font-weight: normal; }
	audio.c2 {height: 100px; width: 90vw;}
	span.c1 {font-family: Verdana, sans-serif}
	*{
		box-sizing: border-box;
	}
	/* Create two equal columns that floats next to each other */
	.column {
		float: left;
		width: 50%;
		padding: 5px;
		font-size: 30px;
		font-family: Verdana, sans-serif;
		p {
			text-indent: 50px;
			margin-bottom: -5px;
			text-align: justify;
			text-justify: inter-word;
		}
		/*height: 500px; Should be removed. Only for demonstration */
	}

	/* Clear floats after the columns */
	.row:after {
		content: "";
		display: table;
		clear: both;

	}
	.row {
		max-width: 1080px;
	}
	#front2{
	box-shadow: 10px 10px 15px grey;
	max-width: 600px;
	max-height: 800px;
	align: middle;
	}

}

/*.......................SEPARATION BOUNDARY.........................*/
@media (min-width:1080px) {


	#logo {
	background-position: center center;
	background-repeat: no-repeat;
	align: left;
	display: block;
	width: 772.8px;
	height: 87.75px;
	text-decoration: none;
	}

	#front {
	box-shadow: 10px 10px 15px grey;
	width: 50%;
	max-width: 720px;
	align: middle;
	}
	#front1 {
	box-shadow: 10px 10px 15px grey;
	width: 70%;
	max-width: 720px;
	align: middle;
	}

	#musaks {
	width: 40%;
	}

	div {
		/*
		 * margin: 0 auto!important;
		 * max-width: 728px !important;
		 * width: 100% !important;
		 */
		font-size:20px;
		overflow-wrap: break-word;
		-webkit-font-smoothing: antialiased;
	}

	body {
		background-color: #fefdeb;
	}
	#essay {
	text-align: center;
	font-size: 20px;
	max-width:780px;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	}

	body {
		background-color: #fefdeb;
	}
	:link { color: #000080 }
	:visited { color: #800000 }
	p {font-family: Verdana, sans-serif; font-weight: normal; }
	audio.c2 {height: 100px; width: 90vw;}
	span.c1 {font-family: Verdana, sans-serif}
	*{
		box-sizing: border-box;
	}
	/* Create two equal columns that floats next to each other */
	.column {
		float: left;
		width: 50%;
		padding: 5px;
		font-size: 16px;
		font-family: Verdana, sans-serif;
		p {
			text-indent: 50px;
			margin-bottom: -5px;
			text-align: justify;
			text-justify: inter-word;
		}
		/*height: 500px; Should be removed. Only for demonstration */
	}

	/* Clear floats after the columns */
	.row:after {
		content: "";
		display: table;
		clear: both;

	}
	.row {
		max-width: 1080px;
		}
	#front2{
	box-shadow: 10px 10px 15px grey;
	max-width: 400px;
	max-height: 600px;
	align: middle;
	}