ui/buyphasepanel.razor.scss
BuyPhasePanel {
	position: absolute;
	//min-width: 60%;
	//height: 87%;
	//width: 80%;
	//width: 90%;
	//bottom: 10px;
	display: flex;
	//justify-content: space-between;
	justify-content: space-evenly;
	align-items: center;
	flex-direction: column;
	padding: 8px;

	.inner_container {
		flex-direction: column;
		background-color: #000000aa;
		backdrop-filter: blur(12px);
		border: 4px solid #000000aa;
		border-radius: 15px;
		justify-content: space-evenly;
		padding: 8px;
	}

	.title {
		font-size: 55px;
		color: #ffffffaa;
		//padding-top: 2px;
		justify-content: center;
		text-stroke: 14px black;
		text-shadow: 2px 25px 10px #000000;
		padding-bottom: 16px;
	}

	.item_container {
		width: 90%;
		//background-color: #ff000011;
		gap: 8px;
		flex-direction: row;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		//align-items: center;
		padding: 10px;
	}

	.done_button {
		//width: 300px;
		height: 80px;
		font-size: 55px;
		color: #dddddd;
		justify-content: center;
		align-items: center;
		pointer-events: all;
		border-radius: 8px;
		transform: scale( 1 );
		transition: all 0.05s ease-out;
		//background-color: #ffffff05;
		text-stroke: 14px black;
		margin-top: 16px;

		&:hover {
			color: #ffffff;
			//background-color: #153582;
			//color: #eee;
			//opacity: 0.8;
			transform: scale( 1.01 );
		}

		&:active {
			color: #ffff88;
			//background-color: #3555d2;
			//color: #fff;
			//opacity: 1;
			transform: scale( 1.02 );
		}

		.button_icon {
			width: 90px;
			height: 90px;
			//border: 1px solid black;
			margin: 4px;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center center;
			filter: drop-shadow(2px 25px 12px #00000088);
		}

		.button_text {
			pointer-events: none;
			padding-bottom: 4px;
			padding-left: 10px;
			text-shadow: 2px 25px 10px #000000;
		}
	}
}