:root {
	--color-primary: #38b6ff;
	--color-level-4: #212121;
	--color-level-3: #424242;
	--color-level-2: #616161;
	--color-level-1: #757575;
}

* {
	box-sizing: border-box;
}

body {
	font-family: "Nunito", sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
	background-color: #FAFAFA;
}

main {
	width: 100%;
	max-width: 860px;
	padding: 2rem;
	padding-top: 0;
}

.main-bg {
	background-color: var(--color-primary);
}

.main-bg main {
	padding: 5rem 0;
	text-align: center;
}

.main-img {
	width: 17.5rem;
	margin-bottom: 2rem;
}

.main-title,
.main-subtitle {
	margin: 0;
	padding: 0.25rem 0;
}

.main-title {
	color: var(--color-level-3);
	font-size: 2.6rem;
	font-weight: 800;
}

.main-subtitle {
	color: var(--color-level-2);
	font-size: 1rem;
	font-weight: 700;
}

.main-btn {
	display: inline-block;
	font-size: 2rem;
	font-weight: 800;
	padding: 0.5rem 3rem;
	text-decoration: none;
	color: #C62828;
	background-color: #FAFAFA;
	border-radius: 1rem;
	margin-top: 2rem;
}

.heading {
	text-align: center;
	margin: 1rem 0;
	margin-top: 4rem;
	padding: 0.5rem;
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--color-level-4);
}

.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 2rem 2.5rem;
	padding-bottom: 5rem;
	background-color: var(--color-primary);
	border-bottom-left-radius: 2rem;
	border-bottom-right-radius: 2rem;
}

.header + main {
	margin-top: -3rem;
}

.header-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-level-3);
	font-size: 1.2rem;
	font-weight: 500;
	text-decoration: none;
}

.header-btn-text {
	margin: 0 1rem;
}

.hero {
	display: flex;
	flex-direction: row;
	margin: 2rem 0;
	gap: 2rem;
	text-align: center;
}

.hero-item {
	flex: 1;
	text-decoration: none;
	color: var(--color-level-3);
	background-color: var(--color-primary);
	padding: 1rem;
	border-radius: 1rem;
	transition: all 0.1s ease-in-out;
}

.hero-item:hover {
	transform: scale(1.1);
}

.hero-img {
	height: 10rem;
	margin: 3rem 0;
}

.hero-box-img {
	width: 100%;
	border-radius: 1rem;
	margin-bottom: 2rem;
}

.hero-title {
	font-size: 1.6rem;
	font-weight: 800;
	text-align: center;
	margin: 0;
	padding: 0;
}

@media (max-width: 600px) {
	.hero {
		flex-direction: column;
	}
}


.list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.list-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: var(--color-primary);
	padding: 1rem;
	border-radius: 1rem;
	text-decoration: none;
	transition: all 0.1s ease-in-out;
}

.list-item:hover {
	transform: scale(1.1);
}

.list-img {
	height: 6rem;
	border-radius: 0.5rem;
}

.list-title {
	padding: 0;
	margin: 0 1.5rem;
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-level-3);
}

.diet {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.diet-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	background-color: var(--color-primary);
	padding: 1rem;
	border-radius: 1rem;
	gap: 1.5rem;
}

.diet-img {
	width: 20rem;
	border-radius: 0.75rem;
}

.diet-wrap {
	margin: -0.5rem 0;
}

.diet-title {
	color: var(--color-level-3);
	font-size: 1.4rem;
	font-weight: 800;
	margin: 0;
	padding: 0.25rem 0;
}

.diet-percentage {
	width: 10rem;
	height: 1rem;
	margin: 0.25rem 0;
	border-radius: 0.5rem;
	background-color: #E3F2FD;
	overflow: hidden;
}

.diet-percentage-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #E3F2FD;
	background-color: #0D47A1;
	font-size: 0.6rem;
	font-weight: 600;
}

.diet-menu {
	background-color: #E3F2FD;
	margin: 0.5rem 0;
	padding: 0.5rem 2rem;
	border-radius: 0.75rem;
}

.diet-menu li {
	color: var(--color-level-2);
	font-size: 1rem;
	font-weight: 500;
	margin: 0.5rem 0;
}

@media (max-width: 600px) {
	.diet-item {
		flex-direction: column;
	}
	.diet-img {
		width: 100%;
	}
}

.training {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
}

.training-item {
	width: calc(50% - 0.5rem);
	display: flex;
	flex-direction: column;
	background-color: var(--color-primary);
	padding: 1rem;
	border-radius: 1rem;
}

.training-img {
	width: 100%;
	border-radius: 0.75rem;
	margin-bottom: 0.5rem;
}

.training-title {
	color: var(--color-level-3);
	font-size: 1.8rem;
	font-weight: 800;
	text-align: center;
	margin: 0;
	padding: 0.5rem 0;
}

.training-description {
	color: var(--color-level-2);
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0.5rem;
	padding: 1rem;
	background-color: #FAFAFA;
	border-radius: 0.5rem;
}

@media (max-width: 600px) {
	.training-item {
		width: 100%;
	}
}