@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Karla:wght@400;700&family=League+Spartan:wght@400;500;700&family=Lexend+Deca&family=Open+Sans&family=Poppins:wght@200;400;600&display=swap');

:root{
	--pseudo-width: 100%;
	--pseudo-height:4px;
	--pseudo-border-radius: 40rem 40rem 0 0;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-outline: 2px solid rgba(0, 0, 0, 0.164);
}

body{
	font-family: 'Big Shoulders Display', cursive;
	font-family: 'Karla', sans-serif;
	font-family: 'League Spartan', sans-serif;
	font-family: 'Lexend Deca', sans-serif;
	font-family: 'Open Sans', sans-serif;
	font-family: 'Poppins', sans-serif;
	background-color: hsl(0, 0%, 98%);
}

main{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 1rem;
}

.container{
	display: flex;
	flex-direction: column;
	gap:3rem;
}

.main-text-area{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: center;
	max-width: 29rem;
}

.title-text{
	display: flex;
	flex-direction: column;
	gap:0rem;
	text-align: center;
	color:hsl(234, 12%, 34%);
}

.title-text h1{
	font-size:2rem;
	font-weight: 200;
}

.title-text h2{
	font-size: 2rem;
	font-weight: 600;
}

.title-text p{
	font-size: 0.85rem;
	color:hsl(229, 6%, 66%);
}

.card-container{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap:1.5rem;
}

.card{
	max-width: 25rem;
	padding: 2rem;
	display:flex;
	flex-direction: column;
	gap:2rem;
	border-radius:4px 4px 8px 8px;
	background-color: white;
	box-shadow: 0px 18px 18px  hsla(212, 48%, 49%, 0.171);
}

.card-text{
	max-width:16rem;
	display: flex;
	flex-direction: column;
	gap:0.5rem;
}

.card-text h3{
	font-size: 1.2rem;
	color:hsl(234, 12%, 34%);
}

.card-text p{
	font-size: 0.75rem;
	color: hsl(229, 6%, 66%);
}

.svg{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-self: right;
}

.middle-card{
	display: flex;
	flex-direction: column;
	gap:1.5rem;
}

.left-card, .top-card, .bottom-card, .right-card{
	max-width: 24.5rem;
	position: relative;
}

.left-card::before, .top-card::before, .bottom-card::before, .right-card::before{
	content: " ";
	height: var(--pseudo-height);
	width: var(--pseudo-width);
	position: absolute;
	border-radius: 50px 50px 0 0 ;
}

.left-card::before{
	background-color: hsl(180, 62%, 55%);
}

.top-card::before{
	background-color: hsl(0, 78%, 62%);
}

.bottom-card::before{
	background-color: hsl(34, 97%, 64%);
}

.right-card::before{
	background-color: hsl(212, 86%, 64%);
}

@media screen and (max-width: 900px) {
	.container{
		padding:1rem;
		gap: 5rem;
	}
	.main-text-area{
		gap:0.2rem;
	}
	.title-text{
		gap: 0.4rem;
	}
	.card-container{
		flex-direction: column;
	}
}

@media screen and (max-width: 470px) {
	.title-text h1{
		font-size: 1.5rem;
	}
	.title-text h2{
		font-size: 1.5rem;
	}
}