@font-face {
	font-family: chunky;
	src: url('/topxcommon/KorinnaBold.ttf');
}

:root {
	--terminal-height: 1fr;
	--background-color: rgba(0,0,0,1);
	--book-cover-color: #7c1f3b;
	--book-paper-color: #d8d6c6;
	--book-altpaper-color: #ecebe4;
	--book-text-color: #443311;
	--book-link-color: #AA2600;
	--book-visited-color: #CC2600;
	--finger-size: 8mm;
	--font-size: 16px;
	--menufade-hidden: 0.20;
	--bgridAnchor-top: 0;
	--bgridAnchor-bottom: unset;
	--bgridAnchor-left: unset;
	--bgridAnchor-right: 0;

	--topx-updated-color: goldenrod;
	--topx-dikumud: #7c1f3b;
	--topx-diku: #7c1f3b;
	--topx-lpmud: #321f7c;
	--topx-telnet: #1f7c60;
	--topx-coffeemud: #813a07;
	--topx-moo: #202020;
	--topx-custom: #202020;
	--topx-tinymud: #202020;
	--topx-evennia: #202020;

	/*--topx-cardedge: #ecebe4;*/
	--topx-cardedge: black;

    --brassplate-color: #AA8020;
    --brassplate-background: #e4b849;
    --brassplate-border: #daa520;

}

body  { 
  font-family: "Avant Garde", sans-serif;
  font-size: initial; /* so there is a fallback in case vw doesn't work right. */
  margin: 0px;
  background: var(--background-color);
  overscroll-behavior-y: contain;
  /* background-image: url("/topximgs/feltbg3.jpg"); */
  background-image: url("/topximgs/antiquewoodbg3.jpg");
}



:root {
}

/* *:link {
	color: var(--book-link-color);
}

*:visited {
	color: var(--book-visited-color);
}
*/

#mainframe {
    color: var(--book-text-color);
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}

#mainframe {
    color: var(--book-text-color);
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    border-image: url(/topximgs/scroll_black.png);
	border-image-slice: 150 125 150 125;
    border-image-width: 5em;
    border-image-repeat: round;
	padding-top: 5em;
	padding-bottom: 5em;
}

#mainframe h1 {
	color: var(--book-cover-color);
  font-family: Chunky, "Avant Garde", sans-serif;
}

div.papertable {
  /* background-image: url("/topximgs/parch.jpg"); */
  background-color: var(--book-altpaper-color);
  background-size: contain;
  background-position: top left;
  background-attachment: scroll;
  border-radius: 4mm;
  padding: 1%;
  margin: 1%;
  border-color: saddlebrown;
  border-style: double;
  border-width: medium;
  /* max-width: 1024px; */
}


div.gametable {
  align-items: center;
  /* background-attachment: scroll;
  background-image: url("/topximgs/antiquewoodbg3.jpg");
  background-position: top left;
  background-size: contain;
  border-color: saddlebrown;
  border-radius: 10mm;
  border-style: double;
  border-width: medium; */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 1%;
  max-width: 1024px;
  padding: 1%;
}

div.gametable h1 {
	margin-block: 0em;
}


div.brassplate {
    display: inline-flex;
    color: var(--brassplate-color);
    background: var(--brassplate-background);
    border-color: var(--brassplate-border);
    border-style: outset;
    border-width: 1mm;
    width: fit-content;
    border-radius: 2mm;
    text-shadow: -1px -1px 9px white;
    margin-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    flex-direction: column;
    align-items: center;
	font-family: sans-serif;
}

div.brassplate h1 {
	font-family: chunky;
	font-weight: normal;

}

#maindeck {
	display: flex;
	align-content: space-around;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 1em;
	max-width: 3.5in;
	justify-content: space-evenly;
}

#topx {
	display: flex;
	flex-direction: row;
	/* align-items: center; */
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1em;
}

* {
	box-sizing: border-box;
}

.responsive {
	float: left;
	width: 24.9999%;
	max-width: 2.5in;
	min-width: 1.9in;
}

@media only screen and (max-width: 700px) {
	.responsive {
		width: 33.33333%;
	}
}

@media only screen and (max-width: 500px) {
	.responsive {
		width: 50%;
	}
}

div.topx_cardedge {
    aspect-ratio: calc(2.5 / 3.5);
    margin: 0.5em;
    border-color: var(--topx-cardedge);
    border-width: 0.33mm;
    border-radius: 3mm;
    border-style: outset;
    background: var(--topx-cardedge);
	transition: scale 1s, rotate 1s, box-shadow 1s;
	box-shadow: 2mm 3mm 4mm 1mm black;
}

div.topx_game {
	border-color: var(--book-cover-color);
	border-radius: 3mm;
	border-style: solid;
	border-width: 0.5em;
	background: var(--book-cover-color);
	aspect-ratio: calc(2.5 / 3.5);
	overflow: clip;
	margin: 0.5mm;
	color: var(--book-text-color);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
}

div.topx_cardedge:hover {
	/*scale: 1.2;*/
	box-shadow: 3mm 4mm 5mm 1mm black;
	transition: scale 1s, rotate 1s, box-shadow 1s;
}

div.telnet {
	color: var(--topx-telnet);
	border-color: var(--topx-telnet);
	background: var(--topx-telnet);
}

div.coffeemud {
	color: var(--topx-coffeemud);
	border-color: var(--topx-coffeemud);
	background: var(--topx-coffeemud);
}

div.mud {
	color: var(--topx-coffeemud);
	border-color: var(--topx-coffeemud);
	background: var(--topx-coffeemud);
}

div.dikumud {
	color: var(--topx-dikumud);
	border-color: var(--topx-dikumud);
	background: var(--topx-dikumud);
}

div.lpmud {
	color: var(--topx-lpmud);
	border-color: var(--topx-lpmud);
	background: var(--topx-lpmud);
}

div.evennia {
	color: var(--topx-evennia);
	border-color: var(--topx-evennia);
	background: var(--topx-evennia);
}

div.moo {
	color: var(--topx-moo);
	border-color: var(--topx-moo);
	background: var(--topx-moo);
}

div.custom {
	color: var(--topx-custom);
	border-color: var(--topx-custom);
	background: var(--topx-custom);
}

div.cyber {
	color: #142336;
	border-color: black;
	background: #142336;
}

div.topx_updated {
	color: var(--topx-updated-color);
	border-color: var(--topx-updated-color);
	background: var(--topx-updated-color);
}

div.topx_game figure {
	display: flex;
	justify-items: center;
	margin: 1em;
	flex-direction: column;
	align-items: center;
}

div.topx_game figcaption {
	font-size: x-large;
}

div.topx_header {
	order: 0;
	flex-grow: 1;
	height: 10%;
	max-height: 10%;
	border: none;
	background: var(--book-paper-color);
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 0.5em;
	font-size: large;
	justify-content: space-between;
	flex-wrap: nowrap;
	text-wrap-mode: nowrap;
	text-transform: capitalize;
	overflow-x: clip;
	font-family: Chunky;
}

div.topx_header a {
	color: var(--book-text-color);
	text-decoration: none;
}

div.topx_name {
	color: var(--book-text-color);
	font-weight: bold;
	overflow: hidden
}

div.topx_buffs {
}


div.topx_artwork {
    order: 1;
    flex-grow: 4;
    height: 45%;
    max-height: 45%;
    border-style: solid;
    border-width: 3mm;
    width: 83%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    padding: 1mm;
    margin: 1mm;
    background: var(--book-altpaper-color);
    align-content: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /*border-image-source: url("/topximgs/gildedborder640.png");*/
    border-image-source: url("/topximgs/scroll_black.png");
    border-image-slice: 200 100 200 100 fill;
    border-image-repeat: stretch;
	border-image-width: 20px;
    object-fit: fill;
}


div.topx_artwork_img {
	width: 100%;
}

img.topx_icon {
	width: 100%;
}

div.topx_website {
	order: 2;
	flex-grow: 1;
	height: 10%;
	max-height: 10%;
	border: none;
	background: var(--book-paper-color);
	width: 100%;
	display: flex;
	flex-direction: row;
	border-top-left-radius: 1mm;
	border-top-right-radius: 1mm;
	align-items: center;
	padding-left: 0.5em;
}

div.topx_family {
	text-transform: capitalize;
	flex-grow: 1;
}

div.topx_fam_buffs a {
	text-decoration: none;
	color: unset;
}

div.topx_description {
    order: 3;
    height: 40%;
    max-height: 40%;
    background: var(--book-altpaper-color);
    overflow-y: auto;
    border: none;
    flex-grow: 1;
    width: 100%;
	display: inline;
    font-size: smaller;
    font-style: italic;
    color: var(--book-text-color);
    background-image: url("/topximgs/parch.jpg");
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: cover;
	opacity: 0.75;
	padding: 0.5mm;
}

.clearfix:after {
	content: "";
	clear: both;
}