@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap');

:root {
	--very-dark-blue: hsl(233, 47%, 7%);/* main background*/
	--dark-desaturated-blue: hsl(244, 38%, 16%); /* card background */
	--soft-violet: hsl(277, 64%, 61%); /* accent */
}

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

body {
	font-family: 'Lexend Deca', sans-serif;
	background-color: hsl(233, 47%, 7%);	
}
main {
	padding:72px 24px;
	text-align: center;
}

.card {
	background-color: hsl(244, 38%, 16%);
	border-radius: 10px;
}

.img {
	background-color: hsl(277, 64%, 61%);
	border-radius: 10px 10px 0 0;
}
.img img {
	mix-blend-mode: overlay;
}
.content {
	padding:0 60px;
	margin: auto;
}

h1{
	font-family: 'Inter', sans-serif;
	color: hsl(0, 0%, 100%);
	font-weight: 700px;
	margin-bottom: 16px;
}
h1 span {
	color: hsl(277, 64%, 61%);
}
p {
	font-size: 15px;
	color: hsla(0, 0%, 100%, 0.75);
	line-height: 1.7em;
}
img {
	width: 100%;
	height: 100%;
	border-radius: 10px 10px 0 0;
}

ul {
	margin-top: 32px;
}
ul > li {
	padding-bottom: 24px;
}

li {
	list-style-type: none;
	text-transform: uppercase;
	color: hsla(0, 0%, 100%, 0.6);
	font-size: 15px;
}
li span {
	display: block;
	text-transform: lowercase;
	color: hsl(0, 0%, 100%);
	font-family: 'Inter', sans-serif;
	font-size: 20px;
}



.attribution { font-size: 11px; text-align: center; padding: 16px; color: hsla(0, 0%, 100%, 0.75);}
.attribution a { color: hsl(228, 45%, 44%); }

@media screen and (min-width: 600px){
	body{
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		margin: auto;
		padding:12px 96px;
	}
	.card {
		display: flex;
		flex-direction: row-reverse;
		text-align: left;
	}
	.card > div {
		width: 50%;
	}
	.img {
		border-radius: 0 10px 10px 0;
	}
	img {
		border-radius: 0 10px 10px 0;
	}
	ul {
		display: flex;
	}

	ul > li {
		margin-right: 48px;
	}
}