@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Overpass:wght@400;700&display=swap');

*{
	margin:0;
	padding: 0;
	box-sizing:border-box;
}
img{
	max-width: 100%;
}
ul{
	list-style: none;
}
:root{
--Soft-blue: hsl(215, 51%, 70%);
--Cyan: hsl(178, 100%, 50%);

/* ### Neutral */

--main-BG: hsl(217, 54%, 11%);
--card-BG: hsl(216, 50%, 16%);
--line: hsl(215, 32%, 27%);
--White: hsl(0, 0%, 100%); 
}




body{
	font-family:"Outfit",sans-serif;
	background-color:var(--main-BG);
	color:hsl(0, 0%, 100%,50%);
	padding: 1.25rem;
	
}

p{
	font-size: 18px; 
}

.container{
	width: 50%;
	padding: 1.25rem;
	background-color: var(--card-BG);
	border-radius: 0.5rem;
	margin-bottom: 1rem;
}

.container .main-image {
position: relative;
cursor: pointer;
}

.container .main-image div{
position:absolute;
top: 0%;
background-color: hsl(178, 100%, 50%, 60%);
width: 100%;
height: calc(100% - 4px);
z-index:999;
opacity:0;
transition: opacity 0.3s ease-in-out;
}

.container .main-image div:hover{
opacity: 1;
cursor: pointer;
}
.container .main-image div img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

}

.container h2{
	color: var(--White);
	margin: 1rem 0.5rem 0.5rem 0;
}

.container h2:hover{
	color: var(--Cyan);
	cursor:pointer;
}
.container ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 0;
	border-bottom: 1px solid var(--line);
}

.container ul li {
	display: flex;
	align-items: center;
}

.container ul li:first-child{
	color: var(--Cyan);
}

.container ul li img{
	margin-right: 0.5rem;
}

.container .avatar {
	display: flex;
	align-items: center;
	justify-content: start;
	padding-top: 2rem;
}

.container .avatar img{
	width: 3rem;
	border: 2px solid var(--White);
	border-radius: 50%;
	margin-right: 1rem;
	
}

.container .avatar p span{
	color: var(--White);
	font-weight: 400;
}

.container .avatar p span:hover {
color: var(--Cyan);
cursor: pointer;
}

p{
	font-weight: 300;
}
.attribution { 
	font-size: 16px; 
	text-align: center;
}
.attribution a { 
	color: hsl(228, 45%, 44%); 
}

@media (min-width: 280px) {
	.container{
		width: 250px;
		margin: 0 auto 1rem;
	}

	.attribution{
		width: 250px;
		margin: 0 auto 1rem;
	}

	body{
		font-size: 12px;
	}
}