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

* {
	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 {
	content: '';
	display: block;
	width: 100%;
	margin-top: 6px;
	height: 6px;
	border-top: solid 2px white;
}

.main-line {
	width: 100%;
	border-bottom: solid 2px #11857f;
	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:hover {
	transform: scale(0.98); /* Slight "pressed" effect */
}
button {
	cursor: pointer;
	color: white;
	background-color: #11857f;
	border: solid 2px #075551;
	border-radius: 5px;
	font-size: 14px;
	transition: all 0.3s ease;
}

button:not(.elements) {
	padding: 0px 10px;
	margin: 2px;
}

button.elements {
	cursor: pointer;
	color: white;
	border-radius: 5px;
	font-size: 14px;
	transition: all 0.3s ease;

	height: 50px;
	width: 50px;
}



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, .infinity-upgrade, .core, .evo, .bh ,.inf):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:not(.core,.evo,.bh,.inf), button:not(.pre-charged,.locked,.bought,.ca-grid-btn,.evolution-goal-ctn,#black-hole-button,.remnant-upg,.small-upg, .infinity-upgrade, .core, .evo, .bh ,.inf,.tab-button):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;
	}
}

.locked, .bought, .required {
	cursor: default;
}
:not(.remnant-upg,.small-upg,.bought,.core, .bh ,.inf, .evo,.tab-button).locked {
	background-color: #043d3a;
	border-color: #02302d;
	color: #f44;
}

.bought:not(.infinity-upgrade, .evo, .core, .bh ,.inf) {
	background-color: #11853e;
	border: solid 2px #07552e;
	color: #8f8;
}

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

.tab-button.stab {
	font-size: 16px;
	padding: 0px 10px;
	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, lightseagreen 80px);
	z-index: -1;
}

#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;
}

button.core {
	background-color: rgb(255, 60, 0);
	border: solid 2px darkred;
}

button.core:hover {
	background-color: rgb(185, 43, 0);
	border: solid 2px darkred;
}

button.core.locked, .tab-button.selected.core {
	background-color: rgb(121, 28, 0);
	border: solid 2px darkred;
}

button.evo:not(.charged,.pre-charged, .locked) {
	background-color: rgb(30, 255, 0);
	border: solid 2px darkgreen;
}

button.evo.bought:not(.charged,.pre-charged) {
	background-color: rgb(136, 255, 0);
	border: solid 2px darkgreen;
}

button.evo:hover:not(.charged,.pre-charged, .tab-button.selected, .bought, .locked) {
	background-color: rgb(23, 196, 0);
	border: solid 2px darkgreen;
}

button.evo.locked:not(.charged,.pre-charged, .bought), .tab-button.selected.evo {
	background-color: rgb(13, 114, 0);
	border: solid 2px darkgreen;
}

button.bh {
	background-color: rgb(204, 0, 255);
	border: solid 2px rgb(80, 0, 100);
}

button.bh.bought {
	background-color: rgb(174, 0, 255);
	border: solid 2px rgb(80, 0, 100);
}

button.bh:hover {
	background-color: rgb(139, 0, 173);
	border: solid 2px rgb(80, 0, 100);
}

button.bh.locked, .tab-button.selected.bh  {
	background-color: rgb(82, 0, 102);
	border: solid 2px rgb(80, 0, 100);
}

button.inf {
	background-color: rgb(255, 196, 0);
	border: solid 2px rgb(66, 51, 0);
}

button.inf.bought {
	background-color: rgb(208, 255, 0);
	border: solid 2px rgb(41, 66, 0);
}

button.inf:hover {
	background-color: rgb(172, 132, 0);
	border: solid 2px rgb(66, 51, 0);
}

button.inf.locked, .tab-button.selected.inf  {
	background-color: rgb(88, 68, 0);
	border: solid 2px rgb(66, 51, 0);
}

.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;
}

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

.ca-grid-btn, .cra-grid-btn {
	background-color: rgb(255, 60, 0);
	border: solid 2px darkred;
	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, #corrupted-assembler-choose-div  {
	align-items: center;
}

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

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

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

.ca-building-symbol, .cra-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: rgb(0, 51, 4);
	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: rgb(2, 51, 0);
	}
	50% {
		background-color: rgb(38, 85, 34);
	}
}

.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 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, .infinity-upgrades-div {
	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;
}

@keyframes inf_reset_1 {
	0% {transform:scale(1); filter:blur(0px); opacity: 1;}
	80% {transform:scale(3,0); filter:blur(5px); opacity: 0;}
	90% {transform:scale(1); filter:blur(0px); opacity: 0;}
	100% {opacity: 1;}
}

/* Base styling */
.infinity-upgrade {
	border: solid 2px rgb(218, 178, 0);
	background-color: rgb(255, 208, 0);
	border-radius: 20px;
	min-height: 150px;
	padding: 5px 10px;
	transition: all 0.3s ease; /* Smooth transitions for hover effects */
  }
  
  /* Hover state */
  .infinity-upgrade:hover {
	border-color: rgb(255, 255, 100);
	background-color: rgb(255, 230, 100);
	cursor: pointer; /* Indicates interactability */
  }
  
  /* Clicked state */
  .infinity-upgrade:active {
	border-color: rgb(180, 140, 0);
	background-color: rgb(230, 180, 0);
	transform: scale(0.98); /* Slight "pressed" effect */
  }
  
  .infinity-upgrade.bought {
	border-color: rgb(0, 200, 0); /* Green to indicate purchase */
	background-color: rgb(150, 255, 150);
  }
  
  /* Locked state */
  .infinity-upgrade.locked {
	border-color: rgb(150, 150, 150);
	background-color: rgb(200, 200, 200);
	pointer-events: none;
  }

  .corrupted-dimension {
	padding: 3px;
	width: 150px;
	height: 150px;
	font-size: 15px;
}

#corrupted-dimensions {
	display: grid;
	grid-template-columns: repeat(4, 150px);
	grid-auto-rows: auto;
	justify-content: center;
	gap: 5px;
}
  



.elements-container {
    margin: auto;
    width: fit-content;
}

#choosedDiv {
	height: 0px;
}