@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,300&display=swap');

* {
	box-sizing: border-box;
}

:root {
	font-family: 'Roboto', sans-serif;
	background-color: rgb(28, 93, 119);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: auto;

	--Light-red: hsla(0, 100%, 67%, 0.1);
	--Orangey-yellow: hsla(39, 100%, 56%, 0.1);
	--Green-teal: hsla(166, 100%, 37%, 0.1);
	--Cobalt-blue: hsla(234, 85%, 45%, 0.1);

	--Light-slate-blue: hsl(252, 100%, 67%); /*background*/
	--Light-royal-blue: hsl(241, 81%, 54%); /*background*/

	--Violet-blue: hsla(256, 72%, 46%, 1); /*(circle)*/
	--Persian-blue: hsla(241, 72%, 46%, 0); /* (circle)*/

	--White: hsl(0, 0%, 100%);
	--Pale-blue: hsl(221, 100%, 96%);
	--Light-lavender: hsl(241, 100%, 89%);
	--Dark-gray-blue: hsl(224, 30%, 27%);
}

body {
	background-color: rgb(255, 255, 255);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 1440px;
	height: 100vh;
	margin-top: 200px;
}

.card-container {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	width: 578px;
	height: 400px;
	margin: 0;
	padding: 0;
	box-shadow: 3px 3px 22px rgba(0, 0, 0, 0.2);
	border: none;
	border-radius: 20px;
}

.result {
	color: var(--White);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		to bottom,
		var(--Light-slate-blue),
		var(--Light-royal-blue)
	);
	height: 100%;
	width: 50%;
	padding: 20px;
	border-radius: 20px;
}

.grade {
	background: linear-gradient(to bottom, var(--Violet-blue), var(--Persian-blue));
	font-size: 3rem;
	font-weight: 900;
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 30px 40px;
	border-radius: 50%;
}

.span {
	font-size: 0.8rem;
	letter-spacing: 0.06rem;
	font-weight: 400;
}
h4 {
	font-weight: 400;
	letter-spacing: 0.11rem;
	padding-bottom: 10px;
}
h2 {
	letter-spacing: 0.1rem;
	margin-top: 30px;
	margin-bottom: 0;
}

p {
	opacity: 60%;
	text-align: center;
	padding: 15px;
	font-size: 14px;
	margin: auto 15px;
}
.summery {
	display: flex;
	flex-direction: column;
	margin: auto;
	padding: 0;
	
}

#summery {
	font-size: 1rem;
	letter-spacing: 0.1rem;
	color: var(--Dark-gray-blue);
	font-weight: 900;
	margin-bottom: 20px;
	

}
.cell{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 0.8rem;
	font-weight: bold;
	padding:10px 10px;
	background-color: aqua;
	border-radius: 7px;
	margin: 10px;
	width:100%;
	
	

}

button{
	color:var(--White);
	background-color: var(--Dark-gray-blue);
	border-radius: 30px;
	padding:10px 80px;
	margin-top: 20px;
	border:none;
	cursor: pointer;

}

button:active{
	background: linear-gradient(to bottom, var(--Violet-blue), hsla(241, 72%, 46%, 1));

}
img{
	height:0.8rem;
	margin-right:7px
}

#reaction{
	background-color: var(--Light-red);
}
#memory{
	background-color: var(--Orangey-yellow)
}
#verbal{
	background-color: var(--Green-teal)
}
#visual{
	background-color: var(--Cobalt-blue)
}

@media only screen and (max-width: 768px) {
	.card-container{
		flex-direction: column;
		width:375px;
		height: auto;
		
	}
	.result{
		width:100%;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		
	}
	.summery{
		width:100%;
		padding: 30px;
	}
	.cell{
		padding:15px;
		border-radius: 10px;
		line-height: 1rem;
		margin: 10px auto;
		font-size: 1rem;
		
	}
	button{
		height:3rem;
		font-size: 1rem;
		
	}
	img{
		height:1rem;
		
	}
	
}