html,body{
	padding: 0;
	margin: 0;
	background: #111;
}

body,input,a{
	cursor: url(../img/cursor.ico), default;
}

img.backimg{
	z-index: -1;
	width: 100%;
	height: 100%;
	min-height: 300px;
	opacity: 0.75;
}

div.card{
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left:50%;
 
	min-height: 350px;
	height:80%;
	max-height: 550px;

	min-width: 200px;
	width: 85%;
	max-width: 1500px;
	
	display: flex;
	flex-flow: wrap;
}

div.menutab{
	background: linear-gradient(#ededed, #4D4855);
	clip-path: polygon(10px 10px, calc(100% - 20px) 10px, calc(100% - 10px) 20px, calc(100% - 10px) calc(100% - 10px), calc(55% - 5px) calc(100% - 10px),calc(45% - 5px) calc(75% + 5px), 10px calc(75% + 5px));
	height: calc(100%/5);
	rotate: -10deg;
}

div.menu{
	width: 20%;
	height: 100%;
}

input.tab{
	width: 100%;
	height: 100%;
	background-color: #0a0b0a;
	font-size: 150%;
	font-weight: bold;
	color: #00c0c0;
	transition: opacity 0.3s linear, border-radius 500ms linear, box-shadow 1.5s cubic-bezier(0.6, 1, 0.5, -2), background-color 2s linear;
	clip-path: polygon(15px 15px, calc(100% - 25px) 15px, calc(100% - 15px) 25px, calc(100% - 15px) calc(100% - 15px), 55% calc(100% - 15px),45% 75%, 15px 75%);
}

input.tab:hover{
	box-shadow: 0px 0px 20px 5px #000 inset;
	background-color: #00ff0033;
	transition: border-radius 500ms linear, box-shadow 50ms linear, background-color 500ms linear;
}

div.topic::before{
	content: "";
	background: linear-gradient(#4D4855,#ededed);
	clip-path: polygon( 20px 0, 100% 0px, 100% calc(100% - 20px ), calc(50% + 20px) calc(100% - 20px), 50% 100%, 0 100%, 0 20px);
	height: 100%;
	width: 80%;
	display: inline-block;
	position: absolute;
}

div.topic{
	height: 100%;
	width: 80%;
}

div.part{
	position: absolute;
	clip-path: polygon( 25px 10px, calc(100% - 10px) 10px, calc(100% - 10px) calc(100% - 30px ), calc(50% + 15px) calc(100% - 30px), calc(50% - 5px ) calc(100% - 10px), 10px calc(100% - 10px), 10px calc(25px));
}

/* content of part from cards */
/*About Card*/
div.my{
	display: grid;
	grid-template-columns: 50%;
	grid-template-rows: 1fr 2fr 2fr;
	grid-template-areas:
		'well well'
		'mat mal'
		'sup git';
	gap: 10px;
	background-color: #000;
	width: 80%;
}
div.my p{
	grid-area: well;
	display: flex;
	color: #00ff00b0;
	font-size: 250%;
	font-weight: bold;
	justify-content: center;
	align-items: center;
	margin:15px 0 0 0;
}
div.gst{
	color: white;
	font-size: 200%;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
div.gsi{
	position: relative;
	padding:10px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
div.gsi img{
	background-color: #0000003f;
	width: 100%;
	height: 100%;
	border-style: none;
	border-radius: 25px;
}
div.my div.gs{
	border-radius: 20px;
	background-color: #ffffff20;
	display: grid;
	grid-template-columns: 50% 50%;
}
div.my div.gh{grid-area: git;}
div.my div.supp{grid-area: sup;}
div.my div.emt{
	position: relative;
	border-radius: 20px;
	background-color: #ffffff20;
}
div.my div.emt div{
	color: white;
	font-weight: bold;
	font-size: 200%;
	position: absolute;
	height: calc(100% - 20px);
	width: calc(100% - 20px);
	word-wrap: anywhere;
	justify-content: center;
	align-items: center;
	text-align: center;
	display: flex;
	padding: 10px;
}
div.my div.mail{grid-area: mal;}
div.my div.matrix{grid-area: mat;}

/*Weeb Card*/
div.weeb{
	background:black;
	width: 80%;
	height: 100%;
}

.anime{
	position: absolute;
	top:15%;
	left:15%;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: black;
	text-decoration: none;
	font-size: 400%;
	font-weight: bold;
	color: white;
}

.manga{
	position: absolute;
	bottom:15%;
	right:15%;
	-webkit-text-stroke-width: 4px;
	-webkit-text-stroke-color: black;
	text-decoration: none;
	font-size: 500%;
	font-weight: bold;
	color: transparent;
	background: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
	background-clip: text;
	-webkit-background-clip: text; 
}

.animed{
	box-shadow: 0px 0px 20px 15px #ffffffa0 inset;
	position: absolute;
	height: 100%;
	width: 100%;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	clip-path: polygon(0 0,0 100%, 100% 0);
	background: url(../img/animebg.jpg);
	background-size:cover;
	filter: blur(2px);
	transition: box-shadow 250ms linear, filter 5s linear;
}

.animed:hover{
	box-shadow: 0px 0px 20px 15px #000000a0 inset;
	filter: blur(0px);
	transition: box-shadow 250ms linear, filter 500ms linear;
}

.mangad{
	box-shadow: 0px 0px 20px 15px #000000a0 inset;
	position: absolute;
	height: 100%;
	width: 100%;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	clip-path: polygon(100% 100%,0 100%, 100% 0);
	background: url(../img/mangabg.jpg);
	background-size:cover;
	filter: blur(2px);
	transition: box-shadow 250ms linear, filter 5s linear;
}

.mangad:hover{
	box-shadow: 0px 0px 20px 15px #ffffffa0 inset;
	filter: blur(0px);
	transition: box-shadow 250ms linear, filter 500ms linear;
}

.divide{
	background-color: #8f8d8f;
	margin-top: 1px;
	height: 100%;
	width: 100%;
	clip-path: polygon(99% 0,100% 0, 100% 1%, 1% 100%,0 100%, 0 99%);
}

/*Other Cards*/
div.in{
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}

div.creat a,div.ctf a,div.hardware a{
	font-size: 400%;
	font-weight: bold;
	color: white;
}

div.creat p{
	margin: 0;
	font-size: 200%;
	color: white;
}

div.creat p img{margin-bottom: -2%;}

div.creat,div.hardware,div.ctf{
	background-color: black;
	width: 80%;
	height: calc(100% - 10px);
}