/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* PICO-8 Colors
	1D2B53 : dark blue
	7E2553 : dark purple
	008751 : dark green
	AB5236 : brown
	5F574F : dark grey
	C2C3C7 : light grey
	FFF1E8 : white
	FF004D : red
	FFA300 : orange
	FFEC27 : yellow
	00E436 : green
	29ADFF : blue
	83769C : indigo
	FF77A8 : pink
	FFCCAA : peach
*/

body {
	background-color: black;
	color: #00E436;
	font-size: 18px;
	font-family: 'VT323', monospace;
	padding-bottom: 120px;
	/*transform: scale(1.2);
	transform-origin: top left;*/
}

@media(min-width: 768px) {
	body {
		font-size: 22px;
	}
}

/* Elements */
h1 {
	font-size: 48px;
}

a {
	color: #FFA300;
}

a:hover {
	color: #FFA300;
	background-color: #1D2B53;
}

p {
	margin-bottom: 24px;
}

p:last-of-type {
	margin-bottom: 0;
}

img {
	max-width: 100%;
}

hr {
	margin: 2em 0;
}

ul {
	list-style: kannada;
}

small {
	font-family: serif;
	font-size: 60%;
	color: #C2C3C7;
}

tbody {
	vertical-align: top;
}

th, tr, td {
	border-style: double;
	border-color: #C2C3C7;
}

/* Classes */

.header-img {
	margin-top: 20px;
}

.center-text {
	text-align: center;
}

.tbl-cell-old {
	border-style: outset;
	border-color: #C2C3C7;
	padding: 7px;
}

.box {
	padding: 12px;
	margin-bottom: 30px;
}

.rpg-box {
	border:5px double #C2C3C7;
	border-radius: 5px;
	padding: 7px;
	color: #FFF1E8;
	background: linear-gradient(#5F574F,black);
}

.text-3d {
	text-shadow: -2px -4px red, 2px 4px blue;
	color: rgba(255,255,255,0.95);
}

.ffvii {
	background: linear-gradient(black,blue);
}

.list {
	padding-left: 40px;
}