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

img {
	max-width: 100%;
	display: block;
}
* {
	margin: 0;
}
h1,
h2,
h3 {
	font-weight: inherit;
	font-size: inherit;
}
button {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	font-family: inherit;
	border: none;
}

:root {
	--primary-light-red: hsl(0, 100%, 67%);
	--primary-orangey-yellow: hsl(39, 100%, 56%);
	--primary-green-teal: hsl(166, 100%, 37%);
	--primary-cobalt-blue: hsl(234, 85%, 45%);

	--bg-light-red: hsla(0, 100%, 67%, 0.06);
	--bg-orangey-yellow: hsla(39, 100%, 56%, 0.06);
	--bg-green-teal:  hsla(166, 100%, 37%, 0.06);
	--bg-cobalt-blue: hsla(234, 85%, 45%, 0.06);

	
	/* Gradients */
	
	--light-slate-blue-bg: hsl(252, 100%, 67%);
	--light-royal-blue-bg: rgb(46, 43, 233);
	
	--violet-blue-circle: hsla(256, 72%, 46%, 1);
	--persian-blue-circle: hsla(241, 72%, 46%, 0);
	

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

body {
	font-family: "Hanken Grotesk";
   font-weight: 500;
	font-size: 18px;

	height: 100vh;
   margin: 0;
	padding: 1rem;
   background-color: var(--pale-blue);

   display: flex;
   justify-content: center;
   align-items: center;
}
h1{
	font-size: 32px;
	color: var(--white);
}
h2 {
	color: transparent;
	font-size: 26px;
	font-weight: 600;
}

.title {
	color: var(--light-lavender);
}
.transperant {
	opacity: 0.5;
}
.text {
	color: var(--light-lavender);
}


button {
	padding-block: 1rem;
	border-radius: 2rem;
	color: var(--white);
	background-color: var(--dark-gray-blue);
	cursor: pointer;
}
button:hover {
	background: linear-gradient(var(--light-slate-blue-bg), var(--light-royal-blue-bg));
}


.card {
	width: 100%;
	height: fit-content;
	max-width: 650px;
	display: flex;
	/* overflow: hidden; */
	border-radius: 1.5rem;
	background-color: var(--white);
	box-shadow: 7px 7px 12px 0px rgba(71,69,224,0.15);
}

.results {
	width: 50%;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
	border-radius: 1.5rem;
	background: linear-gradient(var(--light-slate-blue-bg), var(--light-royal-blue-bg));
}
.circle {
	width: 170px;
	height: 170px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--light-lavender);
	background: linear-gradient(var(--violet-blue-circle), var(--persian-blue-circle));
}
.big-score{
	font-size: 68px;
	font-weight: 800;
	color: var(--white);
}

.summary {
	width: 50%;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	color: var(--dark-gray-blue);
}
.summary h2 {
	color: var(--dark-gray-blue);
}
.categories {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.category {
	display: flex;
	justify-content: space-between;
	padding: 1rem;
	border-radius: 10px;
	background-color: var(--light-lavender);
}
.category-info {
	display: flex;
	gap: 10px;
}
.score {
	display: flex;
	font-weight: 800;
}
.score span{
	margin-left: 6px;
}

.reaction {
	background-color: var(--bg-light-red);
}
.memory {
	background-color: var(--bg-orangey-yellow);
}
.verbal {
	background-color: var(--bg-green-teal);
}
.visual {
	background-color: var(--bg-cobalt-blue);
}


.reaction h3{
	color: var(--primary-light-red);
}
.memory h3{
	color: var(--primary-orangey-yellow);
}
.verbal h3{
	color: var(--primary-green-teal);
}
.visual h3{
	color: var(--primary-cobalt-blue);
}


@media(max-width: 580px) {
	body{
		height: 100%;
		padding: 0;
		background-color: transparent;
	}
	.card{
		height: 100%;
		flex-direction: column;
		border-radius: 0;
		box-shadow: none;
	}
	.results {
		width: 100%;
		border-radius: 0 0 1.5rem 1.5rem;
	}
	.summary{
		width: 100%;
	}
}