.navbar {
	position: fixed;
	top: 0;
	left: 60px;
	width: calc(100% - 60px);
	z-index: 99;

	display: flex;
	justify-content: space-between;
	align-items: center;

	background: transparent;
	backdrop-filter: blur(10px);
	padding: 1.5rem 3rem;

	button {
		background: transparent;
		color: var(--special__1);
		border: 2px solid var(--special__1);
		font-size: var(--normal__size);
		border-radius: 4px;
		transition: 0.2s;
		cursor: pointer;

		position: relative;

		.main {
			width: 100%;
			height: 100%;
			padding: 0.5rem 1.5rem;

			position: relative;
			overflow: hidden;

			@media screen and (width <= 700px) {
				padding: 0;
			}

			img {
				width: 35px;

				@media screen and (width > 700px) {
					display: none;
				}
			}

			span {
				@media screen and (width <= 700px) {
					display: none;
				}
			}

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;

				width: 0%;
				height: 0%;
				background: var(--special__1);
				z-index: -1;
				transition: 0.2s;

				@media screen and (width <= 700px) {
					display: none;
				}
			}

			&:hover {
				color: var(--black__clr);

				&::after {
					width: 100%;
					height: 100%;
				}
			}
		}

		@media screen and (width <= 700px) {
			border: 0;
			padding: 0.25rem;
			border-radius: 50%;
			width: 45px;
			height: 45px;

			&:hover {
				background: var(--special__1__trs);
			}
		}
	}

	@media screen and (width <= 900px) {
		padding: 1rem 2.25rem;
	}

	@media screen and (width <= 700px) {
		padding: 0.75rem 0.5rem 0.75rem 2rem;
		width: 100%;
		left: 0;
		padding-left: 70px;
	}
}
