@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Display:wght@800&family=Spartan:wght@300&display=swap');

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f8f8f8; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccc; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ddd; 
}
body{
background: #000;

	
}

.bg0{
	width:100%;
	height: 100vh;
	left:0px;
	top:0px;
	position: fixed;
	z-index: 2;
	background: url(img/bg4.jpg) bottom center no-repeat fixed;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity: 0.6;

}
.bg1{
	width:100%;
	height: 100vh;
	position: fixed;
	z-index: 3;
	left:0px;
	top:0px;
background: rgb(40,40,40);
background: -moz-linear-gradient(201deg, rgba(40,40,40,1) 10%, rgba(74,0,0,1) 55%, rgba(0,0,0,1) 88%) fixed; 
background: -webkit-linear-gradient(201deg, rgba(40,40,40,1) 10%, rgba(74,0,0,1) 55%, rgba(0,0,0,1) 88%) fixed;
background: linear-gradient(201deg, rgba(40,40,40,1) 10%, rgba(74,0,0,1) 55%, rgba(0,0,0,1) 88%) fixed;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#282828",endColorstr="#000000",GradientType=1);
			-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity: 0.4;
}
.bg2{
	width:100%;
	height: 100vh;
	position: fixed;
	z-index: 1;
	left:0px;
	top:0px;
background: rgb(40,40,40);
background: -moz-linear-gradient(201deg, rgba(40,40,40,1) 10%, rgba(74,0,0,1) 55%, rgba(0,0,0,1) 88%) fixed; 
background: -webkit-linear-gradient(201deg, rgba(40,40,40,1) 10%, rgba(74,0,0,1) 55%, rgba(0,0,0,1) 88%) fixed;
background: linear-gradient(201deg, rgba(40,40,40,1) 10%, rgba(74,0,0,1) 55%, rgba(0,0,0,1) 88%) fixed;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#282828",endColorstr="#000000",GradientType=1);
			-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity: 0.4;
}
.name{
	width:100%;
	position: relative;
	top:40vh;
	font-size:120px;
	color:#fff;
	font-weight: bold;
	font-family: 'Spartan', sans-serif;
	text-transform: uppercase;
	text-align: center;
	z-index: 10;
	letter-spacing: 20px;
	animation: m1 5s ease-in infinite;
}
@keyframes m1 {
	0% {filter: blur(20px);}
	50% {filter: blur(0px);}
  100% {filter: blur(20px);}
}
.name2{
	width:100%;
	position: relative;
	top:40vh;
	font-size:50px;
	color:#fff;
	font-weight: bold;
	font-family: 'Spartan', sans-serif;
	text-transform: uppercase;
	text-align: center;
	z-index: 10;
	letter-spacing: 30px;
	opacity: 0.5;
}
.name3{
	width:100%;
	position: relative;
	top:45vh;
	font-size:13px;
	color:#fff;
	font-weight: bold;
	font-family: 'Spartan', sans-serif;
	text-transform: uppercase;
	text-align: center;
	z-index: 10;
	letter-spacing: 20px;
	opacity: 0.5;
}
.social{
	width:300px;
	height: 50px;
	position: relative;
	z-index: 10;
	top:42vh;
	left:0px;
	right:0px;
	margin: 0 auto;
}

.s1{
	width:40px;
	height: 40px;
	position: relative;
	float: left;
	margin-left: 10px;
	background: url(img/social.png)0px 0px;
	cursor: pointer;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}
.s1:hover{
	opacity: 0.5;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}

.s2{
	width:40px;
	height: 40px;
	position: relative;
	float: left;
	margin-left: 10px;
	background: url(img/social.png) -40px -1px;
	cursor: pointer;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}
.s2:hover{
	opacity: 0.5;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}
.s3{
	width:40px;
	height: 40px;
	position: relative;
	float: left;
	margin-left: 10px;
	background: url(img/social.png) -80px -1px;
	cursor: pointer;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}
.s3:hover{
	opacity: 0.5;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}

.s4{
	width:40px;
	height: 40px;
	position: relative;
	float: left;
	margin-left: 10px;
	background: url(img/social.png) -220px -1px;
	cursor: pointer;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}
.s4:hover{
	opacity: 0.5;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}
.s5{
	width:40px;
	height: 40px;
	position: relative;
	float: left;
	margin-left: 10px;
	background: url(img/social.png) -270px -1px;
	cursor: pointer;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}
.s5:hover{
	opacity: 0.5;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}
.s6{
	width:40px;
	height: 40px;
	position: relative;
	float: left;
	margin-left: 10px;
	background: url(img/social.png) -120px -1px;
	cursor: pointer;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}
.s6:hover{
	opacity: 0.5;
									transition-timing-function: ease-in-out;
	transition: 0.5s;
}
.ali{
		font-family: 'Spartan', sans-serif;
	font-size:9px;
	position:fixed;
	bottom:10px;
	left:10px;
	z-index: 10;
	color:#fff;
	width:100%;
	letter-spacing: 0px;
	line-height: 15px;
}
.ali a{
	color:#fff;
	text-decoration: none;
	
}

@media only screen and (max-width: 1000px) {
	.name{
			font-size:60px;
		top:20vh;
	}
.name2{
	top:40vh;
	font-size:30px;

}
}
@media only screen and (max-width: 600px) {
	.name{
			font-size:40px;
		top:45vh;
	}
.name2{
	top:47vh;
	font-size:20px;
	letter-spacing: 10px;

}
	.social{
	width:150px;
	height: 50px;
	position: relative;
	z-index: 10;
	top:50vh;
	left:0px;
	right:0px;
	margin: 0 auto;
}
	.name3{
		display: none;
	}
}
@media only screen and (max-height: 900px) {
.bg0{

	background: url(img/bg4.jpg) center center no-repeat fixed;
	opacity: 0.6;

}	
}