@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');

body {
	background-color: hsl(217, 54%, 11%);
	display: grid;
	flex-direction: column;
	justify-items: center;
	justify-content: center;
	font-family: 'Outfit', sans-serif;
	height:80vh;
}

.container {
	margin-top: 1.5rem;
	align-content: center;
	padding: 1.8rem;
	background-color: hsl(216, 50%, 16%);
	border-radius: 0.9rem;
	max-width: 300px;

	-webkit-box-shadow: 0px 18px 0px 11px rgba(0, 0, 0, 0.09);
	-moz-box-shadow: 0px 18px 0px 11px rgba(0, 0, 0, 0.09);
	box-shadow: 0px 18px 0px 11px rgba(0, 0, 0, 0.09);
}

.container h1 {
	cursor: pointer;
	color: hsl(0, 0%, 100%);
	font-size: 1.4rem;
	font-weight: 600;
}

.container h1:hover {
	color: hsl(178, 100%, 50%);
}

.container p {
	color: hsl(215, 51%, 70%);
	justify-content: center;
	font-size: 1.1rem;
	font-weight: 400;
}

.information {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.container-image {
	position: relative;

	width: 100%;
}

.nft-image {
	border-radius: 0.9rem;
	max-width: 19rem;
}

.image-overlay {
	cursor: pointer;
	position: absolute;
	inset: 0;
	display: grid;
	align-items: center;
	justify-items: center;
	background-color: hsl(178, 100%, 50%);
	border-radius: 0.7rem;
	opacity: 0;
	transition: 150ms ease-in-out;
}

.image-overlay:hover {
	opacity: 0.65;
	transition: 150ms ease-in-out;
}

.information h2 {
	color: hsl(178, 100%, 50%);
	font-size: 1rem;
}

.information p {
	color: hsl(215, 51%, 70%);
	font-size: 1rem;
}

hr {
	stroke: white;
	color: hsl(215, 32%, 27%);
}

.creator {
	border-top: 1px solid hsl(215, 32%, 27%);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	color: hsl(215, 51%, 70%);
}

.creator img {
	margin-top: 0.5rem;
	justify-content: center;
	object-fit: contain;
	border: solid hsl(0, 0%, 100%);
	border-width: 0.1rem;
	border-radius: 50%;
	max-height: 2rem;
}

.creator p {
	color: hsl(215, 51%, 70%);
	margin-left: 1rem;
	font-size: 1.1rem;
}

.creator p span {
	color: white;
	cursor: pointer;
}

.creator p span:hover {
	color: hsl(178, 100%, 50%);
	cursor: pointer;
}

.attribution {
	margin-top: 1.5rem;
	justify-content: flex-end;
	font-size: 1.1rem;
	text-align: center;
	color: white;
}
.attribution a {
	color: hsl(228, 84%, 65%);
}

.icon {
	margin-right: 0.5rem;
}