body {
	font-family: "Clarity City", sans-serif;
	background-color: var(--bg);
	color: var(--text);
	display: flex;
	flex-direction: column;

	padding-inline: 1rem;
}

.hidden {
	display: none!important;
}

main {
	.hidden {
		display: none;
	}

	#cover {
		height: 90vh;
		width: 100vw;

		text-align: center;

		button {
			padding: 1rem 2rem;
			background: rgb(203, 174, 250);
			background: linear-gradient(0deg, rgba(203, 174, 250, 1) 0%, rgba(129, 5, 240, 1) 100%);
			border-radius: 100rem;
			position: relative;
		
			&::before {
				content: "";
				height: 0%;
				width: 2px;
				position: absolute;
			}
		
			&:hover {
				box-shadow:
					4px 4px 6px 0 rgba(255, 255, 255, 0.5),
					-4px -4px 6px 0 rgba(116, 125, 136, 0.5),
					inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2),
					inset 4px 4px 6px 0 rgba(0, 0, 0, 0.4);
			}
		}
	}

	form {
		text-align: center;

		.back-next-button {
			display: flex;
			flex-direction: row;

			justify-content: space-between;
		}

		#goal-title, #reward-title, #goal-number,"goal-icon","goal-color","card-color" {
			display: flex;
			flex-direction: column;
		}
	}

	#card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	
	.card-layout {
		/* width: 100%;
		max-width: 24rem; */
		padding: 1.5rem;
		border-radius: 1rem;

		width: 3.5in;
		aspect-ratio: 1.75 / 1;
	}

	.punches {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0.5rem;
	}
	
	.buttons {
		display: flex;
		gap: 1rem;
		justify-content: center;
	}
}

footer {
	display: flex;
	flex-direction: column;
	align-items: center;

	gap: .2rem;

	margin-bottom: 1rem;
	position: fixed;
  	left: 0;
  	bottom: 0;
  	width: 100%;
}


/* ========================
   PRINT
======================== */
@media print {
	body * {
		visibility: hidden;
	}

	.card-layout,
	.card-layout * {
		visibility: visible;
	}

	.card-layout {
		position: absolute;
		top: 0;
		left: 0;
		width: 3.5in;
		aspect-ratio: 1.75 / 1;
		max-width: none;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.buttons,
	footer {
		display: none !important;
	}
}

/* ========================
   TABLET + DESKTOP
======================== */
@media (width > 768px) {

	footer {
		flex-direction: row;
		justify-content: space-between;
	}

	#card {
		padding: 1.5rem;
		border-radius: 1rem;

		width: 100rem;
		aspect-ratio: 1.75 / 1;
	}
}