* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
:root {
	--Blue: hsl(246, 80%, 60%);
	--Light-Red: hsl(15, 100%, 70%); /* (work) */
	--Soft-Blue: hsl(195, 74%, 62%); /* (play) */
	--Light-Red: hsl(348, 100%, 68%); /* (study) */
	--Lime-Green: hsl(145, 58%, 55%); /* (exercise) */
	--Violet: hsl(264, 64%, 52%); /* (social) */
	--Soft-Orange: hsl(43, 84%, 65%); /* (self care) */
	--Very-Dark-Blue: hsl(226, 43%, 10%);
	--Dark-Blue: hsl(235, 46%, 20%);
	--Desaturated-Blue: hsl(235, 45%, 61%);
	--Pale-Blue: hsl(236, 100%, 87%);
}
@font-face {
	font-family: Rubik;
	src: url("../fonts/Rubik-VariableFont_wght.ttf");
}
body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background-color: var(--Very-Dark-Blue);
}
main {
	font-family: Rubik;
	color: white;
	font-size: 18px;
	width: fit-content;
	display: flex;
	gap: 15px;
	margin: auto 0;
}
.flex-container-column {
	display: flex;
	flex-direction: column;
	background-color: var(--Dark-Blue);
	border-radius: 10px;
}
.top-section {
	width: 170px;
	padding: 25px 30px 60px;
	background-color: var(--Blue);
	border-radius: 10px;
}
.profile-image {
	width: 50px;
	border: 2px solid white;
	border-radius: 50%;
	margin: 0 0 10px 0;
}
.accent-text {
	color: var(--Pale-Blue);
	font-size: 12px;
	margin: 0 0 5px 0;
}
.heading-text {
	font-weight: 300;
	width: 80px;
}
.bottom-section {
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background-color: var(--Dark-Blue);
	border-radius: 0 0 10px 10px;
}
.button-text {
	color: var(--Pale-Blue);
	font-size: 12px;
	width: fit-content;
	background-color: var(--Dark-Blue);
	border: none;
	cursor: pointer;
	transition: 0.7s;
}
.button-text:hover {
	color: white;
	font-weight: 700;
}
.button-selected {
	color: white;
	font-weight: 700;
}
.grid-container-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;
}
.grid-item {
	height: fit-content;
	width: fit-content;
	display: flex;
	flex-direction: column;
	border-radius: 15px;
	margin: 0;
}
.work-grid {
	background-color: orange;
}
.play-grid {
	background-color: var(--Soft-Blue);
}
.study-grid {
	background-color: var(--Light-Red);
}
.exercise-grid {
	background-color: var(--Lime-Green);
}
.social-grid {
	background-color: var(--Violet);
}
.self-care-grid {
	background-color: var(--Soft-Orange);
}
.image-highlight {
	height: 40px;
	border-radius: 10px 10px 0 0;
	background-position: right;
	background-repeat: no-repeat;
}
.work-highlight {
	background-color: orange;
	background-image: url("../images/icon-work.svg");
}
.play-highlight {
	background-color: var(--Soft-Blue);
	background-image: url("../images/icon-play.svg");
}
.study-highlight {
	background-color: var(--Light-Red);
	background-image: url("../images/icon-study.svg");
}
.exercise-highlight {
	background-color: var(--Lime-Green);
	background-image: url("../images/icon-exercise.svg");
}
.social-highlight {
	background-color: var(--Violet);
	background-image: url("../images/icon-social.svg");
}
.self-care-highlight {
	background-color: var(--Soft-Orange);
	background-image: url("../images/icon-self-care.svg");
}
.details-section {
	padding: 20px;
	width: 170px;
	border-radius: 10px;
	background-color: var(--Dark-Blue);
	cursor: pointer;
	transition: 0.7s;
}
.details-section:hover {
	background-color: var(--Desaturated-Blue);
}
.top-details-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 20px 0;
}
.small-white-text {
	font-size: 12px;
	font-weight: 500;
}
.ellipsis-icon {
	width: 15px;
}
.hour-text {
	font-size: 32px;
	font-weight: 300;
	margin: 0 0 5px 0;
}
.previous-text {
	color: var(--Pale-Blue);
	font-size: 12px;
	font-weight: 200;
}
.attribution {
	color: white;
	font-size: 11px;
	text-align: center;
}
.attribution a {
	color: var(--Soft-Orange);
}
@media (max-width: 475px) {
	main {
		width: 90%;
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin: 30px 0;
	}
	.flex-container-column {
		display: flex;
		flex-direction: column;
		background-color: var(--Dark-Blue);
		border-radius: 10px;
	}
	.top-section {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 30px;
		background-color: var(--Blue);
		border-radius: 10px;
	}
	.profile-image {
		margin: 0;
	}
	.accent-text {
		font-size: 12px;
	}
	.heading-text {
		font-weight: 300;
		width: 100%;
	}
	.bottom-section {
		padding: 20px 30px;
		flex-direction: row;
		justify-content: space-around;
		gap: 0;
	}
	.grid-container-row {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
	}
	.grid-item {
		width: 100%;
	}
	.details-section {
		width: 100%;
		border-radius: 10px;
	}
	.output-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.previous-text {
		font-size: 16px;
	}
}