@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap');

:root {
	--blue-400: hsl(215, 51%, 80%);
	--blue-500: hsl(215, 51%, 70%);
	--cyan-400: hsl(178, 100%, 50%);
	--cyan-400-transparent: hsl(178, 100%, 50%, 0.1);

	--blue-950: hsl(217, 54%, 11%); /* main BG */
	--blue-900: hsl(216, 50%, 16%); /* card BG */
	--blue-800: hsl(215, 32%, 27%); /* line */
	--white: hsl(0, 0%, 100%);

	--font-main: 'Outfit';
	/* Weights: 300, 400, 600 */
}

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

a {
	text-decoration: none;
}

body {
	position: relative;
	width: 100%;
	min-height: 100vh;
	font-family: var(--font-main);
	background-color: var(--blue-950);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

main {
	width: 90%;
	max-width: 400px;
	padding: 30px;
	background-color: var(--blue-900);
	border-radius: 12px;

	display: flex;
	flex-direction: column;
	gap: 30px;

	.container-image {
		position: relative;

		.coin-image {
			position: relative;

			width: 100%;
			height: 100%;
			border-radius: 8px;

			display: block;
		}

		.image-overlay {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			width: 100%;
			height: 100%;
			background-color: var(--cyan-400-transparent);
			border-radius: 8px;
			opacity: 0;
			transition: opacity 0.3s ease;

			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			&:hover {
				opacity: 1;
			}

			.icon-view {
				width: 50px;
			}
		}
	}

	.container-information {
		display: flex;
		flex-direction: column;
		gap: 25px;

		.container-information__title {
			font-size: 2rem;
			font-weight: 600;
			color: var(--white);
			cursor: pointer;

			&:hover {
				color: var(--cyan-400);
			}
		}

		p {
			font-size: 1.2rem;
			font-weight: 300;
			color: var(--blue-500);
		}

		.price-and-time {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			span {
				font-size: 1rem;
				font-weight: 600;
				color: var(--cyan-400);

				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;

				img {
					width: 15px;
				}
			}

			p {
				font-size: 1rem;

				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 5px;

				img {
					width: 18px;
				}
			}
		}
	}

	.line {
		width: 100%;
		border: none;
		border-top: 1px solid var(--blue-800);

		align-self: center;
	}

	.creator-information {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: start;
		gap: 20px;

		img {
			width: 40px;
			height: 40px;
			border: 1px solid var(--white);
			border-radius: 50%;
		}

		span {
			color: var(--blue-500);

			a {
				color: var(--white);
				cursor: pointer;

				&:hover {
					color: var(--cyan-400);
				}
			}
		}
	}
}

footer {
	position: absolute;
	bottom: 0;
	left: 0;

	width: 100%;
	padding: 1em;
	font-size: 0.9rem;
	text-align: center;
	color: var(--white);
	background-color: var(--blue-900);

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1em;

	a {
		position: relative;

		text-decoration: none;
		color: var(--blue-500);

		&::before {
			position: absolute;
			bottom: 0;
			left: 0;
			transition: all 0.5s ease;

			content: '';
			width: 100%;
			height: 1px;
			background-color: var(--blue-400);
			transform: scaleX(0);
		}

		&:hover {
			color: var(--blue-400);

			&::before {
				transform: scaleX(1);
			}
		}
	}
}