@font-face{
	font-family: Vazir;
	src: url('../fonts/Vazirmatn-Regular.woff2');
}
@font-face{
	font-family: Vazir;
	font-weight: bold;
	src: url('../fonts/Vazirmatn-Bold.woff2');
}
*{
	box-sizing: border-box;
}
a{
	text-decoration: none;
}
a:hover{
	color: darkred;
}
html{
	font-size: 16px;
	direction: rtl;
}
body{
	font-family: Vazir, Tahoma; 
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
p{
	line-height: 2rem;
}
#container{
	box-shadow: 5px 5px 1px rgba(0,0,255,0.3);
}
h1{

}
.footer{
	font-family: Courier New; 
	font-weight: bold; 
	direction: ltr; 
	letter-spacing: 7px; 
	text-align: center;
}
p{
	text-align: justify; 
}
.cover{
	background-image: url('images/gallery/large/img2.jpg');
	background-size: cover;
	background-attachment: fixed;
}

#btn{
	width: 100px;
	height: 100px;
	background-image: url(../images/btn.png);
}
#btn:hover{
	background-position: top right;
}
#btn2{
	width: 42px;
	height: 42px;
	background-image: url('../images/x.png');
	background-position: -720px -40px;
}
#btn2:hover{
	background-position: -720px 0px;
}
#ribbon{
	background-image: url('../images/bctop.gif');
	background-repeat: repeat-x;
	height: 24px;
}
h1{

}


/* Website Structure */
main{
	display: grid;
	grid-template-columns: 200px auto;
	grid-template-rows: 200px auto 130px;
	gap: 10px;
	grid-template-areas: 
	'header header'
	'aside article'
	'footer footer'
	;

	border: 10px solid black;
	width: 950px;
	background-color: white;
	margin: 0 auto;
	padding: 10px;
	border-image: url(../images/border.png) 30 stretch;
	background-clip: padding-box;
}
header{
	grid-area: header;
	border: 1px solid black;

}
aside{
	grid-area: aside;
	border: 1px solid black;
}
article{
	padding: 10px;
	grid-area: article;
	border: 1px solid black;
}
footer{
	grid-area: footer;
	border: 1px solid black;
}

#ads{
	position: fixed;
	left: 0px;
	bottom: 0px;
	z-index: 3;

}

#main_menu{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
/*	display: none;*/
}

#main_menu li{
	margin: 2px;
}
#main_menu li a{
	background-color: #333652;
	color: #FAD02C;
	display: block;
	width: 100%;
	height: 100%;
	padding: 7px;
	border-right: 7px solid transparent;
}
#main_menu li a:hover{
	background-color: #FAD02C;
	color: #333652;
	border-right: 7px solid  #333652;
}


#gallery{
	text-align: center;
}
#gallery img{
	object-fit: cover;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 10px;
	transition: 0.3s;
	border: 3px solid white;
	box-shadow: 0px 0px 3px silver;
}
#gallery img:hover{
	transform: scale(1.2);
}
#logo{
	animation: logoPlay 3s;
}
@keyframes logoPlay{
	from{
		opacity: 0;
		transform: translate(-300px);
	}
	to{
		opacity: 1;
		transform: translate(0px);

	}
}

#ball{
	background-image: url(../images/ball.jpg);
	background-size: 300px auto;
	width: 100px;
	height: 100px;
	border: 1px solid silver;
	border-radius: 50%;
	position: fixed;
	bottom: 120%;
	left: 50%;
	margin-left: -50px;
	animation: ballPlay 7s linear forwards;
}
@keyframes ballPlay{
	10%{
		bottom: 0px;
	}
	17%{
		bottom: 400px;
	}
	22%{
		bottom: 0px;
	}
	26%{
		bottom: 200px;
	}
	30%{
		bottom: 0px;
	}
	100%{
		left: 120%;
		transform: rotate(3000deg);
		bottom: 0px;
	}
}


@media screen and (max-width: 1024px){
	main{
		width: 100%;
		
	}

}
@media screen and (max-width: 500px){
	main{
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-template-areas: 
		'header'
		'aside'
		'article'
		'footer'
		;
	}
	#logo{
		width: 100%;
	}
}



.mt-6 {
  margin-top: 4rem !important;
}