@font-face {
  font-family: custom;
  src: url(assets/FantasqueSansMono-Regular.woff);
}
@font-face {
  font-family: wind;
  src: url(assets/ccc.ttf);
	}
	
html{
	background-color:black;
	font-family:custom;
	background-image: url(assets/bg.png);
	background-image:  linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%),url(assets/bg.png);
	image-rendering: pixelated;
	background-position: center right;
}

p, h1, h2{
	color:white;
}

h2 {
	margin-top:10px;
}

hr{
	border-color: rgb(27 27 27 / 0.6);
	display: block;
	margin-top: -15px;
	margin-bottom: 0px;
	margin-left: -1rem;
	margin-right: -1rem;
	border-style: inset;
	border-width: 1.5mm;
}

header{
	justify-content: center;
	align-items: center;
	text-align:center;
	display: inline-flex;
	display: flex;
	flex-wrap: wrap;
	margin-bottom:100px;
}

header div {
	font-size:5vh;
	max-height:15vh;
	max-width:15vh;
	margin:4vh;
	transition: filter 0.2s linear;
}

header div a {

	color: inherit; 
}

header div:hover {
	filter: invert(1);
}

ul li{
	color:white;
}
ul{
	margin-top:0px;
	padding:15%;
}
ul a:link {
  color: grey;
  text-decoration: none;
}

ul a:visited {
  color: grey;
  text-decoration: none;
}

ul a:hover {
  color: white;
  text-decoration: underline;
}

ul a:active {
  color: blue;
  text-decoration: none;
}

.link{
	height:100%;
	width:100%;
}

.stage{
	display: flex;
	flex-direction: row;
	margin:20px 17vw 20px 17vw;
}

.crt{
	background-image:url(assets/k.png);
	background-repeat: no-repeat;
	background-size: cover;
	width:15vw;
	display: block ;
	margin-right:3%;
	aspect-ratio: 1 / 1;
	padding: 0px;
}

.crt img{
	height:100%;
	width:100%;
 	object-fit: cover;
    object-position: bottom;
	background: repeating-radial-gradient(rgba(0,0,0,0.15) 0 0.0001%, rgba(255,255,255,0.15) 0 0.0002%) 
    60% 60%/3000px 3000px,
    repeating-conic-gradient(rgba(0,0,0,0.15) 0 0.0001%, rgba(255,255,255,0.15) 0 0.0002%)
    60% 60%/3000px 3000px;
	display: block ;
	animation: .1s b infinite;
	
}
@keyframes b {
  100% {background-position:-9% 50%,109% 50%,52% 51%}
}



.welcome{
	width:80%;
	min-height:90%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0rem 1rem 0rem 1rem;
	border: 1.5vh double white;
	background-color:black;
	background-image:url(assets/welcome.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-size: 100% 100%;
		transition: filter 0.2s linear;
}
.welcome:hover{
	background-image:  linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0) 100%), url(assets/welcome.png);
	filter:invert(1);
}

.welcome:hover img{
	filter:invert(1);
}

.kk{
	width:100%;
	height:100%;
	transition: filter 0.2s linear;
}


.welcome a {
	position:relative;
	left:24vw;
	bottom:9vw;
	width:8vw;
	height:8vw;
}
.welcome p{
	font-family:wind;
	font-size:10vw;
	font-weight:lighter;
	align-content:center;
	margin:0;
	vertical-align: bottom;
}

.side{
	width:15%	;
	margin-right:3%;
	background-image: url(assets/bg2.png);
	padding:0rem 1rem 0rem 1rem;
	border: 3mm ridge rgb(27 27 27 / 0.6);
	transition: filter 0.2s linear;
}



.box {
	max-width:100%;
	margin-bottom:50px;
	background-image: url(assets/bg2.png);
	padding:0rem 1rem 0rem 1rem;
	border: 3mm ridge rgb(27 27 27 / 0.6);
	transition: filter 0.2s linear;
}


.comic{
	width:100%;
	display:inline-flex;
	height:30vw;
}

.comsect{
	text-align:center;
	flex:1;
	min-width: 0;
	margin:2%;
}
.overlay{
	z-index:1;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: rgb(0 0 0 / 0.75);
	
}
	
}

.ovtext{
	font-size:5vw;
	color: white;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: left;	
}
.ovtext p{
	font-size:1.4vw;
	text-align:left;
	margin:4%;
}
.ovtext  h1{
	font-size:2.5vw;
}

.ovcon:hover .overlay {
  opacity: 1;
}

.ovcon{
	position: relative;
	height:78%;
	aspect-ratio: 663 / 1024;
	border-style: double;
	border-width: 1vh;
	border-color:rgb(75 75 75);
	margin-bottom:3%;
}

.ovcon img{
	display: block;
	width: 100%;
	height: 100%;
}



.cover{
	height:78%;
	border-style: double;
	border-width: 1vh;
	border-color:rgb(75 75 75);
	margin-bottom:1%;
}


.comlink{
	text-align: center;
	display:flex;
	height:18%;
	margin-bottom:2%;
}


.comlink a img{	
	height:100%;
	transition: filter 0.2s linear;
}

.comlink a img:hover{
	filter:invert(1);
}



.button{
	transition: filter 0.2s linear;
 }

.button:hover{
	filter: invert(1);
 
 
 }
 
 .gallery{
	height:100%;
	width:100%;
	display: flex;
	flex-wrap: wrap;
	margin: 1vw 0px 1vw 0px ;
 }
 
 
 .gallery div{
	height: 40vh;
	flex-grow: 1;
 }
.gallery div img{
  max-height: 100%;
  min-width:100%;
  max-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
 /*
  .crt img::before {
    content: '';
    background-image: repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 
    60% 60%/3000px 3000px,
    repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%)
    60% 60%/3000px 3000px;
    background-blend-mode: difference;
    animation: tv-nosignal .2s infinite alternate;
}
*/

 #yellow:hover{
	 filter: sepia(1) hue-rotate(-10deg);
 }
 #blue:hover{
	 filter: sepia(1) hue-rotate(180deg);
 }
 #red:hover{
	 filter: sepia(1) hue-rotate(-59deg);
 } 
 

 
 @media screen and (max-width: 800px) {
  .stage {
    margin:20px 5vw 20px 5vw;
	}
  .side{
	  display:none
	}
  .comic{
	  height:40vw;
	  padding-bottom:5%;
	 
	}
	.ovtext p{
		font-size:2vw;
	}
	.ovtext  h1{
		font-size:2.4vw;
	}
	.crt{
		width:30vw;
	}
	.welcome a {
		width:16vw;
		height:16vw;
		left:30vw;
		bottom:16vw;
		
	}
 }
  @media screen and (max-width: 500px) {
	header div {
		font-size:5vh;
		max-height:12vh;
		max-width:12vh;
	}