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

body {
	background-color:   hsl(217, 54%, 11%);
	font-family: "outfit","sans-serif";
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 100vh;
}

.card-container {
	padding: 15px;
	margin: 150px auto;
	background-color:   hsl(217, 54%, 11%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	color: white;
	box-shadow: 50px;
}

.card {
	background-color:  hsl(216, 50%, 16%) ;
	max-width: 340px;
	padding: 25px;
	border-radius: 10px;
}

.image-container {
	width: 100%;
	cursor: pointer;
	position: relative;
	height: 300px;
}
.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:hsl(178, 100%, 50%) ;
	border-radius: 10px;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.image-overlay img {
	position: absolute;
	top: 40%;
	left: 42%;
	transition: translate (-50%,-50%);
}

.image-container:hover .image-overlay {
	opacity: 1;
}

.card .image-container > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.card > p {
	color:  hsl(215, 51%, 70%) ;
	font-size:17px;
}

h2 {
	margin: 15px 0;
}

.info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
	margin-bottom: 40px;
	width: 100%;
}

.price {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	color: hsl(178, 100%, 50%) ;
	font-weight: 600;
}

.time-left {
	display: flex;
	align-items: center;
	gap: 7px;
	color: hsl(215, 51%, 70%) ;
}

.eth-container ,
.clock-container {
	display: flex;
	justify-content: center;
}

.line {
	background-color: hsl(215, 51%, 70%) ;
	height: 1px;
	width: 100%;
}

.author {
	margin-top: 15px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}
.author .author-container {
	height: 35px;
	width: 35px;
	border-radius: 50%;
	padding: 1px;
	border: 1px solid white;
}

.author .author-container img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.author p {
	color:  hsl(215, 51%, 70%);
}

.author .name {
	color: white ;
	cursor: pointer;
	text-transform: capitalize;
}

.author .name:hover {
	color: hsl(178, 100%, 50%);
}