body
{
    font-family:  Comic Sans MS;
    
}
html,body{
	margin: 0;
}

.topnav{
	background-color:#000000;
	overflow: hidden;
	
		}

.topnav a{
	float: left;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}
.topnav a:hover{
	background-color: red;
	color: blue;
}
.topnav a.active{
	background-color: yellow;
	color: Blue;
}

.bottom
{
 background-color: #EBE1FF;
 position:fixed;
 bottom:0;
 left: 0;
 width:100%;
 text-align:center;
 color:#FFFFFF;
}

.grid-container
{
display: grid;
grid-template-columns: auto ;
}

.grid-item
{
border-style: double;
border:2px solid rgba(0,0,6,0);
text-align:justify;
color:black;
padding:10px;
text-align: center;

}
.grid-item:hover{
	background-color: red;
}

#heading{
	color:rgb(255, 0, 0);
	text-shadow: 2px 2px yellow;
	text-align:center;
	text-transform:uppercase;
}

#paradiv{
	width:22%;
	margin-left:36%;
	background-color:#3b5998;
	color:white;
	border-top-left-radius:30px;
	border-top-right-radius:30px;
	border-bottom-left-radius:30px;
	border-bottom-right-radius:30px;
	padding: 1% 1%;
	padding-right: 2%;
	padding-left: 2%;
}

#para{
	text-align:justify;
	width:100px;
}

h3{
	text-align: center;
}

figure,figcaption{
	text-align: center;
}

.container{
	padding-left: 3%;
	padding-right: 3%;
}

h1{
    color: red;
}

h2{
	color: blue;
}