:root{
	/*Primary colors*/
	--Blue: hsl(246, 80%, 60%);
	--Orange: hsl(15, 100%, 70%);
	--Soft-blue: hsl(195, 74%, 62%);
	--Light-red: hsl(348, 100%, 68%);
	--Lime-green: hsl(145, 58%, 55%);
	--Violet: hsl(264, 64%, 52%);
	--Soft-orange: hsl(43, 84%, 65%);

	/*Neutral colors*/
	--Very-dark-blue: hsl(226, 43%, 10%);
	--Dark-blue: hsl(235, 46%, 20%);
	--Desaturated-blue: hsl(235, 45%, 61%);
	--Pale-Blue: hsl(240, 2%, 60%);
	--white:hsl(0, 0%, 90%);
}

body{
	font-size: 18px;
	font-family: 'Rubik', sans-serif;
	background-color: var(--Very-dark-blue);
	color: var(--white);
	padding-top: 2em;
	padding-bottom: 3em;

}
.main{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	display: grid;
}
@media screen and (min-width:1024px) {
	body{
		height: 100vh;
		display: grid;
		place-items: center;
		padding: 0;
	}
	.main{
		width:auto;
		gap:10px;
		grid-template-columns: 200px repeat(3,250px);
		grid-template-rows: repeat(2,1fr);
	}
}
.card__main{
	margin-bottom: 2em;
}
@media screen and (min-width:1024px) {
	.card__main{
		margin: 0;
		height: 400px;
		grid-row: span 2;
	}
}
.card__top{
	position: relative;
	z-index: 10;
	background-color: var(--Blue);
	border-radius: 15px;
	padding: 1.2em 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media screen and (min-width:1024px) {
	.card__top{
		flex-direction: column;
		align-items: flex-start;
		padding: 0.8em;
		height: 60%;
	}
}

.card__img{
	max-width: 20%;
	border-radius: 50%;
	border: 3px solid var(--white);
	margin-right: 15px;
}
@media screen and (min-width:1024px) {
	.card__img{
		max-width: 35%;
	}
}
.card__name{
	font-size: 1rem;
	font-weight: 400;
	margin-top: 5px;
}
@media screen and (min-width:1024px) {
	.card__name{
		font-size: 2rem;
		width: 60%;
	}
}
.card__report{
	font-size: 0.8rem;
	color: var(--Pale-Blue);
	margin-bottom: 0;
}
.card__body{
	list-style: none;
	padding: 1.5em 0;
	margin: 0;
	border-radius: 0 0 10px 10px;
	display: flex;
	justify-content: space-evenly;
	background-color: var(--Dark-blue);
	transform: translateY(-10px);
}
.card__item--active{
	color: var(--Pale-Blue);
}
@media screen and (min-width:1024px) {
	.card__body{
		height: 47.5%;
		flex-direction: column;
		align-items: flex-start;
		padding: 0.8em;
	}
	.card__item{
		cursor: pointer;
	}
	.card__item:hover{
		color: var(--Pale-Blue);
	}
}

.information__image{
	height: 100px;
	border-radius: 15px;
	position: relative;
	overflow: hidden;
}
.img{
	position: absolute;
	top: -15px;
	right: 20px;
}
.information__image--orange{
	background-color: var(--Orange);
}
.information__image--red{
	background-color: var(--Light-red);
}
.information__image--blue{
	background-color: var(--Soft-blue);
}
.information__image--green{
	background-color: var(--Lime-green);
}
.information__image--purple{
	background-color: var(--Violet);
}
.information__image--yellow{
	background-color: var(--Soft-orange);
}
.information__body{
	padding: 1em 1em;
	background-color: var(--Dark-blue);
	border-radius: 15px;
	transform: translateY(-45%);
}
@media screen and (min-width:1024px) {
	.information__body:hover{
		cursor: pointer;
		background-color: var(--Desaturated-blue);
	}
}
.information__title{
	font-size: 1.5rem;
	font-weight: 300;
}
.information__previous{
	color: var(--Pale-Blue);
	font-size: 0.9rem;
	font-weight: 300;
	margin-right: -75px;
}
@media screen and (min-width:1024px) {
	.information__previous{
		margin-right: 0;
	}
}
.top,
.bottom{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
