@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

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

:root {
	--gradient-color-left: hsl(6, 100%, 80%);
	--gradient-color-right: hsl(335, 100%, 65%);

	--blue-200: hsl(243, 100%, 93%);
	--grayish-blue: hsl(229, 7%, 55%);
	--blue-850: hsl(228, 56%, 26%);
	--blue-950: hsl(229, 57%, 11%);
}

body {
	width: 100%;
	min-height: 100vh;
	position: relative;
	background-color: var(--blue-950);
	color: white;
	font-family: "Raleway", Arial, Helvetica, sans-serif;

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

	background: var(--blue-950) url("../images/bg-desktop.png") no-repeat center bottom/contain;
	background-size: 100% 50%;
}

main {
	max-width: 730px;
	width: 100%;

	position: absolute;
	top: 50%;
	transform: translateY(-50%);

	display: flex;
	justify-content: center;
	padding: 0px 16px;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;

	& > * {
		background-color: var(--blue-850);
		box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
		padding: 25px;
	}
}

#primary-container {
	border-radius: 7px 80px 7px 7px;
	max-width: 280px;
	width: 100%;

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

	#logo {
		width: 95px;
	}

	#container-box-image {
		display: flex;
		gap: 15px;

		.box-image {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 7px;
			background-color: var(--blue-950);
			padding: 8px;

			img {
				width: 18px;
			}
		}
	}
}

#secondary-container {
	flex: 1 1 250px;
	position: relative;
	font-weight: 300;

	border-radius: 7px;
	font-size: 0.75em;
	display: flex;
	flex-direction: column;
	color: var(--blue-200);
	gap: 8px;

	strong {
		color: white;
	}

	#container-progress {
		display: flex;
		flex-direction: column;
		gap: 5px;

		progress {
			width: 100%;
			height: 10px;
			appearance: none;
			position: relative;

			&::-webkit-progress-bar {
				border-radius: 10px;
				background-color: var(--blue-950);
			}

			&::-webkit-progress-value {
				background-image: linear-gradient(to right, var(--gradient-color-left), var(--gradient-color-right));
				border-radius: 10px;
			}
		}
	}

	.flex-between {
		color: inherit;
		font-size: 0.88em;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 600;
	}

	#pop-up {
		position: absolute;
		background-color: white;
		right: 25px;
		top: -30%;
		padding: 10px;
		font-size: 0.85em;
		font-weight: 700;
		color: var(--grayish-blue);
		border-radius: 7px 7px 0px 7px;
		display: flex;
		align-items: center;
		gap: 4px;

		&::before {
			content: "";
			position: absolute;
			bottom: -19px;
			right: 0px;
			border: 10px solid white;
			border-color: white white transparent transparent;
		}

		strong {
			font-size: 2.3em;
			font-weight: bold;
			color: var(--blue-950);
		}
	}
}

footer {
	padding: 4px;
	gap: 10px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--grayish-blue);
	color: white;
	font-size: 0.85em;
	flex-wrap: wrap;
	z-index: 0;
	transition: all 0.2s ease;

	a {
		text-decoration: none;
		color: var(--blue-950);
		font-weight: bold;
		position: relative;

		&::before {
			content: "";
			position: absolute;
			height: 100%;
			width: 0%;
			left: -1px;
			background-color: white;
			z-index: -1;
			transition: all 0.2s ease;
		}

		&:hover {
			color: var(--blue-950);
			z-index: 1;

			&::before {
				width: calc(100% + 3px);
			}
		}
	}
}