/* MENU */
.menu {
	position: fixed;
	top: 0;
	left: 0;

	z-index: 1000;

	display: flex;
	flex-direction: row;
	justify-content: space-between;

	font-family: var(--font-secondary);
	text-transform: uppercase;
	font-size: 0.7rem;

	padding: 2rem;
	width: calc(100% - 4rem);

	pointer-events: none;
}

.navbar {
	display: grid;
	grid-template-columns: 1fr 2rem;
	align-items: center;

	gap: 0.7rem 0;
	width: 16em;
	border-radius: 1rem;

	pointer-events: all;
}

.navbar > .hamburger {
	display: none;
}

.navbar a {
	text-decoration: none;
	text-align: right;
	font-weight: 300;
}

.navbar input[type="radio"] {
	appearance: none;
	background-color: transparent;
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1em;
	height: 1em;
	border: 0.15em solid currentColor;
	border-radius: 50%;

	display: grid;
	place-content: center;

	cursor: pointer;
	margin-left: 0.7rem;
}
input[type="radio"]::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em currentColor;
}
input[type="radio"]:checked::before {
	transform: scale(1);
}

.menu .buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	gap: 1rem;

	pointer-events: all;
}

.menu button {
	width: 1.5rem;
	height: 1.5rem;
	background-color: transparent;
	border: none;
	cursor: pointer;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	transition: all var(--transition);
}
.menu button:hover {
	transform: scale(1.1);
}
.menu button:active {
	transform: scale(0.9);
}
.menu .back {
	background-image: url("../images/FLETXA.png");
	transform: rotate(-90deg);
}
.menu .back:hover {
	transform: rotate(-90deg) scale(1.1);
}
.menu .back:active {
	transform: rotate(-90deg) scale(0.9);
}
.menu .home {
	background-image: url("../images/HOME.png");
	width: 1.8rem;
	height: 1.8rem;
	margin-top: -0.2rem;
}
.menu .info {
	background-image: url("../images/RETORNA.png");
}

.menu .up {
	background-image: url("../images/FLETXA.png");
	position: fixed;
	bottom: 2rem;
	right: 2rem;
}

@media screen and (max-width: 800px) {
	.navbar {
		width: fit-content;
	}
	.navbar.active {
		background-color: var(--color-background);
	}

	.navbar > .hamburger {
		display: block;
	}

	.navbar > a,
	.navbar > input[type="radio"] {
		display: none;
	}

	.navbar.active {
		display: flex;
		flex-direction: column;
		align-items: justify;
		justify-content: center;

		gap: 10%;

		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.navbar.active > a {
		display: block;
	}
	.navbar.active > .hamburger {
		position: absolute;
		right: 4rem;
		top: 2.05rem;
	}
}