<!DOCTYPE html>
<html>

<head>
<title> Homepage </title>

<style type=text/css>

body,html
{
	height:100%;
	padding:0;
	margin:0;
}

#body
{
	height:100%;
	width:100%;
	font-family: Times New Roman; Serif;
	font-size:large, small;
	color:black;
	background-image:url("images/moth.jpg");
	background-size: cover; 
	background-position: center;
	overflow-y:scroll;
	display: flex;
	justify-content: center;
   	align-items: center;
}

div.a
{
	font-family: Times New Roman; Serif;
	font-size:1.5em;
	color: #57212D;
	<!-- background-color: #FFFDD0; -->
	background-color: rgba(255, 253, 192, 0.8);
	margin: auto;
	border: ;
	padding: 20px;
	<!-- box-shadow: 6px 6px #57212D; -->
	border-radius: ;
	opacity: 1;
	display: flex;

}

div.a a 
{
	color: #57212D;
	text-decoration: none;
}

div.a a:hover
{
	color: #486c87;
	text-decoration: underline;
}

</style>
</head>

<body>
<div id="body" align="left">

<div class="a">

<em>
<p> <a href= "veranda.html"> veranda </a> </p>
<p> <a href= "diary.html"> diary </a> </p>
<p> <a href= "mishmash.html"> mishmash </a> </p>
</em>


</div>

<footer>
</footer>

</div>
</body>

</html>