@font-face {
	font-family: MainFont;
	src: url('RobotoCondensed-VariableFont_wght.ttf');
}

@font-face {
	font-family: TrueFont;
	src: url('RobotoSerif-VariableFont_GRAD\,opsz\,wdth\,wght.ttf');
}

:root {
	--main-background: lightseagreen;
	--main-line: #11857f;
	--main-color: black;
}

* {
	font-family: MainFont;
    table-align: center;
	text-align: center;
    user-select: none;
}

body {
    margin: 0px 10px;
    font-size: 16px;
    background: lightseagreen;
    overflow-x: hidden;
}

.table {
	width: 100%;
}

.table td {
	vertical-align: top;
}

h1 {
    display: inline;
	font-weight: normal;
    font-size: 32px;
}

h2 {
	display: inline;
	font-weight: normal;
    font-size: 28px;
}

h3 {
	display: inline;
	font-weight: bold;
    font-size: 24px;
}

h4 {
	display: inline;
	font-weight: bold;
    font-size: 20px;
}

.free-select {
	user-select: text;
}

.table-center {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.table-left {
    display: flex;
    justify-content: start;
    flex-flow: row wrap;
}

.item-left {
	width: 100%;
	text-align: left;
}

.line, .black-line, .sub-line {
	margin: 6px 0px;
	height: 0px;

	border: none;
	border-top: solid 2px white;
}
.black-line {
	border-top-color: black;
}
.sub-line {
  width: calc(100% - 10px);
  margin: 6px auto;
  border-top-color: #fff2;
}

.main-line {
	width: 100%;
	border-bottom: solid 2px var(--main-line);
	height: 5px;
	margin-bottom: 5px;
}

*::-webkit-scrollbar {
    width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-track {
    background-color: #0000;
}

*::-webkit-scrollbar-thumb {
	border: solid 1px black;
    background-color: #888;
    border-radius: 10px;
}

button {
	cursor: pointer;
	color: white;
	background-color: #11857f;
	border: solid 2px #075551;
	border-radius: 5px;
	padding: 0px 10px;
	margin: 2px;
	font-size: 14px;
}

button * {
	pointer-events: none;
}

button:not(.pre-charged,.locked,.bought,.selected,#wipe,.ca-grid-btn,:active,.evolution-goal-ctn,#black-hole-button,.remnant-upg,.small-upg,#worth-shark-button,.omni,.rebirth-upgrade):hover {
	background-color: #0b6965;
	border-color: #043f3c;
}

button.big-btn {
	width: 150px;
	height: 50px;
}

button.huge-btn {
	width: 250px;
	height: 100px;
}

button.half-huge-btn {
	width: 250px;
	height: 50px;
}

.tab-button.selected,
button:not(.pre-charged,.locked,.bought,.ca-grid-btn,.evolution-goal-ctn,#black-hole-button,.remnant-upg,.small-upg,#worth-shark-button,.omni,.rebirth-upgrade):active {
	background-color: #075551;
}

input.no-arrows {
	&::-webkit-outer-spin-button {
		-webkit-appearance: none;
	}
	&::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	&[type=number] {
		-moz-appearance: textfield;
	}
}

li {
	text-align: left;
}

.locked, .bought, .required {
	cursor: default;
}
:not(.remnant-upg,.small-upg,.bought,.isotope-symbol,.rebirth-upgrade).locked {
	background-color: #043d3a;
	border-color: #02302d;
	color: #f44;
}

:not(.rebirth-upgrade).bought {
	background-color: #11853e;
	border: solid 2px #07552e;
	color: #8f8;
}

.tab-button {
	font-size: 20px;
	min-width: 200px;
}

.tab-button.stab {
	font-size: 16px;
	min-width: 150px;
}

.tab-button.selected {
	cursor: default;
}

.tab-button.notify,
.forge-btn.notify {
	box-shadow: 0px 0px 3px 3px #f44;
}

#main-background {
	position: absolute;
	top: -10px; left: -10px;
	width: calc(100% + 20px);
	height: calc(100% + 10px);
	background: linear-gradient(0deg, transparent 0px, var(--main-background) 80px);
	z-index: -1;
}
#main-div {
	color: var(--main-color);
}

#tabs {
	margin: 5px 0px;
}

#shark-div {
	min-height: 80px;
	align-items: center;
	margin-bottom: 20px;
}

#shark-div > div {
	display: block;
	width: 300px;
	text-align: start;
}

#shark-button {
	display: block;
	width: 250px;
	align-self: stretch;
	margin: 0px 5px;
}

.shark-upgrade {
	width: 100%;
	min-height: 60px;
	position: relative;
	margin: 5px 0px;
}

.shark-upgrade-requirement {
	position: absolute;
	top: 0px; left: 0px;
	width: calc(100% - 10px); height: calc(100% - 10px);
	border: solid 5px #075551;
	background: repeating-linear-gradient(
		45deg,
		#043d3a,
		#043d3a 10px,
		#02302d 10px,
		#02302d 20px
	);
	z-index: 1;
}

.shark-upgrade-requirement > div {
	position: absolute;
	top: 50%; width: 100%;
	transform: translateY(-50%);
	font-size: 36px;
	font-weight: bold;
	color: white;
}

.shark-upgrade-div {
	position: absolute;
	top: 0px; left: 0px;
	width: 100%; height: 100%;

	display: flex;
	justify-content: space-between;
	flex-wrap: row wrap;

	align-items: center;
}

.shark-upgrade-div > div {
	text-align: left;
	width: 300px;
}

.shark-upgrade-div > div:not(:last-child) {
	width: 350px;
}

.shark-upgrade-buttons {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.shark-upgrade-buttons > button {
	width: 100%;
	height: 100%;
}

.shark-upgrade-buttons > button:first-child {
	flex: 0 0 200px;
}

#currs-top {
	margin: 10px 0px;
	min-height: 120px;
	display: flex;
	justify-content: space-evenly;
	flex-flow: row wrap;
	align-items: center;
}

.curr-top {
	width: 300px;
	align-self: stretch;
}

.curr-top > div {
	min-height: 18px;
	font-size: 14px;
}

.curr-top > button {
	width: calc(100% - 80px);
	height: 70px;
	font-size: 12px;
}

.option-div {
	display: flex;
	flex-wrap: wrap;
}

.option-div > div {
	margin: 5px;
	padding: 10px;
	flex: 1;
	background-color: #189791;
	border-radius: 5px;
	min-width: 500px;
}

#wipe {
	background-color: #690b0b;
	border-color: #3f0404;
}

#popup {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #0006;
	z-index: 1;

	opacity: 0;
	transform: scale(1.1);
	pointer-events: none;

	transition: transform, opacity;
	transition-duration: 0.5s;
}

#popup-ctn {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 10px;
	transform: translate(-50%,-50%);
	width: 720px;
	border: solid 5px #075551;
	background-color: #189791;
	border-radius: 10px;
}

#popup-html {
	min-height: 100px;
	max-height: 400px;
	padding: 5px;
	overflow-y: auto;
}

#popup-btns {
	display: flex;
	flex: 1;
}

#popup-btns > button {
	min-width: 100px;
	min-height: 30px;
	width: 100%;
}

.popup-input, #popup-input {
	width: 100%;
	height: auto;
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
	text-align: left;
	resize: none;
}

#bottom-div {
	position: fixed;
	bottom: 10px;
	left: 10px;
	width: calc(100% - 20px);
}

#feature-progress, #constellation-progress {
	position: relative;
	margin-top: 5px;
	width: calc(100% - 4px);
	height: 24px;
	border: solid 2px black;
	background-color: #222;
	border-radius: 10px;
	overflow: hidden;
}

#fp-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background-color: green;
}
#fp-bar.observ {
	background: repeating-linear-gradient(-45deg, cyan, #00aeff 20px, cyan 40px);
}

.p-text, #fp-text {
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	color: white;
	filter: drop-shadow(1px 1px 0px black) drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}

@keyframes cond-bar {
	from, to {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1.5);
	}
}

#auto-table, #research-table {
	display: flex;
	justify-content: center;
	align-items: start;
	flex-wrap: wrap;
}

#core-reactor-table {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: center;
}

.auto-div {
	width: 200px;
	border: solid 2px #075551;
	background-color: #189791;
	border-radius: 10px;
	padding: 5px 10px;
	margin: 5px;
}

.auto-name {
	width: 100%;
	min-height: 50px;
	font-size: 18px;
	font-weight: bold;
}

.auto-button {
	display: block;
	width: 100%;
	height: 72px;
}

.auto-button-switch {
	display: block;
	width: 100%;
}

.research-div {
	overflow: hidden;
	position: relative;
	width: 320px;
	border: solid 2px #075551;
	background-color: #189791;
	border-radius: 10px;
	padding: 5px;
	margin: 5px;
}

.research-name {
	width: 100%;
	font-size: 18px;
	color: white;
	text-shadow: 1px 1px 0px black, 0px 0px 3px black, 0px 0px 3px black, 0px 0px 2px black, 0px 0px 2px black;
	text-align: left;
}

.research-desc {
	font-size: 14px;
	width: 100%;
	min-height: 80px;
	text-align: justify;
}

.research-short-text {
	font-size: 14px;
	width: 100%;
	text-align: justify;
}

.research-status {
	display: flex;
	width: 100%;

	& > div {
		width: 100%;
		font-size: 14px;
		text-align: left;
	}
}

.research-buttons {
	display: flex;
	width: 100%;

	& > button {
		width: 100%;
	}
}

#research-page {
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
	height: 30px;
	font-size: 28px;
	width: 120px;
	margin: 2px;
}

#research-total-pages {
	font-size: 14px;
	font-weight: bold;
}

.graph {
	width: 800px;
	height: 600px;
	background-color: #181818;
	padding: 0px;
	margin: 5px;
}

#offline {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #181818;
	z-index: 1;
	overflow-y: scroll;
	color: white;
}

#offline-time {
	font-size: 36px;
}

.explore-div {
	position: relative;
	width: 100%;
	padding: 10px 0px;
}
.explore-div:not(:last-child) {
	border-bottom: solid 2px #075551;
}

.explore-desc {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: row wrap;
}

.explore-desc > button {
	width: 200px;
	height: 200px;
	margin: 0px 10px;
	flex: 0 0 200px;
}

.explore-desc > div {
	width: calc(100% - 220px);
	min-height: 200px;
	min-width: 400px;
	text-align: left;
}

.explore-cost {
	width: 240px;
	height: 80px;
	font-size: 12px;
}

.core-reactor-button {
	width: 300px;
	height: 150px;
	margin: 10px;
	overflow: hidden;
	position: relative;
}

.core-reactor-button * {
	pointer-events: none;
}

.core-reactor-symbol {
	position: absolute;
	right: 0px;
	bottom: -25px;
	font-size: 120px;
	font-weight: bold;
	color: black;
	opacity: 0.25;
	z-index: 0;
}

.core-reactor-desc {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 20px);
	transform: translate(-50%,-50%);
	z-index: 1;
}

.lang-button {
	width: 120px;
	height: 140px;
}

.lang-button > img {
	width: 80px;
	height: 80px;
	margin-bottom: 5px;
}

#core-assembler-grid {
	display: grid;
	grid-template-columns: repeat(4, 80px);
	grid-auto-rows: 80px;
	justify-content: center;
}

.ca-grid-btn {
	background-color: #075551;
	border: solid 2px #02302d;
	margin: 2px;
	padding: 0px;

	text-shadow: 1px 1px 0px black, 0px 0px 2px black;
	box-shadow: 2px 2px 0px black;
	font-weight: bold;

	& > div {
		font-size: 36px;
	}

	&.active {
		border-color: var(--color1);
		box-shadow: inset 0px 0px 20px var(--color1), inset 0px 0px 20px var(--color1), 2px 2px 0px black;
		background-color: var(--color2);
	}
}

#core-assembler-choose-div {
	align-items: center;
}

.ca-building {
	width: 300px;
	height: 150px;

	& > .table-center {
		align-items: center;

		font-weight: bold;
		font-size: 20px;
	}
}

.ca-building-symbol {
	content: "";
	margin: 4px;
	width: 20px;
	height: 20px;
	box-shadow: inset 0px 0px 4px var(--color1), inset 0px 0px 4px var(--color1), 2px 2px 0px black;
	background-color: var(--color2);
}

subtitle {
	display: block;
	font-size: 14px;
	margin: 5px 0px;
	font-style: italic;
}

#evolution-tree {
	display: grid;
	grid-template-columns: repeat(5, 150px);
	grid-auto-rows: auto;
	justify-content: center;
}

#evolution-tree > div {
	position: relative;
}

.evolution-tree-avilable {
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	font-size: 14px;
}

.evolution-tree-btn {
	position: relative;
	margin: 2px;
	padding: 25px 4px;
	font-size: 12px;
	min-height: 150px;
}

.evolution-tree-btn .line {
	border-color: black;
}

.evolution-tree-btn.pre-charged:not(.locked,.charged) {
	border-color: #00ac95;
	background-color: #00ffea;
	color: black;
	box-shadow: 0px 0px 10px cyan;
	cursor: pointer;
}

.evolution-tree-btn.pre-charged:not(.locked):hover,
.evolution-tree-btn.charged {
	border-color: #0089ac;
	background-color: #00aeff;
	box-shadow: 0px 0px 10px #0011ff;
	color: black;
}

.etb-name, .etb-cost {
	position: absolute;
	color: black;
	font-weight: bold;
	width: 100%;
	text-align: left;
	font-size: 12px;
}

.etb-name {
	top: 0px; left: 0px;
}

.etb-cost {
	bottom: 0px; left: 0px;
}

#sharkoid-faith-btns {
	display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

#evolution-goal-grid {
	display: grid;
	grid-template-columns: repeat(3, 300px);
	grid-auto-rows: 160px;
	justify-content: center;
}

.evolution-goal-ctn {
	font-size: 13px;
	cursor: default !important;
}

#rerun-evolution {
	width: 240px;
}

.tree-preset {
	margin: 5px 0px;
}

#ores-grid {
	display: grid;
	grid-template-columns: repeat(4, 150px);
	grid-auto-rows: 120px;
	justify-content: center;
}

.ore-grid {
	position: relative;
	background: black;
	border: solid 1px black;

	& > div {
		font-size: 14px;
		position: absolute;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
	}
}

#ores-list {
	display: flex;
	justify-content: center;
	flex-flow: row wrap;
}

.ore-list {
	width: 240px;
	margin: 2px;
}

.forge-btn {
	position: relative;

	width: 120px;
	height: 120px;

	background-size: 100%;

	cursor: pointer;
}

.forge-btn > div {
	position: absolute;
	bottom: 0px;
	right: 10px;
	font-size: 30px;
	font-weight: bold;

	text-shadow: 1px 1px 0px black, 0px 0px 1px black, 1px 1px 1px black, 0px 0px 2px black, 1px 1px 2px black;
}

#forge-description {
	min-height: 150px;
}

#particle-accel-table {
	display: grid;
	grid-template-columns: repeat(3, 250px);
	grid-auto-rows: 150px;
	justify-content: center;
}

.particle-accel-button {
	width: calc(100% - 4px);
	height: calc(100% - 44px);
}

.particle-accel-button.active {
	background-color: #303;
	border-color: black;
	animation: pab-glow 1s infinite;
}

.particle-accel-bar {
	position: relative;
	margin: 2px;
	width: calc(100% - 8px);
	height: 30px;
	border: solid 2px black;
	border-radius: 10px;
	background-color: #222;
	overflow: hidden;
}

.particle-accel-bar-proj,
.particle-accel-bar-inner,
.particle-accel-bar-outer {
	position: absolute;
	top: 0px; left: 0px;
	height: 100%;
}

.particle-accel-bar-proj {
	background-color: #444;
	width: 67%;
}

.particle-accel-bar-inner {
	background-color: #303;
	width: 33%;

	animation: pab-glow 1s infinite;
}

@keyframes pab-glow {
	from, to {
		background-color: #303;
	}
	50% {
		background-color: #525;
	}
}

.particle-accel-bar-outer {
	top: 50%;
	width: 100%;
	height: auto;
	transform: translateY(-50%);
	color: white;
	filter: drop-shadow(1px 1px 0px black) drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}

#scalings-table {
	border: solid 1px black;
	table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
}

#scalings-table td, #scalings-table th {
	border: solid 1px black;
	min-width: 200px;
	min-height: 50px;
	height: 50px;
	font-size: 14px;
}

#scalings-table.omni, #scalings-table.omni td, #scalings-table.omni th {
	border-color: white;
}

#scalings-table td {
	background-color: #0002;
}

#scalings-table th {
	background-color: #0006;
}

#black-hole-button {
	width: 350px;
	height: 350px;
	border-radius: 50%;
	font-size: 20px;

	border: solid 4px #b465ff;
	background-color: #18002e;

	animation: black-hole-glow 3s infinite ease-in-out;
}

@keyframes black-hole-glow {
	from, to {
		box-shadow: inset 0px 0px 10px #b465ff;
	}
	50% {
		box-shadow: inset 0px 0px 40px #b465ff;
	}
}

#black-hole {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 0px; height: 0px;
	content: "";

	border-radius: 50%;
	background-color: black;

	transition: width linear, height linear;
	transition-duration: 5s;

	z-index: 1;
}

#title-center {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;

	font-size: 3vw;
	color: white;

	pointer-events: none;
	opacity: 0;

	transition: opacity linear 5s;

	z-index: 1;
}

@keyframes cosmic-pattern {
	from {
		background-position: 0px 0px;
	}

	to {
		background-position: -600px 200px;
	}
}

#singularity-milestones {
	display: grid;
	grid-template-columns: repeat(4, 300px);
	grid-auto-rows: auto;
	justify-content: center;
	gap: 5px;
}

.singularity-milestone {
	border: solid 2px white;
	background-color: #0004;
	border-radius: 20px;
	min-height: 150px;
	padding: 5px 10px;
}

#remnant-upgs, .spacebase-upgs {
	display: grid;
	grid-template-columns: repeat(4, 120px);
	grid-auto-rows: auto;
	justify-content: center;
}

.remnant-upg, .small-upg {
	padding: 3px;
	border: solid 2px magenta;
	background-color: #0004;
	min-height: 120px;
	font-size: 11px;
}
.small-upg {
	border-color: white;
}
.remnant-upg.locked, .small-upg.locked {
	border: solid 2px red;
}

#solar-system {
	display: grid;
	grid-template-columns: repeat(2, 100px);
	grid-auto-rows: auto;
	justify-content: center;
}
#solar-system > button {
	font-size: 12px;
	padding: 0px;
	min-height: 80px;
}
#solar-system > button.bought {
	cursor: pointer;
}

#rocket-part-btns {
	display: grid;
	grid-template-columns: repeat(3, 120px);
	grid-auto-rows: auto;
	justify-content: center;
}

#observ-button {
	font-size: 16px;
	min-width: 300px;
	padding: 5px 10px;
}

.sb-upg-req {
	color: red;
	font-weight: bold;
	text-shadow: 1px 1px 0px black, 1px 1px 1px black;
}
.small-upg.required .sb-upg-desc, .small-upg:not(.required) .sb-upg-req {
	display: none;
}
.small-upg.required .sb-upg-req, .small-upg:not(.required) .sb-upg-desc {
	display: block;
}

#mining-tier-btn, #mining-ascend-btn {
	height: auto;
	min-height: 150px;
}

#cp-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: repeating-linear-gradient(90deg, #c5fff7, #edff9e 20px, #c5fff7 40px);
}

.constellation-boost {
	border: solid 2px white;
	background-color: #0004;
	border-radius: 20px;
	min-height: 120px;
	padding: 5px 10px;

	width: 240px;
	font-size: 14px;
}

#hadron-cutscene {
	pointer-events: none;
	position: fixed;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	opacity: 0;
	content: "";

	background: #ff8 repeating-conic-gradient(#0000 0 25%, #f802 0 50%);
	background-size: 200px 200px;
	animation: cosmic-pattern 20s linear infinite;

	transition: opacity linear;
	transition-duration: 5s;

	z-index: 1;
}

#hadron-cutscene > text-style {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3vw;
	color: white;
	opacity: 0;

	transition: opacity linear;
	transition-duration: 5s;
}

#starter-upgrades-table {
	display: grid;
	grid-template-columns: repeat(4, 240px);
	grid-auto-rows: auto;
	justify-content: center;
}

#starter-upgrades-table > button {
	min-height: 160px;
	font-size: 12px;
}

.starter-upg-title {
	min-height: 30px;
	font-weight: bold;
}
.starter-upg-desc {
	min-height: 90px;
}

.nucleobase-div {
	width: calc(100% - 14px);
	min-height: 240px;

	display: flex;
	justify-content: start;
    flex-flow: row wrap;

	border-left: solid 2px #0008;
	border-right: solid 2px #0008;

	padding: 20px 5px;

	background: linear-gradient(0deg, transparent 0px, #0004 40px, #0004 calc(100% - 80px), transparent);
}
.nucleobase-div > div {
	position: relative;
	margin: 0px 5px;
	min-height: 240px;
}
.nucleobase-div div {
	text-align: left;
}

.nucleobase-name {
	min-width: 200px;
}
.nucleobase-name > img {
	position: absolute;
	top: 40px;
	left: 0px;
	width: 200px;
}

.nucleobase-exp {
	width: 500px;
}

.gal-explore {
	position: relative;
	width: 450px;
	min-height: 285px;
	border: dashed 2px #0008;
	background-color: #0004;
	border-radius: 5px;
	padding: 5px 10px;
	margin: 5px;
}
.gal-explore.unlocked {
	border-style: solid;
}

.gal-explore-req {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: calc(100% - 20px);
}
.gal-explore-div {
	font-size: 14px;
}
.gal-explore-div .explore-cost {
	padding: 0px;
	width: 221px;
}

.gal-explore.unlocked > .gal-explore-req {
	display: none;
}
.gal-explore:not(.unlocked) > .gal-explore-div {
	display: none;
}

#dna-background {
	width: calc(100% - 4px);
	height: 200px;

	border-left: solid 2px #000;
	border-right: solid 2px #000;
	background: linear-gradient(0deg, transparent 0px, #0008 40px, #0008 calc(100% - 40px), transparent);

	padding: 20px 0px;
	position: relative;
}

#dna-texture {
	width: 100%;
	height: 100%;
	background: url('../textures/nucleobases/DNA.png');
	background-size: 200px;
	animation: dna 5s linear infinite;
}

@keyframes dna {
	from {
		background-position: 0px 0px;
	}
	to {
		background-position: -200px 0px;
	}
}

#dna-content {
	position: absolute;
	top: 50%;
	left: 0px;
	width: calc(100% - 10px);
	padding: 30px 5px;
	min-height: 100px;
	max-height: calc(100% - 60px);
	background: linear-gradient(0deg, transparent 0px, #000a 20px, #000a calc(100% - 20px), transparent);
	transform: translateY(-50%);
	color: white;

	display: grid;
	grid-template-columns: 1fr 240px;
	align-items: center;
}
#dna-content > button {
	height: 100%;
}

#dna-milestone-table {
	border: solid 1px black;
	table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
}
#dna-milestone-table tr {
	background-color: #0002;
}
#dna-milestone-table tr.completed {
	background-color: #0f04;
}
#dna-milestone-table td {
	border: solid 1px black;
	text-align: left;
	padding: 5px;
}
#dna-milestone-table td:first-child {
	font-weight: bold;
}

#worth-shark {
	position: relative;
	width: 100%;
	height: 16384px;
}
#worth-shark > div {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);

	width: 300px;
	height: 300px;
}
#worth-shark > div > div {
	width: 100%;
	height: 100%;
	background: white;
	border-radius: 50%;

	filter: blur(20px);
}
#worth-shark-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 200px;
	height: 200px;
	padding: 0px;

	background: transparent;
	border: none;
	color: black;
}

#omni-cutscene {
	pointer-events: none;
	position: fixed;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	opacity: 0;
	content: "";

	background: linear-gradient(45deg, #fff 0%, #99f8ff 100%);

	transition: opacity linear;
	transition-duration: 5s;

	z-index: 1;
}

#omni-cutscene > text-style {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3vw;
	color: white;
	opacity: 0;

	transition: opacity linear;
	transition-duration: 5s;
}

#antimatter-equivalent-div {
	min-height: 30px;
	font-size: 12px;
	color: gray;
}
#game-speed-div, #antimatter-god-div {
	font-size: 12px;
	color: gray;
}

#omni-shark-button {
	width: 400px;
	height: 120px;
}

.omni {
	border: solid 2px #c7f7ff;
	background: #0004;
	box-shadow: inset 0px 0px 10px #c7f7ff;
	color: white;
}
.omni.locked {
	border-color: red;
	background: #0004;
	color: white;
	box-shadow: inset 0px 0px 10px red;
}

#omni-rewards-table {
	gap: 10px;
}
.omni-reward-div {
	border-radius: 6px;
	padding: 3px;
	background: linear-gradient(135deg, #93a3ac, #6f6fff, #ffffff);
}
.omni-reward-div > div {
	background: #080011;
	padding: 5px;
	border-radius: 3px;

	width: 270px;
	min-height: 200px;
}

#shark-condensers-table {
	display: grid;
	justify-content: center;
    grid-template-columns: repeat(auto-fit, 240px);
    grid-auto-rows: auto;
    gap: 5px;
    margin: 5px;
}
#shark-condensers-table > button {
	min-height: 180px;
	font-size: 12px;
	padding: 5px;
}

.small-text {
	font-size: 11px;
	color: gray;
}

#undead-upgrades-table {
	display: grid;
	grid-template-columns: repeat(4, 150px);
	grid-auto-rows: auto;
	justify-content: center;
	margin-top: 10px;
}
#undead-upgrades-table > .small-upg {
	min-height: 150px;
}

#decay-chain {
	position: relative;
	display: grid;
	overflow-x: auto;

	grid-template-columns: repeat(5, 100px);
	grid-template-rows: repeat(12, 100px);
	width: 540px;
	margin: auto;

	gap: 10px;
}
#decay-chain-canvas {
	position: absolute;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	pointer-events: none;
	z-index: -1;
}

.decay-chain-btn {
	padding: 0px;
	margin: 0px;

	font-size: 12px;
	border-radius: 25px;

	cursor: pointer;
}
.decay-chain-element {
	font-size: 30px;
}
.decay-chain-element sup, .decay-chain-element sub,
#decay-table sup, #decay-table sub {
	text-align: right;
}

supsub {
    display: inline-block;
}
supsub sup,
supsub sub {
    position: relative;
    display: block;
    font-size: .5em;
    line-height: 1.2;
}
supsub sub {
    top: .3em;
}

#decay-table {
	margin-top: 8px;
	border-collapse: collapse;
}

#decay-table td {
	text-align: left;
	padding: 2px;
}

.isotope-div {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	flex-wrap: nowrap;
	padding: 10px;
	margin: 5px;

	border: solid 2px #c7f7ff;
	background: #0004;
	box-shadow: inset 0px 0px 10px #c7f7ff;
	border-radius: 5px;
}
.isotope-div > div {
	flex-shrink: 0;
	width: 64px;
	height: 64px;

	display: flex;
	justify-content: center;
	align-items: center;
}

.isotope-buttons {
	display: grid !important;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, 1fr);
}
.isotope-buttons > button {
	margin: 0px;
	padding: 0px;
	height: calc(100% - 2px);
	font-size: 24px;
}

.isotope-symbol {
	background-color: #c7f7ff;
	border-radius: 5px;
	color: black;
	font-size: 24px;
}
.isotope-symbol.locked {
	background-color: #84979b;
}

#tooltip-div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    background-color: #000e;
    min-width: 20px;
    max-width: 400px;
    min-height: 10px;
	font-size: 13px;
	padding: 5px 10px;

	border: solid 2px #444;
	border-radius: 10px;

    color: white;
    text-align: center;

    pointer-events: none;
}

#runes-div {
	display: grid;
	grid-template: 
		"a a a"
		"b c d"
		"e e e";
	gap: 8px;
	justify-content: center;
}
#runes-div > div {
	padding: 4px;
	background: #F6C7A0;
	border: solid 4px #927359;
}

#rune-top {
	grid-area: a;
	width: 808px;
}
#rune-bottom {
	grid-area: e;
	width: 808px;
	
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	min-height: 80px;
}
#rune-bottom > button {
	font-size: 11px;
}

#rune-grid {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(5, 80px);
	grid-auto-rows: 80px;

	width: 416px;

	justify-content: center;

	grid-area: c;
}

.rune-div {
	position: relative;
	background: #4d3c2f;
	clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%);
	cursor: pointer;
}
.rune-div:not(:active):hover {
	transform: scale(1.05);
}
.rune-div.empty * {
	display: none;
}
.rune-div > img {
	position: absolute;
	top: 12px;
	left: 12px;
	width: calc(100% - 24px);
}
.rune-div * {
	pointer-events: none;
}

.rune-top, .rune-bottom {
	position: absolute;
	color: white;
	font-size: 11px;
	font-weight: bold;
}
.rune-top {
	top: 0px;
	left: 0px;
	width: 100%;
}
.rune-bottom {
	bottom: 0px;
	left: 0px;
	width: 100%;
}

#rune-items {
	width: 94px;
	height: 416px;
	padding: 4px 0px 4px 4px;

	display: grid;
	gap: 4px;
	grid-template-columns: 80px;
	grid-auto-rows: 80px;

	overflow-y: scroll;

	grid-area: b;
}

#rune-effects {
	width: 250px;
	height: 416px;
	padding: 4px 0px 4px 4px;

	display: grid;
	gap: 4px;
	grid-template-columns: 1fr;
	grid-auto-rows: min-content;
	grid-auto-flow: row;

	overflow-y: scroll;

	grid-area: d;
}

.rune-effect {
	position: relative;
	color: black;
	margin-right: 4px;

	min-height: 80px;
}

.rune-effect-name {
	position: absolute;
	top: 0px;
	left: 32px;

	text-align: left;
	font-size: 11px;
}
.rune-effect-name > text-style {
	font-size: 16px;
}

.rune-effect > img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 32px;
}

.rune-effect > hr {
	margin-top: 38px;
	border-top-color: #0002;
}

.rune-effect-desc {
	text-align: justify;
	font-size: 12px;
}

#rune-top {
	color: black;

	display: grid;
	grid-template-columns: repeat(2, 1fr);

	min-height: 60px;
}

#antimatter-god-penalty {
	font-size: 16px;
}

#rune-sacrifice-btn {
	padding: 5px 10px;
	width: 400px;
	min-height: 200px;
}

#ending {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	transform: translateY(-50%);
}

#rebirth-upgrades-div {
	display: grid;
	gap: 25px;
	margin: 25px;
	justify-content: center;
	grid-template-columns: repeat(5, 100px);
	grid-auto-rows: 100px;
}

.rebirth-upgrade {
	margin: 0px;
	padding: 0px;
	background: url('../textures/rebirth/upg_test.png');
	border-color: white;
	transition: transform 150ms;
}

.rebirth-upgrade:not(:active,.locked,.bought):hover {
	transform: scale(1.1);
}
.rebirth-upgrade:not(.bought).locked {
	filter: brightness(.5);
}
.rebirth-upgrade.bought {
	box-shadow: 0px 0px 10px 2px lime;
}

#rebirth-past10-table {
	border: solid 1px white;
	table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
}
#rebirth-past10-table tr {
	background-color: #fff2;
}
#rebirth-past10-table td {
	border: solid 1px white;
	text-align: left;
	padding: 5px;
}
#rebirth-past10-table td:first-child {
	font-weight: bold;
}