:root {
	--color_light : #e8eef0;
	--color_highlight : #ffb813;
	--color_background-lt : #797878;
	--color_background : #383838;
	--color_dark : #222222;
	--color_xdark : #111111;
	--color_gradient-main : linear-gradient(0deg,#b07200,#ffd013);	
	--color_rune-muskerpert : #ff1953;
	--color_rune-elf : #19b6ff;
	--color_rune-dwarf : #ffba19;
	--color_rune-orc : #19ff6b;
	--color_rune-human : #8e7462;
	--color_rune-goblin : #9b19ff;
	--color_rune-halfling : #ffffff;
	--color_rune-samgatu : #ff19e1;
	--color_rune-minotaur : #e6fd10;
	--color_kickstarter : #2BDE73;
	
	--size-max-width : 1000px;
	
	--font_size-base : 1.1rem;
}


a {
  color: inherit; /* Inherit the text color from the parent element */
  text-decoration: none; /* Remove underline */
  background: none; /* Remove background */
  border: none; /* Remove border */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  font: inherit; /* Inherit font properties from the parent element */
  outline: none; /* Remove outline */
  cursor: pointer; /* Inherit cursor from the parent element */
}



* {
	box-sizing : border-box;
	padding : 0;
	margin : 0;
}

html, body {
	margin : 0;
	padding : 0;
	width : 100%;
	height : 100%;
	display : flex;
	flex-flow : row wrap;
	align-items : flex-start;
	align-content : flex-start;
	justify-content : center;
	position : relative;
	background : black;
	color : white;
	z-index : -2;
	font-family : "Barlow", sans-serif;
	font-size : 16px;
	overflow-x : clip;
	/*overflow-x : hidden;*/
	/*overflow-y : auto;*/
}

.frozen {
	overflow : hidden !important;
	margin : 0;
	padding : 0;
}

.fade-out {
	transition : opacity .2s;
	opacity : 0;
}

.absolute {
	position : absolute;
}

.hide {
	display : none !important;
}

.modal-blocker {
	z-index : 900;
	width : 100%;
	height : 100%;
	position : fixed;
	top : 0;
	backdrop-filter : blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.modal-blocker::before {
	content : '';
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	min-height : 600px;
	background : var(--color_dark);
	opacity : .8;
}

.modal {
	width : 80%;
	max-width : 400px;	
	top : 50%;
	transform : translateY(-50%);
	height : calc(100% - 2rem);
	max-height : 800px;
	background : var(--color_background);
	z-index : 900;
	position : fixed;
	filter : drop-shadow(0 0 20px var(--color_xdark));
	border-radius : 20px;
	display : flex;
	flex-flow : column wrap;
	overflow-x : hidden;
	overflow-y : scroll;
}
.modal.no-background {
	transition : all .2s;
	background : none;
}
.modal-section {
	display : flex;
	width : 100%;
	height : 55%;
	padding : 1rem;
	box-sizing : border-box;
	flex-flow : column nowrap;
	overflow-y : scroll;
}
.modal-section.header {
	height : 35%;
}
.modal-section.header::before {
	height : 35%;
	width : 100%;
	content : '';
	background-image : url('./images/image-background.jpg');
	background-size : cover;
	background-position : center;
	position : absolute;
	top : 0;
	left : 0;
	opacity : .5;
}
.modal-section.header img {
	top : 0;
	left : 0;
}
.modal-section.footer {
	height : 10%;
	padding-bottom : 2rem;
	box-sizing : border-box;
}
.modal .button.submit {
	display : flex;
	align-items : center;
	margin-left : auto;
	padding : 1rem 1.5rem;
	font-size : 1rem;
	line-height : .5rem;
	/* position : absolute; */
	right : 1.5rem;
	bottom : 1.5rem;
}

img {
	max-width : 100%;
}

h1 {
	font-family : 'Metal Mania', sans-serif;
	font-size : 3rem;
	letter-spacing : .25rem;
}

h1, h2 {
	background-image: var(--color_gradient-main);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

h2,h3 {
	padding : 0;
	margin : 0;
	font-size : 2.5rem;
	line-height : 3rem;
	font-family : 'Metal Mania', sans-serif;
}
h2 {
	text-align : center;
	letter-spacing : .12rem;
}
h3 {
	font-size : 2rem;
	letter-spacing : .12rem;
	color : var(--color_highlight);
}

p,blockquote,.text-block {
	font-size : var(--font_size-base);
	line-height : calc(var(--font_size-base)*1.8);
}
p.quote {
	font-size : 1rem;
	text-align : right;
	font-style : italic;
}
p.title {
	font-style : italic;
	margin-left : .5rem;
}
p.bold {
	font-weight : 700;
	margin-right : .5rem;
}

p.primary {
	font-size : 1.5rem;
	font-weight : 700;
}

span.highlight {
	font-weight : 700;
	padding : 0 .25rem;
	padding-bottom : .25rem;
	border-bottom : 2px solid var(--color_highlight);
}


.button {
	background-image: var(--color_gradient-main);
	color : #000000;
	padding : .5rem 1rem;
	border-radius : 5px;
	font-size : 1.25rem;
	letter-spacing : 0rem;
	text-transform : uppercase;
	opacity: 1;
	text-align : center;
	cursor : pointer;
}
.button:hover {
	filter : brightness(1.3);
}
.button.center {
	margin : 1rem auto;
}
.button.text {
	font-size : 1rem;
	background : none;
	color : white;
	text-transform : inherit;
	border-bottom : 1px solid white;
	padding-left : .2rem;
	padding-right : .2rem;
	padding-bottom : .8rem;
	border-radius : 0;
	line-height : .2rem;
}
.button.text:hover {
	color : var(--color_highlight);
	border-color : var(--color_highlight);
}

.cartouche {
	margin-top : 4rem;
	width : 80px;
}

.background {
	position : fixed;
	z-index : -1;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background : url('./images/image-background.jpg') no-repeat center center/cover;
	pointer-events : none;
	opacity : .5;
}

.spacer.horz {
	min-width : 100%;
	height : var(--spacer-size);
}

.section {
	width : 100%;	
	max-width : 1000px;
	display : flex;
	flex-flow : row wrap;
	margin : 2rem 6rem;
	position : relative;
	padding : 2rem;
	backdrop-filter : blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.section::before {
	content : '';
	background : var(--color_background);
	min-width : 100%;
	min-height : 100%;
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	opacity : .5;
	border-radius : 20px;
}
.section.no-background::before {
	background : transparent;
	opacity : 0;
}
.section.no-background {
	backdrop-filter : blur(0px);
	-webkit-backdrop-filter: blur(0px); 
}
.section.no-padding {
	padding : 0;
}

.video-container {
	width : 100%;
	max-width : 1000px;
	margin : 2rem 6rem;
	position : relative;
	height : 0px;
	padding-bottom : 56.25%;
}

.video-container iframe {
	width : 100%;
	height : 100%;
	position : absolute;
	top : 0;
	left : 0;
	border : none;
	border-radius : 20px;
}

.disable_btn {
	background : var(--color_light);
	opacity : .2;
	pointer-events : none;
}

.wrapper {
	display : flex;
	flex-flow : row nowrap;
	width : 100%;
}
.section.image {
	margin-top : 6rem;
	margin-bottom : 0;
	padding-top : 0;
	padding-bottom : 0;
	min-height : 250px;
	overflow : visible;
}
.section.image img {
	position : absolute;
	left : 0;
}
.section:has(.section-header-image) {
	margin-top : 350px;
	padding-top : 8rem;
}
.section .section-header-image img {
	position : absolute;
	top : 0;
	left : 0;
	transform : translateY(-60%);
	z-index : 42;
}
.section .sub-section {
	display : flex;
	flex-flow : row wrap;
	width : 100%;
	justify-content : center;
	margin-top : 2rem;
}
.sub-section.left {
	justify-content : flex-start;
}
.section.footer {
	max-width : 100%;
	min-width : 100%;
	padding : 1rem;
	box-sizing : border-box;
	background : var(--color_xdark);
	display : flex;
	flex-flow : row wrap;
}
.footer {
	margin-bottom : 0;
	padding-bottom : 2rem;
}
.footer .sub-section {
	margin-top : 0;
}

.footer-content {
	display : flex;
	flex-flow : column nowrap;
	flex-grow : 1;
	padding : 4rem;
}
.wide {
	flex-grow : 0.6;
}
.footer-content.right {
	align-items : flex-end;
}
.footer .footer-header {
	font-size : 1.5rem;
	letter-spacing : 0rem;
	font-weight : 700;
	text-transform : uppercase;
}
.social-icons {
	margin-top : 2rem;
}
.social-icon {
	width : 60px;
	height : 60px;
	border-radius: 50%;
	margin-right : 2rem;
	border : 1px solid white;
	display : flex;
	justify-content : center;
	align-items : center;
	cursor : pointer;
}
.social-icon a {
	display : flex;
	justify-content: center;
	align-items : center;
	width : 100%;
	height : 100%;
}

.social-icon img {
	width : 55%;
	height : 55%;
}
.social-icon:hover {
	border-color : var(--color_highlight);
}

.social-icon.green:hover {
	border-color : var(--color_kickstarter);
}

.copyright {
	width : 100%;
	font-size : 1rem;
	font-style : italic;
	text-align : center;
	padding-bottom : 1rem;
}
.copyright .cr_bold {
	font-style : normal;
	font-weight : 700;
}

.main-logo {
	display : flex;
	justify-content : center;
	padding: 6rem 1rem;
	margin-top : 6rem;
}
.main-logo img {
	width : 80%;
}
.main-logo h1 {
	margin : 0;
	padding : 0;
}

.column-group {
	padding : 2rem;
	box-sizing : border-box;
	width : 100%;
	display : flex;
	flex-flow : row nowrap;
}
.column-group:has(.image-group) {
	flex-flow : row nowrap;
}
.column-group:has(.sub-group) {
	flex-flow : row nowrap;
	justify-content : center;
}
.column-group .sub-group {
	display : flex;
	justify-content : center;
	flex-flow : row nowrap;
} 
.column-group .column {
	width : 100%;
	flex-grow : 1;
	position : relative;
}
.column.double {
	flex-grow : 2;
	flex-basis : 0;
	box-sizing : border-box;
	padding : 2px;
	min-width : 50%;
}
.hero-column {
	margin : auto;
}

.text-block {
	margin : 0;
	padding : 0 2rem;
	padding-top : 2rem;
}
.text-block.left {
	margin-right : 2rem;
	border-right : 2px solid var(--color_highlight);
}
.left p {
	margin-bottom : 0;
}
.text-block.full-width {
	width : 100%;
	box-sizing : border-box;
}
.text-block .text-group {
	display : flex;
	align-items : center;
}
.text-group p {
	margin-top : 0;
	margin-bottom : 0;
	line-height : 2rem;
}

blockquote {
	max-width : 300px;
	margin : 0;
	margin-bottom : 2rem;
	padding: 1rem 1rem;
	quotes: "\201C""\201D""\2018""\2019";
	shape-outside: inset(0 0 20px 0);
}
blockquote.left {
	float : left;
	margin-right : 2rem;
	border-right : 2px solid var(--color_highlight);
}
blockquote.right {
	float : right;
	margin-left : 2rem;
	border-left : 2px solid var(--color_highlight);
}
blockquote h3 {
	font-size : 2rem;
	color : var(--color_highlight);
}

.race-rune {
	/* flex : 0 0 80px; */
	padding : 1rem;
	width : 80px;
	height : 150px;
	box-sizing : border-box;
	border-radius : 10px;
	border : 2px solid var(--color_light);
	background : var(--color_background-lt);
	margin: .5rem .5rem;
	display : flex;
	justify-content: center;
	align-items : center;
	cursor : pointer;
}
.race-rune img {
	max-height : 75px;
	width : auto;
	opacity : .5;
}
.race-rune.active {
	box-shadow : 0 0 10px 3px var(--color_rune-color);
	background : none;
	border-color : var(--color_rune-color);
	pointer-events : none;
}
.race-rune.active img {
	filter: brightness(0) saturate(100%) invert(99%) sepia(46%) saturate(268%) hue-rotate(236deg) brightness(116%) contrast(100%) drop-shadow(0 0 3px var(--color_rune-color));
	opacity : 1;
}
.race-rune:hover {
	filter : drop-shadow(0 0 10px var(--color_rune-color));
}

.hero-card {
	width : 100%;
	height : 100%;
	display : flex;
}
.hero-card::before {
	z-index : -1;
	position : absolute;
	content : '';
	min-width : 100%;
	min-height : 100%;
	background-image : var(--hero_city);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius : 50%;
	filter : blur(10px);
	backdrop-filter : blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.callout {
	margin : 2rem auto;
	padding : 3rem;
	box-sizing : border-box;
	width : 80%;
	border-left : 2px solid var(--color_highlight);
	border-right : 2px solid var(--color_highlight);
	display : flex;
	flex-flow : row wrap;
}

.contact-form {
	float : right;
	overflow : hidden;
}
.contact-form p {
	margin-bottom : 1.5rem;
}
.contact-form .form-item {
	width : 100%;
	max-width : 700px;
	margin-bottom : .5rem;
}
.contact-form .form-item:last-of-type{
	margin-bottom : 0;
}
.form-item .form-label {
	font-weight : 700;
	text-transform : uppercase;
}
.form-item input {
	height : 2.5rem;
	width : 100%;
	background : white;
	margin : 1rem 0;
	box-sizing : border-box;
	outline : none;
	overflow : hidden;
	color : var(--color_dark);
	padding-left : .5rem;
	font-size : var(--font_size-base)
}

.contact-form-text {
	margin-left : 1rem;
}

.contact-form-text.warning {
	color : red;
	font-weight : 700;
}

.question-counter {
	font-size : 1rem;
	color : var(--color_background-lt);
	margin-top : -.7rem;
	padding : 0;
}

.question {
	font-size : 1.5rem;
	font-weight : 700;
	margin-top : .5rem;
	margin-bottom : 1rem;
	line-height : normal;
}

.answers {
	width : 100%;
	display : flex;
	flex-flow : row wrap;
	align-self : flex-start;
	
	max-height: 100%;
	overflow-y : scroll;
}

.answer {
	padding : .5rem 1rem;
	background : var(--color_background-lt);
	display : flex;
	margin-bottom : .25rem;
	border-radius : 10px;
	opacity : .7;
	font-size : 16px;
	width : 100%;
	user-select : none;
	cursor : pointer;
}
.answer:hover {
	opacity : 1;
}
.answer.selected {
	background : var(--color_light);
	opacity : 1;
	color : var(--color_xdark);
}

.answer::before {
	height : 100%;
	content : attr(data-prefix);
	margin-right : .5rem;
	font-weight : 700;
	color : var(--color_highlight);
}

.results-container {
	position : absolute;
	right : 0%;
	height : 100%;
	z-index : 9000;
	display : flex;
	flex-flow : row wrap;
	overflow : scroll;
	right : -100%;
	background : var(--color_dark);
}
.results-container::before {
	content : '';
	background-image : url('./images/image-background.jpg');
	background-size : cover;
	background-repeat : no-repeat;
	background-position : center;
	position : fixed;
	width : 100%;
	height : 100%;
	opacity : .5;
}

.results-container.post {
	transition : all 1s;
	right : 0;
}

.results-section {
	width : 100%;
	padding : 1rem;
	position : relative;
	box-sizing : border-box;
	/* height : 50%; */
}
.results-group {
	position : relative;
}
.results-section .text-block {
	margin : 0;
	padding : 0;
}
.results-section p {
	margin : 0;
}
.results-highlight {
	font-weight : 700;
	font-size : 1.5rem;
	border-bottom : 2px solid var(--color_highlight);
}
.results_race-name {
	left : 0;
	top : 50%;
	transform : translateY(-50%);
	width : 100%;
	margin : 0 auto;
	font-size : 3rem;
	position : absolute;
	filter : drop-shadow(0 2px 3px var(--color_xdark));
}

.race-symbol {
	margin : 2rem;
	opacity : .6;
}

.city-image {
	margin-top : -1rem;
	margin-left : -1rem;
	margin-right : -1rem;
	height : 60%;
	overflow : hidden;
}
.city-image img {
	width : 100%;
	margin-top : -25%;
}
.leader-results {
	margin-top: -20%;
	width : 100%;
}
.leader-results img {
	margin : 0 3rem;
	width : calc(100% - 6rem);
	margin-top : 1rem;
}

#results_clone-btn {
	margin-top : 5rem;
}

.description {
	margin-bottom : 3rem !important;
}

.nav-header {
	display : flex;
	width : 100%;
	padding : 1rem;
	position : fixed;
	z-index : 2;
	backdrop-filter : blur(5px);
	-webkit-backdrop-filter: blur(5px);
	justify-content : center;
}
.nav-header::before {
	content : '';
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background : var(--color_xdark);
	z-index : -1;
	opacity : .5;
}
.nav-header img {
	width : 150px;
}

.kickstarter-advert {
	width : 8rem;
	padding : 1rem;
	padding-top : 4rem;
	box-sizing : border-box;
	background : var(--color_kickstarter);
	font-size : .8rem;
	font-weight : 700;
	position : absolute;
	right : 2rem;
	top : 0;
	border-bottom-left-radius : 10px;
	border-bottom-right-radius : 10px;
	text-transform : uppercase;
	color : var(--color_xdark);
	filter : drop-shadow(0 5px 10px var(--color_xdark));
}

.image-group {
	flex-flow : row nowrap;
	position : relative;
	max-width : 50%;
}
.image-group img {
	width : 80%;
	height : auto;
	position : absolute;
	max-width : unset!important;
}

.sarona-image {
	left : -10%;
}

.lenesh-image {
	right : 0;
}

#kickstarter-launch {
	display : flex;
	flex-flow : column wrap;
	justify-content : center;
	box-sizing : border-box;
	max-width : 600px;
}

#kickstarter-launch p {
	margin : 0 auto;
}

#kickstarter-launch .button {
	margin-left : 30%;
	margin-right : 30%;
	min-width : 200px;
	background : var(--color_kickstarter);
	font-weight : 700;
}

#ks-launch-logo {
	margin : 2rem 0;
}

@media (max-width : 1000px) {

	.column-group {
		display : block;
		padding : .5rem;
	}

	.image-group {
		min-height : 400px;
		/* background : blue; */
	}

	.image-group {
		max-width : 80%;
		margin-left : auto;
		margin-right : auto;
	}

	.sarona-image {
		left : -20%;
	}

	.lenesh-image {
		right : -10%;
	}
}


@media (max-width: 767px) {

	#kickstarter-launch .button {
		margin-left : 0;
		margin-right : 0;
	}

	#ks1 {
		margin-left : .5rem;
	}

	html {
		overflow-x : hidden;
	}
	h1 {
		text-align : center;
	}
	.section {
		margin-left : 1rem;
		margin-right : 1rem;
		justify-content: center;
		align-self : flex-start;
		padding : 1rem 0rem;
	}

	.video-container {
		margin-left : 0;
		margin-right : 0;
		/* margin-bottom : 5rem; */
	}
	
	.video-container iframe {
		border-radius : 0;
		margin-bottom : 5rem;
	}
	
	.text-block {
		padding-left : 1rem;
		padding-right : 1rem;
	}
	.text-block.left {
		padding-left : 1rem;
		padding-right : 1rem;
		margin-right : 1rem;
	}

	.nav-header {
		flex-flow : row wrap;
		padding-left : 0;
		padding-right : 0;
		padding-bottom : 0;
	}
	
	.kickstarter-advert {
		position : initial;
		/* position : unset; */
		width : 100%;
		flex-flow : row wrap;
		text-align : left;
		font-size : 1rem;
		display : flex;
		justify-content : center;
		align-items : center;
		font-weight : 700;
		text-transform : uppercase;
		padding : .5rem;
		border-bottom-right-radius : 0;
		border-bottom-left-radius : 0;
		margin-top : 1rem;
	}
	.kickstarter-advert img {
		height : 1rem;
		width : auto;
	}
	.kickstarter-advert img:last-of-type {
		margin-right : .5rem;
	}
	
	.section::before {
		border-radius : 0;
	}
	.section:has(.section-header-image) {
		margin-top : 150px;
	}

	.main-logo {
		margin-top : 9rem;
	}

	.hero-column {
		margin-left : 0;
		margin-right : 0;
		width : 100%;
	}

	.hero-card {
		margin-top : 2rem;
		justify-content : center;
	}
	.hero-card::before {
		min-width : 80%;
	}
	.hero-card img {
		width : 80%;
	}

	.section.footer  {
		flex-flow : row wrap;
	}

	.footer-content {
		order : 1;
		padding : 1rem;
	}

	.footer-content.primary {
		order : 0;
	}

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

	.social-icons {
		justify-content : center;
	}
	.social-icon:last-of-type {
		margin-right : 0;
	}

	.callout {
		width : 100%;
		margin : 1rem;
	}

	.modal {
		width : 100%;
		height : 100%;
		border-radius : 0;
	}

	.footer .sub-section {
		margin-top : 0;
	}

	.footer .button {
		width : 100%;
	}

	blockquote.right {
		margin-top : 2rem;
		float : none;
	}

	.section:has(.section-header-image) {
		padding-top : 2rem;
	}

	.image-group {
		min-height : 250px;
	}

	.contact-form-text {
		text-align : center;
		margin-left : 0;
		margin : 0 auto;
	}

	.cartouche {
		margin-left : auto;
		margin-right : auto;
		margin-bottom : 2rem;
	}
}



/* COUNTDOWN TIMER */

#countdown-container {
	display : flex;
	justify-content : center;
	margin : 0 auto;
	width : 80%;
	max-width : 400px;
	padding-bottom : 2rem;
}

.number-box {
	display : flex;
	flex-flow : row wrap;
	justify-content : center;
	width : 25%;
}

.number-outer {
	border : 1px solid var(--color_kickstarter);
	/* margin : 1rem; */
	/* padding : 2.5rem 1.5rem; */
	padding : 3.5rem 0;
	width : 80%;
	border-radius : 10px;
	font-size : 2rem;
	text-align : center;
	position : relative;
	overflow : hidden;
}

.number {
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translateY(-50%) translateX(-50%);
	transition : filter 1s, top .2s;
	font-family : 'Metal Mania', sans-serif;
	font-size : 2.75rem;
	letter-spacing : .25rem;
	width: 2ch;
}

.number.active {
	filter : blur(20px);
}

.countdown-label {
	width : 100%;
	text-align : center;
	font-size : .8rem;
	padding-top : .7rem;
}