:root {
	--red-100: hsl(26, 66%, 93%);
	--red-300: hsl(10, 100%, 79%);
	--red-500: hsl(10, 79%, 65%);
	--blue-200: hsl(186, 48%, 83%);
	--blue-300: hsl(186, 34%, 65%);
	--brown-400: hsl(28, 10%, 53%);
	--brown-950: hsl(25, 47%, 15%);
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	font-family: "DM Sans", sans-serif;
	background-color: var(--red-100);
}

.wrapper {
	max-inline-size: 23.4375rem;
	margin: 0 auto;
	padding: 4rem 1rem;

	display: grid;
	gap: 1rem;
}

.header {
	padding: 1rem;
	background-color: var(--red-500);
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 0.625rem;
	color: white;
}

.title {
	font-size: 1rem;
	font-weight: 400;
}

.balance {
	font-size: 1.5rem;
	font-weight: 700;
}

.main-container {
	background-color: white;
	padding: 1.5rem 1rem;
	border-radius: 0.625rem;
}

.spending {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--brown-950);
}

.bar-chart {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-block: 3.5rem 1.5rem;
}

.bar {
	display: grid;
	gap: 0.5rem;
	align-self: flex-end;
	position: relative;
}

.daily-amount {
	display: none;
	position: absolute;
	bottom: calc(100% + 0.5rem);
	block-size: 1.5rem;
	padding: 0.25rem;
	background-color: var(--brown-950);
	border-radius: 0.25rem;
	justify-self: center;

	color: white;
	font-size: 0.75rem;
	font-weight: 700;
}

.rectangle {
	width: 2rem;
	background-color: var(--red-500);
	border-radius: 0.25rem;
}

.rectangle:hover {
	cursor: pointer;
	background-color: var(--red-300);
}

.rectangle.active {
	background-color: var(--blue-300);
}

.rectangle.active:hover {
	background-color: var(--blue-200);
}

.day {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--brown-400);
}

.total-section {
	padding-block-start: 1.5rem;
	border-top: 2px solid var(--red-100);
}

.total-this-month {
	font-size: 1rem;
	font-weight: 400;
	color: var(--brown-400);
}

.total-info {
	display: flex;
	justify-content: space-between;
}

.total {
	font-size: 2rem;
	font-weight: 700;
}

.change {
	text-align: right;
	font-size: 1rem;
	font-weight: 700;
	color: var(--brown-950);
}

.from-last-month {
	display: block;
	color: var(--brown-400);
	font-weight: 400;
}

@media (min-width: 48rem) {
	.wrapper {
		max-inline-size: 33.75rem;
		gap: 1.5rem;
	}

	.header {
		padding: 1.5rem 2rem;
	}

	.title {
		font-size: 1.125rem;
	}

	.balance {
		font-size: 2rem;
	}

	.main-container {
		padding: 2rem 2.5rem;
	}

	.spending {
		font-size: 2rem;
	}

	.bar-chart {
		gap: 1rem;
		margin-block: 4rem 2rem;
	}

	.daily-amount {
		padding: 0.5rem;
		font-size: 1.125rem;
		block-size: 2.5rem;
	}

	.rectangle {
		inline-size: 3.125rem;
	}

	.day {
		font-size: 1rem;
	}

	.total-section {
		padding-block-start: 2rem;
	}

	.total-this-month {
		font-size: 1.125rem;
	}

	.total {
		font-size: 3rem;
	}

	.change {
		font-size: 1.125rem;
	}
}