body{
	background-color: rgb(60, 22, 66);
	background-image: url('../image/cats.png');
	color: rgb(175, 252, 65);
	font-family: courier;
}
a{
	font-weight: bold;
	text-decoration: none;
}
#main img{
	height: 160px;
}
img:hover{
    transition: transform .2s;
    transform: scale(1.5);
}
h2{
	color: rgb(178, 255, 158);
}

#header, #footer{
	text-align: center;
	color: rgb(178, 255, 158);
	background-color: #56465f;
	padding:10px;
}
#nav{
	background-color: rgb(8, 99, 117, 0.75);
	color: white;
	font-weight: bold;
}
.nav-btn{
	background-color: rgb(178, 255, 158);
	border: 5px outset rgb(29, 211, 176);
    padding: 7px;
	text-align: center;
}
.nav-btn:hover{
	border: 5px inset rgb(178, 255, 158);
	background-color: rgb(8, 99, 117);
	color: rgb(178, 255, 158);
}
.nav-btn:active{
	background-color: rgb(60, 22, 66);
}

#nav{
	background-color: rgba(8, 99, 117, 0.75);
}

#main{
	background-color: rgb(0,0,0);
	padding: 5%;
}

#header{grid-area:top;}
#nav{grid-area: right;}
#main{grid-area: left;}
#footer{grid-area:bottom;}

/*for landscape tablet and bigger*/
@media only screen and (min-width: 768px){
	#container{
		display: grid;
		grid-template-areas: 
			'top top top'
			'right left left'
			'bottom bottom bottom';
	}
	#main{
		display: grid;
	}
	#nav{
		display: flex;
		flex-direction: column;
	}
}