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

:root {
	/* Primary Colors */
	--very-dark-magenta: hsl(300, 43%, 22%);
	--soft-pink: hsl(333, 80%, 67%);

	/* Neutral Colors */
	--dark-grayish-magenta: hsl(303, 10%, 53%);
	--light-grayish-magenta: hsl(300, 24%, 96%);

	/* Font */
	--league-spartan: sans-serif;
}

body {
	font-size: 15px;
	font-family: var(--league-spartan);
	background-image: url("../images/bg-pattern-top-mobile.svg");
	background-repeat: no-repeat;
	background-position: right top;
}

main {
	background-image: url("../images/bg-pattern-bottom-mobile.svg");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: auto 50%;
}

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 0;
	overflow: hidden;
}

.border-radius {border-radius: 10px;}

.texts-title {
	color: var(--soft-pink);
	font-size: 30px;
	font-weight: 900;
	text-align: center;
	position: relative;
}

.texts-title::after {
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-text);
	text-shadow: 0 0 20px rgb(238,103,164,0.5);
	filter: blur(10px) brightness(0);
	animation: change-color 2s 0.5s linear infinite;
	pointer-events: none;
	color: var(--soft-pink)
}

@keyframes change-color {
	0%{
		filter: blur(5px) brightness(0.5);
	}
	3%{
		filter: blur(5px) brightness(0);
	}
	6%{
		filter: blur(5px) brightness(0);
	}
	7%{
		filter: blur(5px) brightness(1);
	}
	8%{
		filter: blur(5px) brightness(0);
	}
	9%{
		filter: blur(5px) brightness(1);
	}
	10%{
		filter: blur(5px) brightness(0);
	}
	20%{
		filter: blur(5px) brightness(1);
	}
	50%{
		filter: blur(5px) brightness(1);
	}
	99%{
		filter: blur(5px) brightness(0);
	}
	100%{
		filter: blur(5px) brightness(1);
	}
}


.texts-description {
	color: var(--dark-grayish-magenta);
	text-align: center;
	margin-top: 20px;
}

.stars__container {text-align: center;}

.star:not(:nth-of-type(5)) {margin-right: 5px;}

.rated__container {margin-top: 40px;}

.rated__item {
	width: 100%;
	background: var(--light-grayish-magenta);
	padding: 20px 5px;
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.1);
}

.rated__item:not(:nth-of-type(3)) {
	margin-bottom: 20px;
}

.rated-text {
	font-size: 17px;
	color: var(--very-dark-magenta);
	text-align: center;
	margin-top: 10px;
}

.card__container, .texts {
	width: 97%;
	max-width: 550px;
	margin: 0 auto;
}

/* CARDS */
.card__container {margin-top: 70px;}

.card {
	background: var(--very-dark-magenta);
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.1);
	padding: 30px;
}

.card:not(:nth-of-type(3)) {margin-bottom: 20px;}

.card__header {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.header-img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-size: cover;
	margin-right: 20px;
}

.header-name {
	color: var(--light-grayish-magenta);
	font-weight: 700;
	font-size: 13px;
}

.header-description {
	color: var(--soft-pink);
	font-size: 13px;
	font-weight: 700;
	margin-top: 5px;
}

.card-review {
	color: var(--light-grayish-magenta);
	text-align: left;
	line-height: 1.4;
}


@media screen and (min-width: 900px) {
	body { background-image: url("../images/bg-pattern-top-desktop.svg");}

	main {
		background-image: url("../images/bg-pattern-bottom-desktop.svg");
		background-position: bottom center;
	}

	.texts, .card__container {
		max-width: 97%;
	}

	.texts {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.texts-title {
		font-size: 45px;
		text-align: left;
	}

	.texts-description {
		text-align: left;
	}

	.main__texts  { width: 40%;}

	.rated__container {
		width: 55%;
	}

	.rated__container {
		margin-top: 0;
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: 60px;
		grid-gap: 15px;
	}

	.rated__container .rated__item {
		margin-bottom: 0;
		width: 80%;
		height: 100%;
		padding: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.rated__container .rated__item:nth-of-type(2) {
		justify-self: center;
	}
	.rated__container .rated__item:nth-of-type(3) {
		justify-self: end;
	}

	.rated-text {
		margin-top: 0;
		font-size: 15px;
	}

	.star:not(:nth-of-type(5)) {margin-right: 0;}

	.star {width: 15px;}

	.card__container {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-auto-rows: 320px;
		grid-gap: 20px;
	}

	.card__container .card {
		margin-bottom: 0;
		max-width: 350px;
		font-size: 16px;
	}

	.card__container .card:first-child {
		align-self: start;
	}

	.card__container .card:nth-of-type(2) {
		align-self: center;
	}

	.card__container .card:last-child {
		align-self: end;
	}
}