:root {
	--background: #090b11;
	--footer: #030407;
	--primary: #2e55df;
	--gradient-secondary: #5074fa;
	--grey-primary: #1a1e28;
	--grey-secondary: #14171f;
	--grey-tertiary: #363d4b;
	--header-color: #ffffff;
	--body-color: #aeb0b6;
	--input-bg: #222630;
}

body {
	background: var(--background);
	color: var(--body-color);
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

	& .main-logo-link {
		background: var(--primary);
		width: 60px;
		height: 60px;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	& > nav {
		transition: all 400ms ease-in-out 750ms;
	}

	&.initial {
		& > nav {
			tranform: translateY(25%);
			opacity: 0;
		}
	}

	& > nav.mobile-nav {
		position: relative;
		z-index: 10;
		height: 3rem;

		& > button {
			background: none;
			border: none;
			position: absolute;
			top: 1.5rem;
			left: 2rem;
			z-index: 9;

			& svg {
				width: 2.5vmax;
				margin: 0 auto;
				display: block;
			}
		}

		& ul {
			list-style: none;
			height: 100vh;
			position: absolute;
			left: 0;
			transform: translateX(-100%);
			background: var(--grey-primary);
			transition: transform .3s;
			padding: 6rem 0;
			min-width: 10rem;
			width: 50%;
			min-width: 10rem;
			
			& li {
				margin-bottom: 1.5rem;
				text-align: center;

				& a:not(.gradient-button) {
					color: var(--body-color);
					text-transform: uppercase;
					text-decoration: none;
					border-bottom: 1px solid transparent;

					&:hover {
						color: var(--header-color);
						font-weight: 600;
						border-bottom: 1px solid var(--header-color);
					}
				}

				& .gradient-button {
					padding: .5rem 2rem;
					text-transform: uppercase;
					width: calc(100% - 2rem);
				}
			}

		}

		&.active {
			& ul {
				transform: translateX(0);
			}
		}
	}

	& > nav.desktop-nav {
		display: none;
	}


	.gradient-button {
		background: #2E55DF;
		background: linear-gradient(90deg,rgba(46, 85, 223, 1) 0%, rgba(80, 117, 250, 1) 100%);
		color: var(--header-color);
		border: none;
		transition: all .5s;
		cursor: pointer;
		font-weight: 700;
		border-radius: .5rem;
		padding: 1rem 2rem;
		display: inline-block;
		text-decoration: none;

		&.icon {
			display: flex;
			width: fit-content;
			gap: 2rem;
		}

		&:hover {
			background: #183DBD;
			background: linear-gradient(90deg,rgba(24, 61, 189, 1) 0%, rgba(44, 82, 218, 1) 100%);
		}
	}


	ul.social-icons--container {
		list-style: none;
		display: flex;
		gap: 1rem;
		padding: 0;

		&.vertical {
			flex-direction: column;
		}

		&.horizontal {
			flex-direction: row;
		}

		& li {
			margin: 0;

			& a {
				background: var(--grey-primary);
				width: 45px;
				height: 45px;
				border-radius: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

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

	& footer {
		background-color: var(--footer);
		display: flex;
		flex-direction: column;
		gap: 3rem;
		justify-content: space-between;
		align-items: center;
		padding: 4rem 5%;

		& .footer-logo--container {
			display: flex;
			align-items: center;
			gap: 1rem;

			& span {
				text-transform: uppercase;
				font-size: 1.25rem;
				font-weight: 700;
			}
		}
	}
}


@media (min-width: 860px) {
	body {
		& > nav.mobile-nav {
			display: none;
		}

		& > nav.desktop-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 2.5rem 5%;

			& ul {
				list-style: none;
				display: flex;
				gap: 1rem;
				padding: 0;

				& li {
					margin: 0;

					& a {
						color: var(--body-color);
						text-decoration: none;
						text-transform: uppercase;

						&:hover {
							color: var(--header-color);
						}

						&:active {
							font-weight: 700;
							color: var(--header-color);
						}
					}
				}
			}

			& .gradient-button {
				padding: .25rem 2rem;
			}
		}

		& footer {
			flex-direction: row;
			gap: 1rem;
		}
	}
}