* {
	font-family: 'Yatra One';
}

html {
	width: 100vw;
	height: 100%;
	margin: 0;
	font-size: 14px;
}

@media screen and (max-width: 800px) {
	html {
		font-size: 10px;
	}
}

@media screen and (max-width: 600px) {
	html {
		font-size: 8px;
	}
}

body {
	width: 100vw;
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	overflow-x: hidden;
}

h1 {
	font-size: 6rem;
	font-family: 'Rubik Scribble';
	text-align: center;
	margin: 2rem;
}

h3 {
	font-size: 1.5rem;
}

h2 {
	font-size: 2rem;
}

page {
	flex: 1;
	height: 100%;
	max-width: 64rem;
	box-sizing: border-box;
	padding: 4rem;
	/* @media screen and (max-width: 480px) {
		max-width: 100vw;
	} */
}

page#game {
	padding: 2rem;
	overflow: hidden;
}

canvas {
	width: 20rem;
	height: 20rem;
}

button {
	width: 100%;
	color: black;
	border: 0.5px solid #332222;
}

button:disabled {
	opacity: 0.4;
}

input {
	font-size: 2em;
	padding: 0.4em;
	width: 100%;
	box-sizing: border-box;
	
	border: 0.5px solid #332222;
}

.h-flex {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.character {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.bar-align {
	flex: 0 0 2rem;
	display: flex;
	flex-direction: row;
	padding: 0 1rem 0 4rem;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	margin: 0 0 0.5rem; 
}

.bar-outer {
	flex: 1;
	height: 2rem;
	width: 60%;
	margin: 0 0.5rem 0 0; 
	padding: 0.2rem;
	box-sizing: border-box;
	background: #bbbbbb;
}

.bar-meter {
	flex: 0 0 3em;
}

.hpbar {
	width: 100%;
	height: 100%;
	background: #c52626;
}

.energybar {
	width: 100%;
	height: 100%;
	background: #7af7b2;
}

.move-option {
	flex: 1;
	font-size: 1rem;
	height: 5em;
	max-width: 5em;
}

.attack-label {
	text-align: center;
	box-sizing: border-box;
	padding: 0.5rem 0;
	font-size: 1.2em;
}

table {
	border-spacing: 0px;
	border: 1px solid black;
	margin: auto;
}

td {
	border: 1px solid black;
	min-width: 2.2rem;
	box-sizing: border-box;
	padding: 0.2rem;
	text-align: center;
}

ul {
	padding-inline-start: 2rem;
}

.bl {
	border-left: 0.2rem solid black;
}

.bb {
	border-bottom: 0.2rem solid black;
}

#rules {
	width: 100%;
	padding-bottom: 4rem;
	display: none;
}

.z {
	background-color: #7af7b2;
}

.d {
	background-color: lightskyblue;
}

.t {
	background-color: palevioletred;
}

span.d {
	color: skyblue;
	background: none;
}

span.t {
	color: palevioletred;
	background: none;
}

#table-them {
	p {
		width: 0;
		rotate: 90deg;
		margin: -2rem 0px 0px 0.5rem;
	}
}

#table-and-key {
	display: flex;
}

#table-key {
	list-style-type: none;
    padding-inline-start: 1rem;
}

.key-box {
	width: 1rem;
	height: 1rem;
	display: inline-block;
}

#move-cards {
	/* gap: 0.5rem; */
	perspective: 60rem;
	/* justify-content: center; */
}

.move-spacer {
	flex: 1;
	transition: flex 0.2s, max-width 1.5s, filter 0.2s, transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 9rem;
}

.move-card {
	width: 5rem;
	height: 7rem;
	transition: transform 0.2s, opacity 0.2s;
	background-color: gainsboro;
	border: 0.2rem solid gray;
	display: grid;
  	grid-template-rows: [card-top] 2fr [header-img] 8fr [img-text];
	/* 4fr [card-bottom]; */

	box-shadow: 2px 4px 7px 0px #00000073;

	font-size: 1rem;
	position: relative;
	-webkit-user-select: none; /* Safari, Chrome, and Opera */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* Internet Explorer/Edge */
	user-select: none;         /* Standard syntax */
}

.move-title {
	grid-row-start: card-top;
	grid-row-end: header-img;
	/* grid-column: span 12; */
	/* grid-template: gridcell; */
	margin: auto;
	text-align: center;
	font-size: 0.6rem;
}

.move-main {
	grid-row-start: header-img;
	grid-row-end: img-text;
	/* grid-column: span 12; */
	display: flex;
	align-items: center;
	justify-content: center;
}

.move-img {
	position: absolute;
	width: 90%;
	margin-bottom: 0.2rem;
}

.move-cost {
	position: absolute;
	font-size: 3.5rem;
	margin: 0;
}

/* .move-bottom {
	display: grid;
} */

.move-text {
	grid-row-start: img-text;
	grid-row-end: card-bottom;
	display: grid;
	overflow: hidden;
	grid-template-columns: repeat(12, 1fr);
	/* grid-template-rows: 50% 50%; */

	> * {
		grid-column: span 4;
		margin: 0;
		/* grid-row: span 1; */
		display: flex;
		align-items: center;
		justify-content: center;
		img {
			object-fit: contain;
			width: 80%;
			max-height: 80%;
		}
		p {
			font-size: 0.3rem;
			margin: 0;
			text-align: center;
		}
	}
}

/* .move-desc-num {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	img {
		width: 40%;
	}
} */

@media screen and (max-width: 480px) {
	.move-card {
		width: 4rem;
		height: 6rem;
	}
}

.inline-move {
	width: 1em;
	height: 1em;
	margin-bottom: -0.15em;
}

#move-explainer {
	margin-bottom: 3rem;
	height: 11rem;
}

@media screen and (max-width: 800px) {
	#move-explainer {
		height: 16rem;
	}

	page#game {
		padding-top: 8rem;
	}
}

.flex {
	flex: 1 1 0;
}

#move-display-confirm {
	margin-right: 2rem;
	width: 15rem;
}

#move-confirm {
	padding: 1rem;
}