/* CSS Document */
body{
	
	
	background-color: #000000;
	font-family: 'mono';
	
}

a{
	text-decoration: none;
	color:#8E8E8E;
}

#container{
	background-color: #000000;
	width:900px;
	margin-top: -25px;
	margin-left: auto;
	margin-right:auto;
}

#header{
	background-color: #000000;
	font-size: 25px;
	color:#0F0F0F;
	text-align: center;
	
	
	padding-top: 25px;	
}

#content{
	background-color: #000000;
	
}


#nav{
	
	
	text-align: center;
	background-color: #000000;
	font-family: 'mono';
	font-size: 28px;
	width:150px;
	
	float: left;
	color: #909090;
	
	
	
	
}

#nav ul{
		
	list-style-type: none;
	padding-left: 5px;
	
	text-align:left;

	
}

#nav a {
	color: #909090;
	font-size: 25px;
	transition:.1s;
}

#nav a:hover {
	font-size: 28px;
	color: #FFFFFF;
	text-shadow: 0px 0px 15px #FFFFFF;
	text-shadow: 0px 0px 25px #FFFFFF;
}

#nav a.Active:hover {
	font-size: 28px;
	color: #FFFFFF;
	text-shadow: 0px 0px 15px #6BFCFF;
	text-shadow: 0px 0px 25px #6BFCFF;
}

#nav a.Active{
	font-size: 25px;
	color: #FFFFFF;
	text-shadow: 0px 0px 15px #FFFFFF;
	text-shadow: 0px 0px 25px #FFFFFF;
	
}


#main{
	background-color: #000000;
	text-align:center;
	
	color: #ACACAC;
	width: 730px;
	padding:10px;
	float: right;
}

#main a{
	font-size: 26px ;
	color: #FFFFFF;
	padding-left: 5px;
	padding-right: 5px;
	
	
	transition:.3s;
}

#main a:hover{
	font-size: 30px ;
	color: #FFFFFF;
	
	padding-left: 25px;
	padding-right: 25px;
	text-shadow: 0px 0px 15px #FFFFFF;
	text-shadow: 0px 0px 25px #FFFFFF;
	
	
	
	outline-style: solid;
	outline-width: 1px;
	outline-color: #8F8F8F;

}

#main img{
	background: rgba(37,37,37,1.00);
	margin-bottom: 15px;
	width: 100%;
	
	border-radius: 5px;
	transition:.3s;
}

#main img:hover{
	
	
	border-radius: 25px;
	
}

#main h2{
	text-align:center;
  	width:512px;
 	margin: 0 auto;
	margin-bottom: 20px;

	text-shadow: 0px 0px 15px #FFFFFF;
	text-shadow: 0px 0px 25px #FFFFFF;
	
	font-family: 'mono';
	color:#DBDBDB;
}

#main h1{
	background-color: #070707;
	
	outline:1px;
	outline-style: solid;
	outline-colo: #8F8F8F;
	
	text-shadow: 0px 0px 15px #FFFFFF;
	text-shadow: 0px 0px 25px #FFFFFF;
	text-shadow: 0px 0px 35px #FFFFFF;
	
	font-family: 'mono';
	color:#FFFFFF;
	font-weight:1;
}


#footer img{
	
	margin-bottom: -25px;
	float: bottom;
	
}

#footer{
	background-color: #0F0F0F;
	color:#969696;
	width: auto;
	padding: 15px;
	text-align: center;
	clear:both;
	
}

/* Scrollbar */
/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #0F0F0F;
}

/* Handle */
::-webkit-scrollbar-thumb {
  	background: #222222;
	
  
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #BCBCBC;
  
}
/* End Scrollbar*/




/* image gallery */

#main .img-gallery{
	
	
	align-content: center;
	display: grid;
	
	grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
	padding-left: 10px;
	padding-top: 12px;
	

}
#main .gifs{
	
	
	align-content: center;
	display: grid;
	
	grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
	padding-left: 10px;
	padding-top: 12px;
	

}
#main .gifs img{
	
	width: 350px;
	height: 350px;
	object-fit: cover;
	
	
	
	
	
}

#main .img-gallery img{
	
	width: 350px;
	height: 350px;
	object-fit: cover;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  	filter: grayscale(100%);
	
	
	cursor:pointer;
	
}

#main .img-gallery img:hover{
	
	box-shadow: 0px 0px 50px rgba(255,255,255,0.21);
	
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  	filter: grayscale(0%);
}

.fullimg{
	
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.9);
	position: fixed;
	top:0;
	left:0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100;
}

.fullimg img{
	
	width: 100%;
	max-width: 600px;
	transition: 1s;
	
}

.fullimg img:hover{
	
	width: 100%;
	max-width: 600px;
	
	box-shadow: 0px 0px 135px rgba(255,255,255,0.21);
}
.fullimg span{
	color:#DBDBDB;
	font-family: 'mono';
	position: absolute;
	top:5%;
	right: 5%;
	font-size: 32px;
	cursor: pointer;
}




/*music player*/
.players{
	

	width: 730px;
	padding:10px;
	float: right;
}
.players p{
	margin:0;
}
.players h1{
	margin:0;
}
.music{
	width: 95%;
	
	padding: 20px;
	
	
	color:#555;
	border-radius: 8px;
	margin:auto;
	margin-bottom: 25px;
	margin-left: -2px;
	
	
	background-color: rgba(147,147,147,1.00);
  	background-blend-mode: multiply;
	
	background-repeat: no-repeat;
  	background-size: 110%;
	background-position: center;
	background-opacity: 100%;
	transition: 1s;
	
}
.music:hover{
	width: 95%;
	
	padding: 20px;
	 
	
	color:#555;
	border-radius: 8px;
	margin:auto;
	margin-bottom: 25px;
	margin-left: -2px;
	
	background-color: rgba(255,255,255,1.00);
	background-repeat: no-repeat;
  	background-size: 110%;
	background-position: 5% 50%;
	background-opacity: 100%;
	
}


.track 
{
	display: flex;
	align-items: center;
	
	
}
.track img
{
	width:75px;
	margin-right: 5px;
	shadow: 0 0 20px rgba(0,0,0,.3);
	cursor: pointer;
	transition: .3s;
}
.track img:hover
{
	width:75px;
	margin-right: 5px;
	cursor: pointer;
	 -webkit-filter: drop-shadow(0 0 15px rgba(34,34,34,0.5));
}
.track p
{
	color: #F3F3F3;
	-webkit-filter: drop-shadow(0 0 5px rgba(34,34,34,0.5));
}

.progress{
	-webkit-appearance:none;
	-webkit-filter: drop-shadow(0 0 5px rgba(34,34,34,0.1));
	background-color: rgba(255,255,255,0.47);
	width: 100%;
	height: 5px;
	border-radius: 5px;
	cursor:pointer;
	margin:15px;
}

.progress::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	background: rgba(255,255,255,1.00);
	width:15px;
	height:15px;
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(255,255,255,0.30);
	transition:.2s;
	
}
.progress::-webkit-slider-thumb:hover{
	 -webkit-appearance: none;
	appearance: none;
	background: rgba(255,255,255,1.00);
	width:10px;
	height:25px;
	border-radius: 0%;
	box-shadow: 0 0 20px rgba(255,255,255,1.00);
	
	
}

.volslide {
	display: flex;
	align-items: center;
	margin-left: 5px;
	
}
.volslide img {
	width: 45px;
	margin-right:-15px;
}

.vol{
	-webkit-appearance:none;
	 -webkit-filter: drop-shadow(0 0 5px rgba(34,34,34,0.1));
	width: 10%;
	height: 5px;
	border-radius: 5px;
	cursor:pointer;
	margin:15px;
}
.vol::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	background: rgba(255,255,255,1.00);
	width:15px;
	height:15px;
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(255,255,255,0.30);
	transition:.2s;
	
}
.vol::-webkit-slider-thumb:hover{
	 -webkit-appearance: none;
	appearance: none;
	background: rgba(255,255,255,1.00);
	width:7px;
	height:25px;
	border-radius: 0%;
	box-shadow: 0 0 20px rgba(255,255,255,1.00);
}
/*end music player*/

/*Comic Controler */

.comiccontrolls{
	margin: auto;
  	width: 50%;
  
  	padding: 10px;
	
	
	display: flex;
	align-items: center;
  	justify-content: center;
	
}
.comiccontrolls p {  
  	padding-left: 10px;
  	padding-right: 10px;
	
	cursor:pointer;
	transition:.1s;
	font-size: 20px;
}
.comiccontrolls p:hover {  
  	
	color:rgba(243,243,243,1.00);
	text-shadow: 0 0 20px rgba(255,255,255,1.00);
}

/* end comic */

/* contact */
.contact{
	 text-align: left;
	 padding-bottom: 15px;
	 margin:auto;
}
.contact a{
	
	margin-bottom:125px;
}


/* Fonts */
@font-face {
  font-family: 'mono';
  src: url("fonts/CascadiaMono-ExtraLight.otf");
}




/*End Fonts*/