*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--color-light: hsl(220, 80%, 90%);
	--color-dark: hsl(220, 80%, 10%);
	--color-primary: hsl(220, 80%, 50%);
	--color-secondary: hsl(220, 80%, 30%);
	--color-tertiary: hsl(220, 80%, 70%);
	--color-background: hsl(220, 30%, 10%);
	--color-header: hsl(220, 50%, 30%);
	--color-header-hover: hsl(220, 50%, 20%);
	--color-error: hsl(0, 80%, 70%);

	scroll-behavior: smooth;
}

html,
body {
	height: 100%;
	margin: 0;
	font-family: "Lato", sans-serif;
	color: var(--color-light);
	background-color: var(--color-background);
	display: flex;
	flex-direction: column;
}

header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	background-color: var(--color-header);
}

header .logo {
	height: 100%;
	width: 100%;
}

.pages {
	height: 3rem;
}

.pages ul {
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	padding: 0;
	margin: 0;
	height: 100%;
}

.pages .icon {
	display: flex;
	gap: 1ch;
}

.pages a {
	display: flex;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--color-light);
	transition: 250ms ease-in-out;
	height: 100%;
	padding-inline: 1rem;
}

.pages a:hover,
.pages a:focus {
	background-color: var(--color-header-hover);
}

.pages:first-child li:first-child a {
	padding-left: 0;
}

.pages [data-page="profile"] {
	display: none;
}

.pages [data-page="profile"] img {
	object-fit: cover;
	height: 100%;
	padding-block: 0.5ch;
	vertical-align: middle;
	border-radius: 50%;
}

main {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25em;
	margin: 1rem;
	height: 100%;
}

form {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 1ch;
	background-color: var(--color-header);
	padding: 1rem;
	border-radius: 1ch;
	width: clamp(20rem, 50%, 40rem);
}

fieldset {
	border: none;
	display: grid;
	grid-template-columns: clamp(10rem, 30%, 20rem) 1fr;
	gap: 1ch;
	padding: 0;
}

:focus-visible {
	outline: 2px solid var(--color-tertiary);
}

button {
	padding: 1rem;
	font-size: inherit;
	background-color: var(--color-primary);
	border: none;
	color: var(--color-light);
	border-radius: 1ch;
	width: 100%;
	transition: 250ms ease-in-out;
}

button:hover,
button:focus {
	background-color: var(--color-tertiary);
	color: var(--color-dark);
}

button.hide {
	display: none;
}

label {
	display: flex;
	align-items: center;
}

input {
	padding: 1ch;
	font-size: inherit;
	background-color: var(--color-dark);
	border: none;
	color: var(--color-light);
	border-radius: 1ch;
	width: 100%;
	transition: 250ms ease-in-out;
}

input:focus {
	background-color: var(--color-secondary);
}

input:disabled {
	background-color: var(--color-secondary);
	color: var(--color-light);
}

input:invalid {
	outline: 2px solid var(--color-error);
}

.avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	outline: 2px solid var(--color-light);
	position: relative;
	margin: auto;
}

.avatar i {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7rem;
}

.avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	z-index: 1;
}

.avatar img[src=""] {
	display: none;
}

.avatar input {
	position: absolute;
	opacity: 0;
	z-index: 1;
	height: 100%;
}

#passwordValidation {
	color: var(--color-error);
	font-style: italic;
	text-align: center;
}

nav {
	display: flex;
	gap: 1ch;
}

footer {
	padding: 1ch;
	font-size: 0.8em;
	padding: 1rem;
	background: var(--color-dark);
	color: var(--color-light);
	text-align: center;
	margin-top: auto;
}

footer p {
	margin: 0;
}

footer a {
	color: inherit;
}

@media screen and (max-width: 455px) {
	header {
		justify-content: center;
	}
}

@media screen and (max-width: 780px) {
	body {
		display: block;
	}

	main {
		position: static;
		margin: 0;
		border-top: 1px solid var(--color-light);
	}

	form {
		width: 100%;
		border-radius: 0;
	}

	fieldset {
		grid-template-columns: 1fr;
	}
}

@keyframes shake {
	50% {
		transform: translateX(0.1ch);
	}

	100% {
		transform: translateX(-0.1ch);
	}
}