@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Tourney:ital@0;1&display=swap');

:root {
	--color-background: #081c29;

	--color-primary: #e79c25;
	--color-secondary: #004657;

	--color-tertiary: #697987;

	--color-black: #354756;
	--color-white: #e3f1ee;
	--color-transparent: transparent;
}

:root {
	--font-text: 'Lato', sans-serif;
	--font-signature: 'Tourney', 'Lato', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--font-text);
}

body {
	background: var(--color-background);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.main {
	flex: 1;
	width: 93%;
	max-width: 800px;
	margin-inline: auto;
}

.header {
	font-family: var(--font-signature);
	color: var(--color-white);
	text-align: center;
	font-size: 3rem;
	font-weight: 300;
	padding: 1rem 0;
}

.form {
	.form__input {
		font-size: 1.3rem;
		width: 100%;
		padding: 0.5em 1em;
		min-width: 50px;
		outline: none;
	}

	.form__submit {
		font-size: 1rem;
		padding: 0.5em;
		color: var(--color-white);
		text-transform: capitalize;
		background-color: var(--color-primary);
		width: 100%;
		margin-top: 0.5em;
		display: flex;
		justify-content: center;
		gap: 8px;
		cursor: pointer;

		@media screen and (min-width: 600px) {
			display: none;
		}

		span {
			font-size: 1.3rem;
		}

		img {
			width: 15px;
		}
	}
}

.filter {
	margin: 2em 0 0.5em;

	.filter__options {
		min-width: 50px;
		padding: 12px;
		text-transform: uppercase;
		border: none;
		outline: none;
		cursor: pointer;
		border-radius: 4px;
		color: white;
		background-color: var(--color-secondary);
	}
}

.goals-list {
	.goal {
		background-color: whitesmoke;
		margin-bottom: 10px;
		border-radius: 6px;
		overflow: hidden;

		.goal__text {
			flex: 1;
			text-transform: uppercase;
		}

		.button__group {
			display: flex;
			justify-content: end;
			gap: 8px;
			background-color: var(--color-secondary);
			padding: 4px;

			button {
				font-size: 1rem;
				padding: 0.3em 0.5em;
				cursor: pointer;
				text-transform: uppercase;
				color: var(--color-white);
				font-weight: 600;
				border: none;
				border-radius: 6px;

				img {
					width: 15px;
				}
			}

			button:hover {
				transform: scale(1.03);
			}

			.button--achieved {
				background-color: var(--color-primary);

				span {
					pointer-events: none;
				}
			}

			.button--dismiss {
				background-color: var(--color-tertiary);

				span {
					pointer-events: none;
				}
			}
		}

		footer {
			padding: 1em;

			p {
				text-align: center;
			}
		}
	}

	.goal.achieved footer {
		background: var(--color-primary);
	}

	.goal--empty {
		border: 2px dashed var(--color-primary);
		color: var(--color-primary);
		border-radius: 4px;
		font-size: 2rem;
		text-align: center;
		padding: 2em;
	}
}

.main-footer {
	width: 100%;
	padding: 1.5em;
	background-color: var(--color-black);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;

	small {
		font-size: 0.6rem;
	}
}