@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--light-slate-blue: hsl(252, 100%, 67%);
	--light-royal-blue: hsl(241, 81%, 54%);

	--violet-blue: hsla(256, 72%, 46%, 1);
	--persian-blue: hsla(241, 72%, 46%, 0);

	--white: hsl(0, 0%, 100%);
	--pale-blue: hsl(221, 100%, 96%);
	--light-lavender: hsl(241, 100%, 89%);
	--dark-gray-blue: hsl(224, 30%, 27%);

	--light-red: hsl(0, 100%, 67%);
	--light-red-5: hsla(0, 100%, 67%, 0.1);
	--orangey-yellow: hsl(39, 100%, 56%);
	--orangey-yellow-5: hsla(39, 100%, 56%, 0.1);
	--green-teal: hsl(166, 100%, 37%);
	--green-teal-5: hsla(166, 100%, 37%, 0.1);
	--cobalt-blue: hsl(234, 85%, 45%);
	--cobalt-blue-5: hsl(234, 85%, 45%, 0.1);
	font-family: 'Hanken Grotesk', sans-serif;
}

html {
	font-size: 10px;
}

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

body {
	background-color: var(--pale-blue);
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.card {
	display: grid;
	max-width: 73.6rem;
	background: var(--white);
	grid-template-columns: 1fr 1fr;
	border-radius: 3rem;
}

.card__results {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(
		180deg,
		var(--light-royal-blue) 0%,
		var(--light-slate-blue) 100%
	);
	border-radius: 3rem;
	padding: 4.5rem;
	gap: 4rem;
}

.results__title {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--light-lavender);
}

.results__score {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 20rem;
	height: 20rem;
	border-radius: 100%;
	background: linear-gradient(
		180deg,
		var(--violet-blue) 0%,
		var(--persian-blue) 100%
	);
}

.score__main {
	font-size: 7.4rem;
	font-weight: 800;
	color: var(--white);
}

.score__total {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--light-lavender);
}

.outcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
}

.outcome__header {
	font-size: 3.2rem;
	font-weight: 800;
	color: var(--white);
}

.outcome__text {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--light-lavender);
	text-align: center;
}

.card__summary {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 4rem;
}

.summary__heading {
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--dark-gray-blue);
}

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

.skill {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.8rem;
	border-radius: 1rem;
}

.skill--red {
	background-color: var(--light-red-5);
}

.skill--orangey {
	background-color: var(--orangey-yellow-5);
}

.skill--green {
	background-color: var(--green-teal-5);
}

.skill--blue {
	background-color: var(--cobalt-blue-5);
}

.skill__left {
	display: flex;
	gap: 1.6rem;
}

.skill__title {
	font-size: 1.8rem;
}

.skill__title--red {
	color: var(--light-red);
}

.skill__title--orangey {
	color: var(--orangey-yellow);
}

.skill__title--green {
	color: var(--green-teal);
}

.skill__title--blue {
	color: var(--cobalt-blue);
}

.skill__out-of {
	color: var(--light-lavender);
	font-size: 1.8rem;
	font-weight: 800;
}

.skill__out-of .black {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--dark-gray-blue);
}

.btn {
	padding: 1.8rem;
	border-radius: 2.4rem;
	text-align: center;
}

.btn--blue {
	color: var(--white);
	background: var(--dark-gray-blue);
	font-size: 1.8rem;
	font-weight: 800;
	transition: 0.4s background ease-in-out;
}

.btn--blue a {
	color: var(--white);
	text-decoration: none;
}

.btn--blue:hover {
	background: var(--light-royal-blue);
}

@media screen and (max-width: 64rem) {
	.card {
		grid-template-columns: 1fr;
		max-width: 40rem;
	}

	.card__summary {
		gap: 1.6rem;
	}
}