@import "fonts/stylesheet.css";

:root {
	--production-color-extralight: #d6dbc5;
	--production-color-light: #c4ccac;
	--production-color-shade: #b3bd94;
	--production-color-dark: #92a166;
	--consumption-color-shade: #ddc4a0;
	--trade-color-light: #acb4d4;
	--trade-color-dark: #606fad;
	--funding-color-extralight: #ffe766;
	--funding-color-light: gold;
	--funding-color-base: #b48c2c;
	--funding-color-dark: goldenrod;
	--labour-color-light: #e6ae7f;
	--labour-color-base: #db8c48;
	--labour-color-dark: #db8c48;
	--storage-color-anu: #796e29;
	--storage-color-base: #c1b149;
	--storage-color-extralight: #e6dfb6;
	--storage-color-light: #dcd297;
	--storage-color-dark: green; /* #796e29 -- too ugly */
	--storage-color-lightgray: color-mix(
		in lab,
		lightgray,
		var(--storage-color-light)
	);
	--market-buy-color-extralight: #deefff;
	--market-buy-color-light: #d0e8ff;
	--market-buy-color-dark: #7090e6;
	--market-buy-color-lightgray: color-mix(
		in lab,
		lightgray,
		var(--market-buy-color-light)
	);
	--market-sell-color-extralight: #ffe7e7;
	--market-sell-color-light: #ffdddd;
	--market-sell-color-dark: #ff5050;
	--market-sell-color-lightgray: color-mix(
		in lab,
		lightgray,
		var(--market-sell-color-light)
	);
	--church-color-light: wheat;
	--guide-color: #f5efd6;

	--button-border: 1px solid dimgray;
	--button-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
	--button-shadow-under: 0px 2px 2px rgba(0, 0, 0, 0.4);
	--button-color: #efefef;
}

html, body {
	font-family: "calligraph", "MedievalSharp", "pirata one", Arial, sans-serif !important;
	margin: 0;
	padding: 0;
	background: gray;

	-webkit-touch-callout: none;
	touch-callout: none;
}

*, *::before, *::after {
	box-sizing: border-box;
}

h1 {
	width: 100%;
	text-align: center;
	margin-bottom: -10px;
	font-weight: normal;
	font-style: normal;
}

h2 {
	/* page headlines */
	font-size: 26px;
	width: 100%;
	text-align: center;
}

h3 {
	padding: 5px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 16px;
	margin-bottom: 4px;
	font-weight: bold;
}

h6 {
	font-size: 14px;
	width: 100%;
}

button {
	font-family: "calligraph", "MedievalSharp", "pirata one", Arial, sans-serif !important;
	cursor: pointer;
}

button:disabled,
button[disabled],
button.disabled {
	box-shadow: none;
}

img {
	vertical-align: middle;
}

a {
	text-decoration: none !important;
}


.view-page {
	width: 100%;
}

.view-box {
	margin: auto;
	max-width: 1000px;
	background: #ccbea3;
}

.view-subtext {
	position: absolute;
	text-align: center;
	font-size: 16px;
	bottom: 0;
	right: 10px;
	color: rgba(204, 190, 163, 0.5);
}

.frontpage-headline {
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
}

.frontpage-banner {
	position: relative;
	width: 100%;
	padding: 26.5%; /* half of relative image height */
}

.frontpage-banner img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.viewport-standin {
	height: 100%;
	overflow: hidden;
}

.viewport-standin img {
	min-height: 100%;
}

.frontpage-buttons {
	position: absolute;
	top: 5px;
	right: 5px;

	width: 60px;
	height: 100%;
	display: block;
}

.frontpage-buttons button {
	width: 100%;
	margin: 1px;
	font-size: 14px;
}

.frontpage-building-overview {
	height: 100%;
	overflow: auto;
}

.carousel img {
	width: 100%;
	object-fit: cover;
	align: top;
}

.carousel p {
	padding: 18px;
	color: black;
	font-weight: bold;
	background-color: rgba(245, 245, 245, 0.85);
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

.frontpage-summary-box {
	margin: 4px 0;
	padding: 4px;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	text-align: center;
}

.frontpage-signin-page {
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

.frontpage-signin-content {
	position: relative;
	min-height: 25vh;
	margin: 0 auto;
	padding: 5px;
	padding-top: 10px;
	max-width: 600px;
}

.frontpage-signin-content h2 {
	margin-top: 15px;
}

.frontpage-signin-button {
	text-align: center;
	margin: 20px;
	background-color: #d1c4ac;
	color: black;
	width: 80%;
	line-height: 30px;
	margin-left: calc(20px + 4%);
	font-weight: bold;

	border: var(--button-border);
	border-radius: 4px;
	box-shadow: var(--button-shadow);

	color: black;
}

.frontpage-side-image {
	float: right;
}

/* MARKET TICKER TAPE */
/* OUTER CONTAINER */
.tcontainer {
	width: 100%;
	overflow: hidden; /* Hide scroll bar */

	margin-bottom: 10px;
	border-radius: 4px;
}

/* MIDDLE CONTAINER */
.ticker-wrap {
	width: 100%;
	padding-left: 100%; /* Push contents to right side of screen */
	background-color: #e8e8e8;
}

/* INNER CONTAINER */
@keyframes ticker {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-100%, 0, 0);
	}
}
.ticker-move {
	/* Basically move items from right side of screen to left in infinite loop */
	display: inline-block;
	white-space: nowrap;
	padding-right: 100%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: ticker;
	animation-duration: 20s;
}
.ticker-move:hover {
	animation-play-state: paused; /* Pause scroll on mouse hover */
}

/* ITEMS */
.ticker-item-black {
	display: inline-block; /* Lay items in a horizontal line */
	padding: 0 2rem;
	color: black;
}

.ticker-item-green {
	display: inline-block; /* Lay items in a horizontal line */
	padding: 0 2rem;
	color: green;
}

.ticker-item-red {
	display: inline-block; /* Lay items in a horizontal line */
	padding: 0 2rem;
	color: red;
}

.links-trailer {
	width: 100%;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.trailer-tos {
	margin-left: 20px;
}

.facebook-link {
	margin: 20px;
	width: 32px;
	height: 32px;
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.frontpage-landing-text {
	position: relative;
	min-height: 25vh;
	margin: 0 auto;
	padding: 5px;
	padding-top: 10px;
	max-width: 600px;
}

.frontpage-landing-text img {
	margin: 10px 0;
	width: 100%;
}

.frontpage-background {
	min-height: 100%;
	background-size: 600px;
	/* background-position: top 70px center; */
	/* background-attachment: fixed; */
}

.numbers {
	font-family: "MedievalSharp", "calligraph", "pirata one", Arial, sans-serif;
}

.tab {
	position: relative;
}

.tab-row {
	position: absolute;
	z-index: 2;
	top: -40px;
	height: 40px;
	display: flex;
	line-height: 24px;
	font-weight: 400;
}

.subtab-row {
	height: 40px;
	display: flex;
	line-height: 24px;
	font-weight: 400;
}

.tablinks.active {
	color: black;
	background-color: rgba(204, 190, 163, 0.8);
}

.tablinks {
	color: black;
	background-color: rgba(204, 190, 163, 0.5);
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-radius: .25rem;
	padding: 8px 14px;
	transition: 0.3s;
	cursor: pointer;
}

/*
.tablinks:hover {
  background-color: wheat;
}
*/

.subtablinks.active {
	color: black;
	background-color: rgba(204, 190, 163, 0.8);
	border: solid 1px black;
}

.subtablinks {
	color: black;
	background-color: rgba(204, 190, 163, 0.5);
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-radius: .25rem;
	padding: 8px 14px;
	transition: 0.3s;
	border: solid 1px darkgray;
	cursor: pointer;
}

.tabcontent {
  display: none;
}

.subtabcontent {
  display: none;
}

.default-open {
  display: block;
}

.indiedb-link {
	margin-top: 20px;
	text-align: center;
}

.imagecarousel {
  position: relative;
  height: 233px;
  margin-bottom: 30px;
  display: flex;
  width: fit-content;
  gap: 20px;
}

.carousel-item {
	width: 100%;
}

.carousel-item img {
	width: 100%;
}

.imagecarousel img {
  margin: 0px 0px;
  box-shadow: 2px 2px 8px #8a8a8a;
}


.imagecarousel {
  animation: bannermove 10s linear infinite;
}

@keyframes bannermove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.world-map {
	padding: 2px;
	width: 100%;
	height: calc(100vw + 50px);
	max-height: 600px;
	background-color: #b0b0b0;
	object-fit: cover;

	image-rendering: pixelated;
	touch-action: none;
	animation: fadein 0.5s;
}

.humble-widget {
	margin: auto;
	width: 100%;
	height: 423px;
}