body {
	/*background:#f2f2f4;*/
	background-image: url('images/background1.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
h1 {
	text-align:center; 
	margin:10px;
	color: #F10000;
	text-shadow: 1px 1px #FFFFFF;
}
p {
	text-align: center;
	margin-left: 12%;
	margin-right: 12%;
}
table {
	margin: auto;
	border-collapse: collapse;
}
tbody {
	display: flex;
	flex-direction: column;
}
img {
	user-select: none;
}
td {
	user-select: none;
	border: black 1px solid;
	width: 32px;
	height: 28px;
	color: black;
	font-size: small;
    padding-top: 4px;
}
tr:hover .col2 {
	color:#000000;
	font-weight: 800;
	text-shadow: 0px 0px 3px white;
}
.row { /* NOT applied to first three rows */
	text-align:center; 
	background:#FFFFFF;
	display:flex;
}
.row:hover {
	background:#FFFFCC;
}
.highlighted {
	background:#FFFFCC;
}
.active {
    order: 0 !important;
}
.row th {
	cursor:pointer;
}
.row.active th {
	color:#000000;
	font-weight: 800;
	text-shadow: 0px 0px 3px white;
}
.row.active th:hover {
	color:#191801;
	text-shadow: 0px 0px 2px white;
}
#row0 {
	display:flex;
	justify-content: center;
	order: -20;
}
#defender{
	background:linear-gradient(180deg, #3030A0, #7070E9); 
	color:#FFFFFF; 
	height:25px;
	padding-top: 1px;
	padding-bottom: 0px;
	width: 10em;
	margin-left: 6.8em;
}
#row1 {
	order: -19;
	display:flex;
	justify-content: flex-end;
} 
#row2 {
	order: -18;
	display:flex;
	justify-content: flex-end;
}
#row1 th{
	background: linear-gradient(180deg, #7070E9, #AAAAFF);
}
#row1 th img{
	padding-top: 5px;
	width: 32px;
	margin: 0px 0px -3px 1px;
}
#row2 th {
	background: linear-gradient(180deg, #AAAAFF, #FFFFFF);
	cursor: pointer;
}
#row2 th.empty {
	cursor: default;
}
#row2 th.active {
	background: linear-gradient(180deg, #AAAAFF, #222255);
}
#row2 th:not(.empty):hover:not(.active) {
	background: linear-gradient(180deg, #AAAAFF,  #6666a9);
	/*box-shadow: inset 0 0 0 2px rgb(241 245 255 / 0.42);*/
}
#row2 img{
	width: 28px;
	height: 28px;
	margin: 0px 1px;
}
.empty {
	width: 100px;
	order: -19;
}
.col2 {
	position: relative;
	text-align: left;
	color: #191801;
	font-size: 17px;
	user-select: none;
	width: 100px;
	border: black 1px solid;
	padding-left: 6px;
	height: 28px;
}
.row.active .col2::before {
	content: "📌";
	position: absolute;
	top: 50%;
	left: -0.72rem;
	z-index: 2;
	font-size: 1.1rem;
	line-height: 1;
	pointer-events: none;
	filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.4));
	transform: translate(-56%, -50%) rotate(-135deg);
	text-shadow: none;
}
.col2 img{
	float: right;
	width: 22px;
	height: 22px;
	margin-top: 2px;
    margin-right: 2px;
}
.normalEff {
	background:#FFFFFF; 
	color:#000000;
}
.superEff {
	background:#009900; 
	color:#FFFFFF;
	font-weight: bold;
}
.nvEff {
	background:#FF0000; 
	color:#FFFFFF;
	font-size: 80%;
	font-weight: bold;
	padding-top: 4px;
}
.noEff {
	background:#000000; 
	color:#FFFFFF;
}
#normal {order: 1;}
#fighting{order: 2;}
#flying{order: 3;}
#poison{order: 4;}
#ground{order: 5;}
#rock{order: 6;}
#bug{order: 7;}
#ghost{order: 8;}
#steel{order: 9;}
#fire{order: 10;}
#water{order: 11;}
#grass{order: 12;}
#electric{order: 13;}
#psychic{order: 14;}
#ice{order: 15;}
#dragon{order: 16;}
#dark{order: 17;}
#fairy{order: 18;}
.normalDef {order: 1;}
.fightingDef{order: 2;}
.flyingDef{order: 3;}
.poisonDef{order: 4;}
.groundDef{order: 5;}
.rockDef{order: 6;}
.bugDef{order: 7;}
.ghostDef{order: 8;}
.steelDef{order: 9;}
.fireDef{order: 10;}
.waterDef{order: 11;}
.grassDef{order: 12;}
.electricDef{order: 13;}
.psychicDef{order: 14;}
.iceDef{order: 15;}
.dragonDef{order: 16;}
.darkDef{order: 17;}
.fairyDef{order: 18;}

@media (max-width: 770px) {
	td {
		width: 17px;
		height: 14px;
		font-size: 50%;
		padding-top: 2px;
	}
	td.nvEff {
		font-size: 40%;
	}
	#row1 th img {
		width: 15px;
	}	
	#row2 th img {
		width: 13px;
		height: 13px;
	}	
	#row2, #row1, #row0 {justify-content: flex-start;}
	.row {height: 14px;}
	.row th {
		font-size: 50%;
	}
	p {font-size: 50%;}
	.empty {min-width:50px;}
	.row .col2 img {
		width: 9px;
		height: 9px;
	}
	.row.active .col2::before {
		left: -0.5rem;
		font-size: 0.7rem;
	}
	h1 {
		font-size: 80%;
	}
	#defender{
		font-size: 80%;
	}
	.col2 {
		width: 60px;
		height: 14px;
	}
	.empty{
		width: 60px;
	}
}
@media (max-width: 480px) {
	
}