:root{
--Pale-blue: hsl(225, 100%, 94%);
--Bright-blue: hsl(245, 75%, 52%);
--Very-pale-blue: hsl(225, 100%, 98%);
--Desaturated-blue: hsl(224, 23%, 55%);
--Dark-blue: hsl(223, 47%, 23%);
}

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Overpass:wght@400;700&family=Red+Hat+Display:ital,wght@0,500;0,700;0,900;1,900&display=swap');
body{
	font-family: "Red Hat Display,", sans-serif;
	background-color: var(--Pale-blue);
}

.attribution { 
		font-size: 11px;
		text-align: center;
		transform: translate(30px, 80px);
		margin-bottom:20px;
	}

.attribution a { 
		color: hsl(228, 45%, 44%);
	}

.card{
	background-color: white;
	height: 530px;
	width: 350px;
	border-radius: 15px;
	transform: translate(500px, 100px);
		
}

.avatar img{
	max-width: 100%;
	border-radius: 15px;
}

.order{
	color: var(--Dark-blue);
	font-weight: 900;
	text-align: center;
	margin-top: 2px;
}

.parrafo p{
	color:hsl(223, 47%, 23%,50%) ;
	font-weight: 300;
	text-align: center;
	font-size:x-small;
	line-height: 1.5rem;
}

.plan img{
	width: 20px;
}

.plan{
	display: flex;
	flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
	align-content: center;
	
}
.payment{
	background-color: var(--Bright-blue);
	padding:0.7rem;
	width: 300px;
	transform: translate(19px, 5px);
	border-radius: 10px;
	border: none;
	color: white;
	font-weight: 600;
	cursor: pointer;

}

div.card div.plan p span{
	color:hsl(223, 47%, 23%,50%);
	text-align: end;
	
}

div.card div.plan p span.anual{
	color: var(--Dark-blue);
	font-weight: 900;
	text-align: left;
	margin-top: 2px;
	
}

div.card div.plan p a{
	color:var(--Bright-blue);
	font-weight: 600;
	
}

.cancel{
	color:hsl(223, 47%, 23%,50%);	
	background-color:var(--Very-pale-blue);
	padding:0.5rem;
	width: 300px;
	transform: translate(19px, 20px);
	border-radius: 10px;
	border: none;
	font-weight: 600;
	cursor: pointer;
}

@media screen and (max-width: 600px ){
	
.card{
	transform: translate(0px);
	
}
.attribution{
	text-align:center;
}

}