style.css

@import url(<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">);
@import url(<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">);
*{
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Inter','Lexend Deca', sans-serif;
	font-size: 15px;
	height: 100vh;
	background: hsl(233, 47%, 7%);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	overflow: visible;

}
main{
	background:hsl(244, 38%, 16%) ;
	display: flex;	
	max-height: 70vh;

} 
#content{
	padding: 50px;
	flex-basis: 50%;
}
main h1{
	color: white;
	margin-bottom: 25px;
	margin-top: 25px;
	font-size: 30px;

}
h1 span{
	color:hsl(277, 64%, 61%); 
}
#content-para{
	color: hsla(0, 0%, 100%, 0.75);
	font-weight: 400;
	line-height: 25px;
	margin-bottom: 60px;
}
#stats{
	/*width: 100%;*/
	text-align: left;
	display: flex;
	justify-content: space-between;
	margin-right:  40px;
}
#stats p{
	color: hsla(0, 0%, 100%, 0.6);
	text-transform: uppercase;
	font-size: 12px;
}
#stats p::first-line{
	color: hsl(0, 0%, 100%);
	font-size: 30px;
}
#pic{
	background: hsl(277, 64%, 61%);
}
img{
	position: relative;
	opacity: 0.4;
	height: 100%;
	width: 100%;
	
}

@media screen and (max-width: 375px){
	main{
		flex-direction: column-reverse;
		align-items: center;
		overflow: scroll;
		/*width: 300px;*/
		/*height: 300px;*/
	}
	img{
		height: 300px;
		width: 300px;
	}
	#content{
		text-align: center;
		padding: 15px;
	}
	#stats{
		flex-direction: column;
		align-items:  center;
		text-align: center;
	}
	#stats div{
		margin-bottom: 50px;

	}
}