/**For main page**/
body {
	animation-name: sigma;
	animation-duration: 4s;
	animation-iteration-count: 1;
	background-color: gray;
}
@keyframes sigma {
	0% {background-color: gray;}
	25% {background-color: green;}
	50% {background-color: blue;}
	75% {background-color: purple;}
	100% {background-color: gray; }
}
#title{
	font-size: 25px;
	font-family: verdana;
	background-color: black;
	bottom: 455px;
	right: 410px;
	border-radius: 40%;
	border: 2px black solid;
	position: absolute;
	padding: 90px;
	padding-bottom: 5px; 
	padding-top: 5px;
	padding-left: 2.5px;
	padding-right: 2.5px;
	justify-content: center;
	color: grey;
}
/**Animation**/
#title:hover {
	animation-name: hover;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
@keyframes hover {
	0% {color: gray;}
	25% {color: red;}
	50% {color: orange;}
	75% {color: yellow;}
	100% {color: red; }
}
/**End of animation**/
#nav{
	overflow: hidden;
	background-color: #333;
}
#nav a{
	margin-top: 0%;
	float: left;
	color: #f2f2f2;
	text-align: center;
	padding: 20px 80px;
	font-family: verdana;
	text-decoration: none;
	font-size: 17px;
}
#nav a:hover{
	background-color: pink;
	color: black;
}
#nav a.active{
	background-color: #04AA6D;
	color: white;
}
#p1{
	font-family: verdana;
	right: 600px;
	bottom: 300px;
	background-color: orange;
	border: 2px solid black;
	border-radius: 40%;
	position: absolute;
	padding: 50px;
	padding-bottom: 50px; 
	padding-top: 50px;
	padding-left: 50px;
	padding-right: 50px;
	justify-content: center;
}
#p2{
	font-size: 7px;
	margin-left: 15%;
	margin-right: 15%;
	background-color: black;
	color: white;
	font-family: verdana;
	text-align: center;
	border: 2px black solid;
	padding: 2px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 3x;
	padding-left: px;
}
/**Moving Picture**/
#banner {
	width: 100%;
	height: 300px;
	overflow: visible;
	background: url(image30.jpg) repeat;
	animation-name: animate-background;
	animation: animate-background linear 15s infinite;
}
@keyframes animate-background {
	from {background-position: 0px 0px}
	to {background-position: 300px 0px}
}
/**Poving Micture**/
/**Hover**/
#au:hover{
	animation-name: hover;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
/**For About Us Page**/
#as{
	background-color: gray;
}
#bs{
	padding: 8px 15px;
	margin-top: 2.5%;
	margin-left: 25%;
	margin-right: 25%;
	border: 2px black solid;
	font-family: verdana; 
	text-align: center;
	font-size: 60px;
	background-color: pink;
}
#cs{
	margin-right: 15%;
	margin-left: 15%;
	border-radius: 25%;
	background-color: black;
	padding: 80px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 25px;
	padding-bottom: 25px;
	text-align: center;
	font-size: 20px;
	font-family: verdana;
	color: pink;
}
#thing{
	text-align: center;
	font-family: verdana;
	font-size: 25px;
}
#desc{
	font-family: verdana;
	text-align: center;
}
#ds{
	margin-left: 25%;
	margin-right: 25%;
	text-align: center;
	font-family: verdana;
	font-size: 45px;
	padding: 15px 15px;
	border: 2px black solid;
	background-color: pink;
	border-radius: 20%;
}
/**For the Services Page**/
#free:hover {
	box-shadow: 12px 12px 12px black, -10px -10px 10px white;
}
#supporter:hover {
	box-shadow: 12px 12px 12px black, -10px -10px 10px white;
}
#premium:hover {
	box-shadow: 12px 12px 12px black inset, -10px -10px 10px white inset;
}
#Ω-premium:hover {
	box-shadow: 12px 12px 12px black inset, -10px -10px 10px white inset;
}
#one{
	text-align: center;
	font-family: verdana;
	font-size: 20px;
}
#onee{
	display: flex;
	justify-content: center;
	margin-top: 40px;
	margin-right: 35px;
}
#two{
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
	margin-right: 40px;
}
#free {
	outline-style: groove;
	position: absolute;
	border: 2px black solid;
	border-radius: 20%;
	margin-left: 5%;
	width: 20%;
	height: 450px;
	background-color: #E8E8E8;
}
#supporter {
	outline-style: groove;
	position: absolute;
	border: 2px black solid;
	border-radius: 20%;
	margin-left: 27%;
	width: 20%;
	height: 450px;
	background-color: #E8E8E8;
}
#premium {
	outline-style: groove;
	position: absolute;
	border: 2px black solid;
	border-radius: 20%;
	margin-left: 50%;
	width: 20%;
	height: 450px;
	background-color: #E8E8E8;
}
#Ω-premium {
	outline-style: groove;
	position: absolute;
	border: 2px black solid;
	border-radius: 20%;
	margin-left: 73%;
	width: 20%;
	height: 450px;
	z-index: 0;
	background-color: #E8E8E8;
}
#pre{
	margin-left: 25%;
	margin-right: 25%;
	border: 2px black solid;
	font-family: verdana; 
	text-align: center;
	font-size: 60px;
	background-color: pink;
}
#sec{
	margin-right: 15%;
	margin-left: 15%;
	border-radius: 25%;
	background-color: black;
	padding: 80px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 25px;
	padding-bottom: 25px;
	text-align: center;
	font-size: 20px;
	font-family: verdana;
	color: white;
}
/**End of Services Page**/