body{
	background-color:#BAB991;
}
.navigation{
	display:flex;
	background-color:#0F3D33;
	color:white;
	width:100%;
	position:sticky;
	top:0;
	height:80px;
	z-index:10;
}
.nav{

}
.n-name{
	
	margin-left:530px;
	text-shadow:2px 2px 10px #7FFFD4;
	
}

.image{
	background-image:url("https://s7ap1.scene7.com/is/image/incredibleindia/national-gallery-of-modern-art-mumbai-maharashtra-2-attr-hero?qlt=82&ts=1742163298634");
	background-repeat:no-repeat;
	background-position:center;
	height:500px;
	width:90%;
	margin-left:50px;
	grid-area:image;
	opacity:0.9;
	
}
.image:hover{
	border:4px solid #1D6A5A;
}
.head{
	margin-top:140px;
	margin-left:px;
	font-size:70px;
	color:;
	text-shadow:5px 5px 10px black;
}
.text{
	font-size:30px;
	margin-left:px;
	color:white;
}
.container{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	grid-template-rows:120px 550px 500px 440px 440px 650px 100px;
	grid-template-areas:"navbar navbar navbar navbar"
						"image image image image"
						"sidebar sidebar top-con top-con"
						"art1 art2 art3 art4"
						"art5 art6 art7 art8"
						"click see see see"
						"footer footer footer footer";
						
	gap:15px;
}
	nav{background-color:blue; 
		grid-area:navbar;
			height:60px;
			}
	.side{background-color:; 
		grid-area:sidebar;
		position:relative;
		height:450px;
		box-shadow:5px 5px 15px black;
			}
.img{
	height:450px;
	width:100%;
}
video{
	position:absolute;
	top:36px;
	left:2px;
	height:370px;
	opacity:0;
}
video:hover{
	opacity:1;
}
.top-con{background-color:#133A32; 
		grid-area:top-con;
		height:450px;
		box-shadow:5px 5px 15px black;
}
.top-con:hover{
	background-image:url("https://cdn.pixabay.com/photo/2017/02/14/08/15/desktop-2065280_1280.png");
	background-position:center;
	background-repeat:no-repeat;
	border:3px solid #E8D2A8;
	
}
.im-sh{
	height:100px;
	width:100px;
	float:left;
	margin-top:15px;
	margin-left:10px;
}
.im-sh:hover{
	border:3px solid #C8FF7A;
}
.tex{
	margin-left:10px;
	float:left;
	margin-top:15px;
	margin-bottom:5px;
	font-size:18px;
}
audio{
	height:40px;
	width:140px;
	float:left;
	margin-top:15px;
	margin-left:10px;
	border:2px solid black;
	border-radius:50pc;
}
.facts{
	font-size:30px;
	margin-left:200px;
	color:#7FFFD4;
	text-shadow:0 0 15px black;
}
.con1{
		
		background-color:#E8D2A8;
		height:130px;
		width:43%;
		float:left;
		margin-left:30px;
		margin-top:20px;
		box-shadow:5px 5px 20px black;
}
.con1:hover{
	box-shadow:5px 5px 15px #7FFFD4;
	transition:all 0.4s ease;
}

.cap{
	padding-left:10px;
}
			
main{
	grid-area:main;
}
.arts{
	display	
}
.art1{
	background-color:#DCCDB8;
	grid-area:art1;
	height:420px;
	width:320px;
	box-shadow:10px 10px 25px #133A32;
}
.art1:hover{
	box-shadow:none;
	border:3px solid #133A32; 
	transition:all 1s ease;
}
.art2{
	background-color:#DCCDB8;
	height:420px;
	width:320px;
	box-shadow:10px 10px 25px #133A32;
}
.art2:hover{
	box-shadow:none;
	border:3px solid #133A32; 
	transition:all 1s ease;
}
.art3{
	background-color:#DCCDB8;
	grid-area:art3;
	height:420px;
	width:320px;
	box-shadow:10px 10px 25px #133A32;
}
.art3:hover{
	box-shadow:none;
	border:3px solid #133A32; 
	transition:all 1s ease;
}
.art4{
	background-color:#DCCDB8;
	grid-area:art4;
	height:420px;
	width:320px;
	box-shadow:10px 10px 25px #133A32;
}
.art4:hover{
	box-shadow:none;
	border:3px solid #133A32; 
	transition:all 1s ease;
}
.art5{
	background-color:#DCCDB8;
	grid-area:art5;
	height:420px;
	width:320px;
	box-shadow:10px 10px 25px #133A32;
}
.art5:hover{
	box-shadow:none;
	border:3px solid #133A32; 
	transition:all 1s ease;
}
.art6{
	background-color:#DCCDB8;
	grid-area:art6;
	height:420px;
	width:320px;
	box-shadow:10px 10px 25px #133A32;
}
.art6:hover{
	box-shadow:none;
	border:3px solid #133A32; 
	transition:all 1s ease;
}
.art7{
	background-color:#DCCDB8;
	grid-area:art7;
	height:420px;
	width:320px;
	box-shadow:10px 10px 25px #133A32;
}
.art7:hover{
	box-shadow:none;
	border:3px solid #133A32; 
	transition:all 1s ease;
}
.art8{
	background-color:#DCCDB8;
	grid-area:art8;
	height:420px;
	width:320px;
	box-shadow:10px 10px 25px #133A32;

}
.art8:hover{
	box-shadow:none;
	border:3px solid #133A32; 
	transition:all 1s ease;
}
.pic{
	height:280px;
	width:300px;
	padding-left:10px;
	padding-top:10px;
}
.pic:hover{
	height:285px;
	width:305px;
}

.click{
	grid-area:click;
	background-color:#1D6A5A;
}
.back{
	height:120px;
	width:250px;
	background-color:#73C6B6;
	margin-top:10px;
	margin-left:30px;
}
.emoji{
	height:80px;
	width:200px;
	margin:0px 5px 0px 20px;
}
.back:hover{
	box-shadow:5px 5px 15px #7FFFD4;
	transition:all 0.4s ease;
}
.see{
	grid-area:see;
	background-color:#1D6A5A;
	
}
.artist1{
	display:flex;
	justify-content:space-evenly;
	margin-top:50px;
}
.info{
	background-color:#73C6B6;
	height:210px;
	width:44%;
	
}
.info:hover{
	box-shadow:5px 5px 15px #7FFFD4;
	transition:all 0.4s ease;
}
.info-1{
	background-color:#73C6B6;
	height:210px;
	width:44%;
}
.info-1:hover{
	box-shadow:5px 5px 15px #7FFFD4;
	transition:all 0.4s ease;
}
.artist2{
	display:flex;
	justify-content:space-evenly;
	margin-top:60px;
}
.info-2{
	background-color:#73C6B6;
	height:210px;
	width:44%;
	
}
.info-2:hover{
	box-shadow:5px 5px 15px #7FFFD4;
	transition:all 0.4s ease;
}
.info-3{
	background-color:#73C6B6;
	height:210px;
	width:44%;
	
}
.info-3:hover{
	box-shadow:5px 5px 15px #7FFFD4;
	transition:all 0.4s ease;
}
h2{
	font-size:18px;
	margin-bottom: 8px;
  color:#095859;
  margin-left:130px;
}
.im-info{
	display:flex;
	justify-content:space-evenly;
}
.photo{
	height:150px;
	width:100px;
	margin-right:15px;
	margin-left:10px;
}
/* Art card layout */
.logo{
	font-size:25px;
	margin-left:15px;
	margin-top:20px;
}	
.line{
	font-size:20px;
	margin-left:55px;
	margin-top:20px;
}
footer{
	background-color:#3C4A21;
	grid-area:footer;
	display:flex;
	color:white;
	margin-top:20px;
}