/* Variables */
:root {
	/* ## Colors */

	/* ### Primary */

	--blue-400: hsl(246, 80%, 60%);

	--red-300-work: hsl(15, 100%, 70%);
	--soft-blue-400-play: hsl(195, 74%, 62%);
	--soft-red-300-study: hsl(348, 100%, 68%);
	--lime-green-500-exercise: hsl(145, 58%, 55%);
	--violet-500-social: hsl(264, 64%, 52%);
	--soft-orange-selfcare: hsl(43, 84%, 65%);

	/* ### Neutral */

	--blue-900: hsl(226, 43%, 10%);
	--blue-800: hsl(235, 46%, 20%);
	--desaturated-blue-400: hsl(235, 45%, 61%);
	--blue-200: hsl(236, 100%, 87%);

	/* ## Typography */

	/* ### Body Copy */

	--fs-card-title: 1.125rem;

	/* ### Font */

	--ff: RubiK, sans-serif;
	--ff-dots: Roboto, sans-serif;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-bold: 500;
}

/* CSS Reset */

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2. Remove default margin */
* {
	margin: 0;
}

body {
	/* 3. Add accessible line-height */
	line-height: 1.5;
	/* 4. Improve text rendering */
	-webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
	font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
	text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

/*
    9. Create a root stacking context
  */
#root,
#__next {
	isolation: isolate;
}

/* Common styles */

body {
	background-color: var(--blue-900);
	display: grid;
	place-items: center;
	padding: 2rem 1.25rem;
	font-family: var(--ff);
	height: 100vh;
}

.dashboard {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	max-width: 76.5rem;
}

.dashboard__main {
	border-radius: 1rem;
	background-color: var(--blue-800);
	display: flex;
	flex-direction: column;
}

.dashboard__user {
	display: flex;
	background-color: var(--blue-400);
	border-radius: 1rem;
	padding: 1.5rem;
	gap: 1rem;
	flex-grow: 1;
}

.dashboard__user-img {
	width: 3.5rem;
	height: 3.5rem;
	border: 3px solid white;
	border-radius: 50%;
}
.dashboard__user-name {
	color: var(--blue-200);
	font-size: 0.875rem;
}

.dashboard__user-name h1 {
	color: whitesmoke;
	font-weight: var(--fw-light);
	font-size: 2rem;
	line-height: 1.2;
}

.dashboard__list {
	display: flex;
	list-style: none;
	justify-content: space-evenly;
	gap: 3rem;
	padding: 1.5rem 2rem;
	color: var(--desaturated-blue-400);
}

.dashboard__list-item {
	transition: color 0.3s;
	cursor: pointer;
}

.dashboard__list-item:hover,
.active {
	color: white;
}

.dashboard__cards {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-direction: column;
	width: 100%;
}

.dashboard__card {
	border-radius: 1rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
}

.dashboard__card img {
	align-self: flex-end;
	margin-right: 1.25rem;
	position: absolute;
	top: -1rem;
}

.dashboard__card:nth-child(1) {
	background-color: var(--red-300-work);
}

.dashboard__card:nth-child(2) {
	background-color: var(--soft-blue-400-play);
}

.dashboard__card:nth-child(3) {
	background-color: var(--soft-red-300-study);
}

.dashboard__card:nth-child(4) {
	background-color: var(--lime-green-500-exercise);
}

.dashboard__card:nth-child(5) {
	background-color: var(--violet-500-social);
}

.dashboard__card:nth-child(6) {
	background-color: var(--soft-orange-selfcare);
}

.card {
	background-color: var(--blue-800);
	padding: 1.5rem;
	border-radius: 1rem;
	padding-bottom: 3rem;
	margin-top: 2rem;
	z-index: 10;
	cursor: pointer;
	transition: background-color 0.7s;
}

.card:hover {
	background-color: var(--desaturated-blue-400);
}

.card__title {
	color: white;
	display: flex;
	justify-content: space-between;
	font-size: var(--fs-card-title);
	font-weight: var(--fw-bold);
}

.card__title-dots {
	color: var(--blue-200);
	font-size: 2rem;
	line-height: 0.5;
	font-family: var(--ff-dots);
	cursor: pointer;
}

.card__title-dots:hover {
	color: white;
}

.card__content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem 0;
}

.card__hours {
	font-size: 2rem;
	line-height: 1.25;
	color: white;
	font-weight: var(--fw-light);
}

.card__previous {
	color: var(--blue-200);
	font-size: 0.875rem;
	text-transform: capitalize;
}

@media (min-width: 48rem) {
	.dashboard {
		flex-direction: row;
	}
	.dashboard__user {
		max-height: 80%;
		flex-direction: column;
	}

	.dashboard__list {
		flex-direction: column;
		gap: 1rem;
	}
	.dashboard__cards {
		flex-wrap: wrap;
		flex-direction: row;
		row-gap: 2rem;
		justify-content: space-between;
		min-width: 85%;
		padding: 0 3rem;
	}

	.dashboard__card {
		max-width: 30%;
	}

	.dashboard__user-name h1 {
		padding-right: 2rem;
	}

	.card {
		padding-bottom: 1rem;
	}

	.card__content {
		flex-direction: column;
		align-items: flex-start;
	}
}