:root {
	--clr-light-red: hsl(0, 100%, 67%);
	--clr-light-red-bg: hsl(353, 100%, 98%);
	--clr-orangey-yellow: hsl(39, 100%, 56%);
	--clr-orangey-yellow-bg: hsl(33, 100%, 98%);
	--clr-green-teal: hsl(166, 100%, 37%);
	--clr-green-teal-bg: hsl(158, 73%, 97%);
	--clr-cobalt-blue: hsl(234, 85%, 45%);
	--clr-cobalt-blue-bg: hsl(240, 83%, 98%);

	--clr-light-slate-blue: hsl(252, 100%, 67%);
	--clr-light-royal-blue: hsl(241, 81%, 54%);
	--clr-violet-blue: hsla(256, 72%, 46%, 1);
	--clr-persian-blue: hsla(241, 72%, 46%, 0);

	--clr-white: hsl(0, 0%, 100%);
	--clr-pale-blue: hsl(222, 100%, 96%);
	--clr-light-lavender: hsl(241, 100%, 89%);
	--clr-light-lavender-50: hsla(241, 100%, 89%, 0.5);
	--clr-light-lavender-90: hsla(241, 100%, 89%, 0.9);
	--clr-dark-gray-blue: hsl(224, 30%, 27%);
	--clr-dark-gray-blue-50: hsla(224, 30%, 27%, 0.5);
	--clr-shadow: hsla(224, 30%, 27%, 0.1);

	font-size: clamp(50%, 0.5vw + 50%, 62.5%);
}

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

@font-face {
	font-family: "Hanken Grotesk";
	src: url(fonts/234bf52fb6d6a56a561d.ttf) format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url(fonts/1161826a8f452bc76b77.ttf) format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url(fonts/97e81bf3b3e87ffcef41.ttf) format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	font-family: "Hanken Grotesk", sans-serif;
	line-height: 1.6;
}

.visually-hidden {
	position: absolute;
	width: 0.1rem;
	height: 0.1rem;
	padding: 0;
	margin: -0.1rem;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.result-card {
	width: 100%;
	padding: 2.4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom, var(--clr-light-slate-blue), var(--clr-violet-blue));
	border-end-start-radius: 3.6rem;
	border-end-end-radius: 3.6rem;
	box-shadow: 0 1.6rem 3.2rem var(--clr-shadow);
}

.result-card__title {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--clr-light-lavender-90);
	margin-block-end: 2.4rem;
}

.result-card__score {
	width: 14.4rem;
	height: 14.4rem;
	margin-block-end: 1.8rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to top, var(--clr-persian-blue), var(--clr-violet-blue));
	border-radius: 50%;
}

.result-card__score--number {
	font-size: 5.6rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--clr-white);
}

.result-card__score--out-of {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--clr-light-lavender-50);
}

.result-card__rating {
	max-width: 26rem;
	margin-block-end: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.result-card__rating--title {
	font-size: 2.2rem;
	font-weight: 500;
	color: var(--clr-white);
	margin-block-end: 0.3rem;
}

.result-card__rating--description {
	text-align: center;
	font-size: 1.6rem;
	color: var(--clr-light-lavender-90);
	line-height: 1.4;
}

.summary-card {
	width: 100%;
	padding: 2.4rem;
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
}

.summary-card__title {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--clr-dark-gray-blue);
}

.summary-card__list {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.summary-card__item {
	padding: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 0.8rem;
}

.summary-card__item--icon {
	display: flex;
	align-items: center;
	gap: 1.4rem;
}

.summary-card__item--title {
	font-size: 1.6rem;
	font-weight: 700;
}

.summary-card__item--info {
	font-size: 1.6rem;
	font-weight: 700;
}

.summary-card__item--info span {
	color: var(--clr-dark-gray-blue-50);
}

.summary-card__item--info strong {
	margin-inline-end: 0.3rem;
	color: var(--clr-dark-gray-blue);
}

.summary-card__item--reaction {
	background-color: var(--clr-light-red-bg);
	color: var(--clr-light-red);
}

.summary-card__item--memory {
	background-color: var(--clr-orangey-yellow-bg);
	color: var(--clr-orangey-yellow);
}

.summary-card__item--verbal {
	background-color: var(--clr-green-teal-bg);
	color: var(--clr-green-teal);
}

.summary-card__item--visual {
	background-color: var(--clr-cobalt-blue-bg);
	color: var(--clr-cobalt-blue);
}

.summary-card__button {
	width: 100%;
	padding: 1.6rem;
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--clr-white);
	background-color: var(--clr-dark-gray-blue);
	border: none;
	border-radius: 3.6rem;
	cursor: pointer;
}

.summary-card__button:hover,
.summary-card__button:focus {
	background: linear-gradient(to bottom, var(--clr-light-slate-blue), var(--clr-violet-blue));
}

.summary-card__button:focus-visible {
	outline: 0.4rem solid var(--clr-white);
	outline-offset: 0.4rem;
}

.attribution {
	margin-block-end: 1.2rem;
	text-align: center;
	font-size: 1.2rem;
	color: var(--clr-dark-gray-blue-50);
}

.attribution a {
	color: var(--clr-dark-gray-blue);
	font-weight: 700;
}

.attribution a:hover,
.attribution a:focus {
	color: var(--clr-violet-blue);
}

.attribution a:focus-visible {
	outline: 0.4rem solid var(--clr-dark-gray-blue);
	outline-offset: 0.4rem;
}

@media (min-width: 48em) {
	body {
		justify-content: center;
		align-items: center;
		padding: 2.4rem;
		background-color: var(--clr-pale-blue);
	}

	main {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		max-height: 43rem;
		max-width: 65rem;
		width: 100%;
		margin-block-end: 2.4rem;
		overflow: hidden;
		border-radius: 3rem;
		background-color: white;
		box-shadow: 0 1.6rem 3.2rem var(--clr-shadow);
	}

	.result-card {
		flex: 1;
		width: auto;
		border-start-start-radius: 3rem;
		border-end-start-radius: 3rem;
		border-end-end-radius: 3rem;
		border-start-end-radius: 3rem;
		box-shadow: none;
	}

	.result-card__title {
		margin-block-end: 2.8rem;
	}

	.result-card__score {
		margin-block-end: 2.4rem;
	}

	.result-card__rating {
		margin-block-end: 2rem;
	}

	.result-card__rating--title {
		margin-block-end: 1.2rem;
	}

	.result-card__rating--description {
		max-width: 23rem;
	}

	.summary-card {
		flex: 1;
		width: auto;
		padding: 2.6rem;
		background-color: white;
	}

	.summary-card__item {
		padding: 1rem 1.4rem;
	}

	.summary-card__button {
		margin-block-start: 1rem;
		padding: 1.4rem 1.6rem;
	}
}