html {
	font-size: 10px;
	font-family: 'Marcellus', serif;
}

body {
	margin: 0;
	background: url(../images/_bg.jpg) top center no-repeat fixed;
}

.spacer {
	height:25px;
}

/* Text Styles */
.text-shadow {
	text-shadow: 0 1px 0 #FFFFFF;
}

.text-shadow-title {
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.text-indent {
	display:flex;
	align-items: flex-start;
}

.text-indent-left {
	margin: .6rem .8rem 0 0;
}

.textSmall {
	font-size: 1rem;
	letter-spacing: .08rem;
}

.textDefault {
	font-size: 1.4rem;
}

.textMedium {
	font-size: 1.8rem;
}

.textTitle {
	font-family: 'Marcellus SC', serif;
	font-weight: 600;
}

.textBold {
	font-weight: 600;
}

.textDefault-break {
	margin: .8rem 0 0 0;
}

/* Table Elements */
.table-frame {
	display: block;
	height: 3.4rem;
	padding: 1.5rem 1.8rem;
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23AFAC96FF' stroke-width='1' stroke-dasharray='12%2c 4%2c 72%2c 4%2c 134%2c 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

.table-line {
	width: 100%;
	height: 1px;
	background-image: url("data:image/svg+xml,%3csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100' height='100' fill='none' stroke='%23AFAC96FF' stroke-width='1' stroke-dasharray='12%2c 4%2c 72%2c 4%2c 134%2c 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

.table-container {
	position: relative;
	width: 30rem;
	/*height: 24rem;*/ /* change to "auto" or delete */
	padding: .5rem;
	background: rgb(130,132,133);
	background: -webkit-linear-gradient(left, rgba(130,132,133,1) 15%, rgba(102,107,110,1) 50%, rgba(130,132,133,1) 85%);
	background: -o-linear-gradient(left, rgba(130,132,133,1) 15%, rgba(102,107,110,1) 50%, rgba(130,132,133,1) 85%);
	background: linear-gradient(to right, rgba(130,132,133,1) 15%, rgba(102,107,110,1) 50%, rgba(130,132,133,1) 85%);
	box-shadow: inset 0 0 0 1px #485156;
}

.table-content-container {
	display:flex;
	flex-flow: column;
	padding: 1.5rem 1.8rem;
	background: #F3F0E3;
	box-shadow: inset 0 0 0 1px #666B6E, inset 0 0 2rem 0 #CDCDBB;
}

.table-right-top {
	padding: 2.8rem 1.5rem 1.8rem 1.5rem;
}

.table-right-top-bottom {
	padding: 2.8rem 1.5rem;
}

.table-corner {
	position: absolute;
	width: 2.8rem;
	height: 2.8rem;
}

.table-corner-ul {
	top: 0;
	left: 0;
}

.table-corner-ur {
	top: 0;
	right: 0;
}

.table-corner-dl {
	bottom: 0;
	left: 0;
}

.table-corner-dr {
	bottom: 0;
	right: 0;
}

.table-bottom {
	position: absolute;
	width: 10.6rem;
	height: .8rem;
	left: calc(50% - 5.3rem);
	bottom: 0;
}

.table-btn {
	position: absolute;
	width: 2.8rem;
	height: 2.1rem;
	left: calc(50% - 1.4rem);
	bottom: -1.5rem;
}

.table-divider {
	align-self: center;
	width: 8rem;
	height: .9rem;
	margin: .8rem 0;
}

/* Table Circle Elements */
.table-circle-topRight {
	display: flex;
	position: absolute;
	top: -1.5rem;
	right: 3rem;
	gap: .6rem;
}

.table-circle-bottomLeft {
	display: flex;
	position: absolute;
	bottom: -1.5rem;
	left: 3rem;
	gap: .6rem;
}

.table-greyCircle {
	display:flex;
	justify-content: center;
  	align-items: center;
	width: 3.6rem;
	height: 3.6rem;
	background: rgb(137,133,148);
	background: -webkit-linear-gradient(bottom left, rgba(137,133,148,1) 25%, rgba(167,158,172,1) 100%);
	background: -o-linear-gradient(bottom left, rgba(137,133,148,1) 25%, rgba(167,158,172,1) 100%);
	background: linear-gradient(to top right, rgba(137,133,148,1) 25%, rgba(167,158,172,1) 100%);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px #626A6E, inset 0 0 0 .3rem #ABAFB1, inset 0 0 0 1px #ABABAA, 0 0 .5rem 0 rgba(0,0,0,.5);
}

.table-greenCircle {
	display:flex;
	justify-content: center;
  	align-items: center;
	width: 3.6rem;
	height: 3.6rem;
	background: rgb(96,128,22);
	background: -webkit-linear-gradient(bottom left, rgba(96,128,22,1) 0%, rgba(113,149,26,1) 75%);
	background: -o-linear-gradient(bottom left, rgba(96,128,22,1) 0%, rgba(113,149,26,1) 75%);
	background: linear-gradient(to top right, rgba(96,128,22,1) 0%, rgba(113,149,26,1) 75%);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px #626A6E, inset 0 0 0 .3rem #ABAFB1, inset 0 0 0 1px #ABABAA, 0 0 .5rem 0 rgba(0,0,0,.5);
}

/* In-Game Elements */
.game-circleGreen {
	display:flex;
	justify-content: center;
  	align-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: rgb(96,128,22);
	background: -webkit-linear-gradient(bottom left, rgba(96,128,22,1) 0%, rgba(113,149,26,1) 75%);
	background: -o-linear-gradient(bottom left, rgba(96,128,22,1) 0%, rgba(113,149,26,1) 75%);
	background: linear-gradient(to top right, rgba(96,128,22,1) 0%, rgba(113,149,26,1) 75%);
	box-shadow: inset 0 0 0 1px #ABAFB1, inset 0 0 0 .4rem #FFFFFF, inset 0 0 0 calc(.4rem + 1px) #ABAFB1, 0 0 .5rem 0 rgba(0,0,0,.5);
	color: #FFFFFF;
	font-family: "Arial", sans-serif;
	font-size: 1.1rem;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.game-circleOrange {
	display:flex;
	justify-content: center;
  	align-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: rgb(221,117,0);
	background: -webkit-linear-gradient(bottom left, rgba(221,117,0,1) 25%, rgba(246,165,0,1) 100%);
	background: -o-linear-gradient(bottom left, rgba(221,117,0,1) 25%, rgba(246,165,0,1) 100%);
	background: linear-gradient(to top right, rgba(221,117,0,1) 25%, rgba(246,165,0,1) 100%);
	box-shadow: inset 0 0 0 1px #ABAFB1, inset 0 0 0 .4rem #FFFFFF, inset 0 0 0 calc(.4rem + 1px) #ABAFB1, 0 0 .5rem 0 rgba(0,0,0,.5);
	color: #FFFFFF;
	font-family: "Arial", sans-serif;
	font-size: 1.1rem;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.game-circleRed {
	display:flex;
	justify-content: center;
  	align-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: rgb(209,10,17);
	background: -webkit-linear-gradient(bottom left, rgba(209,10,17,1) 0%, rgba(223,76,13,1) 75%);
	background: -o-linear-gradient(bottom left, rgba(209,10,17,1) 0%, rgba(223,76,13,1) 75%);
	background: linear-gradient(to top right, rgba(209,10,17,1) 0%, rgba(223,76,13,1) 75%);
	box-shadow: inset 0 0 0 1px #ABAFB1, inset 0 0 0 .4rem #FFFFFF, inset 0 0 0 calc(.4rem + 1px) #ABAFB1, 0 0 .5rem 0 rgba(0,0,0,.5);
	color: #FFFFFF;
	font-family: "Arial", sans-serif;
	font-size: 1.1rem;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.game-circleBlue {
	display:flex;
	justify-content: center;
  	align-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: rgb(0,110,171);
	background: -webkit-linear-gradient(bottom left, rgba(0,110,171,1) 25%, rgba(100,141,188,1) 100%);
	background: -o-linear-gradient(bottom left, rgba(0,110,171,1) 25%, rgba(100,141,188,1) 100%);
	background: linear-gradient(to top right, rgba(0,110,171,1) 25%, rgba(100,141,188,1) 100%);
	box-shadow: inset 0 0 0 1px #ABAFB1, inset 0 0 0 .4rem #FFFFFF, inset 0 0 0 calc(.4rem + 1px) #ABAFB1, 0 0 .5rem 0 rgba(0,0,0,.5);
	color: #FFFFFF;
	font-family: "Arial", sans-serif;
	font-size: 1.1rem;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.game-textCloud {
	width: 2.8rem;
	height: 2.7rem;
	-webkit-filter: drop-shadow( 0 0 .5rem rgba(0,0,0,.5));
  	filter: drop-shadow( 0 0 .5rem rgba(0,0,0,.5));
}

.game-textShadow {
	-webkit-filter: drop-shadow( 0 1px 0 rgba(0,0,0,.5));
  	filter: drop-shadow( 0 1px 0 rgba(0,0,0,.5));
}

.game-elements-container {
	width: calc(100% - 6rem);
	padding: 3rem;
	display: flex;
	justify-content: space-between;
}

.game-elements-container-side {
	height: auto;
}

.center {
	margin:auto!Important;	
}

.align {
	display:inline-grid;	
}