@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=Outfit:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=Outfit:wght@300;700&display=swap');

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

body{
	background-color:hsl(217, 54%, 11%) ; 
	font-family: 'Fraunces', serif;
	font-family: 'Outfit', sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:8px;
}

.main{
	display: flex;
	flex-direction: column;
}

.wrapper{
	background-color: hsl(216, 50%, 16%);
	border-radius: 20px;
	padding: 10px;
	box-shadow: 0 20px 0px 13px  hsla(210, 33%, 6%, 0.123);
}

.container{
	margin: 14px;
	display: flex;
	flex-direction: column;
	width: 20rem;
	color:hsl(0, 0%, 100%);
}

img{
	width:20rem;
	height: 20rem;
	border-radius: 10px;
	position: relative;
}

.overlay{
	background-color:hsla(178, 100%, 50%, 0.267);
	position: absolute;
	width:20rem;
	height: 20rem;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity:0;
	transition: opacity 500ms ease;
}

.overlay-img{
	object-fit: cover;
	width:40px;
	height:40px;
}	

.overlay:hover{
	opacity:1;
	cursor: pointer;
}

.card-body{
	display: flex;
	flex-direction: column;
	gap:15px
}

h2{
	font-weight: 550;
	letter-spacing: 1px;
	font-size: 22px;
	margin:0;
	transition: color 200ms ease;
}

h2:hover{
	color:hsl(178, 100%, 50%);
	cursor: pointer;
}

.text{
	font-size: 18px;
	font-weight: 300;
	margin: 0;
	color:hsl(215, 51%, 70%);
	line-height: 1.7rem;
}

.description{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.info{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:8px;
}

.etherium-icon{
	width:12px;
	height:20px;
}

.eth-txt{
	color: hsl(178, 100%, 50%);
	font-weight: 550;
	letter-spacing: 1px;
}

.days-txt{
	color:hsl(215, 51%, 70%);
}

.clock-icon{
	width:20px;
	height:20px;
}

hr{
	margin:0;
	width:100%;
	border: 1px solid hsla(215, 52%, 70%, 0.13);
}

.avatar-img{
	width:40px;
	height: 40px;
	border-radius: 50px;
	border:2px solid #fff;
}

.avatar{
	margin:0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:20px;
	color:hsl(215, 51%, 70%);
}

.avatar a{
	text-decoration: none;
	color:hsl(0, 0%, 100%);
	margin: 0;
	padding: 0;
	transition: color 200ms ease;
}

a:hover{
	color: hsl(178, 100%, 50%);
}

.attribution { 
	padding:20px;
	font-size: 12px; 
	text-align: center; 
	color: hsl(0, 0%, 100%); 
}
.attribution a { 
	color: hsl(0, 0%, 100%); 
	text-decoration: none;
	transition: color 200ms ease;
}

.attribution a:hover{
	color: hsl(178, 100%, 50%);
}