nav {
	background-color: var(--b);
	border-bottom: 3px solid transparent;
	border-image: var(--y) 1;
	position: sticky;
	width: 100%;
	top: 0;
	z-index: 999;
	height: 11dvh;

	.box {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;

		img {
			width: 60%;
			height: 11vh;
			object-fit: contain;
			object-position: left;
			padding: 0.5rem;
			/* background-color: var(--y); */
		}

		#nav-btn {
			width: 60px;
			height: 60px;
			transition: all 0.1s linear;

			img {
				width: 100%;
				height: 100%;
				object-position: center;
			}
		}

		#links {
			height: 0vh;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			padding: 0;
			justify-content: space-evenly;
			align-items: center;
			position: absolute;
			right: 0;
			top: 11vh;
			z-index: 999;
			background-color: var(--b);
			width: 60%;
			transition: all 0.2s ease-out;

			a {
				color: var(--l);
				width: 100%;
				text-align: center;
				transition: all 0.1s linear;
				text-decoration: none;
        font-size: 120%;

				&:hover {
					border-bottom: 2px solid var(--l);
					font-size: 110%;
				}
			}

			.active {
				background-color: var(--l);
				color: var(--d);
				padding: 0.5rem 0;
			}

			.socials {
				color: var(--l);
				width: 100%;
				transition: all 0.1s linear;
				display: flex;
        justify-content: center;
				

				a {
					flex-shrink: 0;
					width: 50px;
					height: 50px;

					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
		}
	}
}

@media (min-width: 768px) {
	nav {
		.box {
			#nav-btn {
				display: none;
			}

			#links {
				height: 10vh;
				flex-direction: row;
				position: static;
			}
		}
	}
}