html, body {
	animation:fade-in ease 2s;
	margin:0 auto;
	height:100%;
	font-family: Helvetica, Arial, sans-serrif;
	background-image: url(../images/crumpled\ paper.jpeg); 
	/* Center and scale the image */
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
	
@keyframes fade-in {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

#fortuneteller {
	display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#wrapper {
	/* animation:fade-in ease 2s;*/
	margin:0 auto;
	height:100%;
	max-width:100%;
	width:60%;
}

#nav {
	animation:fade-in ease 3s;
	width:100%;
	height:80px;
	text-align:center;
}

#content {
	animation:fade-in ease 5s;
	width:100%;
	background-color:#ffffff;
}

img {
	width:900px;
	height:auto;
	display:block;
	position:center;
}

h1 {
	font-size:50px;
	color:#8c0606;
	position:left;
}

h2 {
	font-size:35px;
	color:#8c0606;
	position:left;
}

h3 {
	font-size:60px;
	color:#8c0606;
	text-align: center;
}

p {
	font-size:18px;
	margin: 2px;;
	text-align:left;
	color:#8c0606;
}

a {
	font-size:16px;
	font-weight:bold;
	display:inline-block;
	width:29%;
	padding:5px;
	margin-top:15px;
	border-radius:8px;
	text-align:center;
	text-decoration:none;
}

a:link, a:visited {
	color:#8c0606;
	text-decoration:none;
}

a:active, a:hover {
	color:#7797cd;
	text-decoration:underline;
}
#nav a:link, #nav a:visited {
	font-size:25px;
}

#grid-container {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
flex: 50%;
padding: 0 4px;
}

#grid-item {
	max-width:100%;
	width:00px;
	height: auto;
	display: flex;
  	flex-wrap: wrap;
  	padding: 0 4px;
}