.nav-bar-container {
	display: flex;
    height: auto;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    flex-wrap: nowrap;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    position: relative;
}

.nav-bar-background {
    display: flex;
    /* background-image: linear-gradient(180deg, rgb(214 255 252) 50%, rgb(190 255 250) 39%, rgb(255 255 255 / 0%) 104%); */
    background-color: rgb(223 255 252);
    height: 100%;
    width: 100%;
    /* border-bottom-right-radius: 10px; */
    border-radius: 0% 0% 70% 0%;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
    /* align-content: center; */
    /* justify-content: space-around; */
    /* z-index: -1; */
    position: absolute;
    /* top: 0px; */
}

.nav-bar-container::before {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: rgb(178 241 255);
	content: '';
}

.nav-logo-container {
	position: absolute;
    top: 0px;
    left: 0px;
    margin-top: -8px;
    /* margin-left: 5px; */
    z-index: 2;
    /* background-color: #dffffc; */
    border-radius: 0 0 189px 0;
}

.nav-logo-container > img{
	z-index: 99;
	position: relative;
}

.nav-buttons-container{
	/* height: 90px; */
    display: flex;
    z-index: 1;
}

.navButtons{
	height: 90px;
    display: flex;
}

.mobileNavContainer{
	display: none;
	height: 90px;
}

.mobileNavButton{
	display: none;
}

@media (max-width: 860px) {
	.mobileNavContainer{
		display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    	align-content: center;
    	margin-left: auto;
    	margin-right: 40px;
    	height: 90px;
	}
	.mobileNavButton{
		display: block;
    	height: 58px;
    	width: 74px;
    	z-index: 1;
    	padding: 0px;
		cursor: pointer;
		background-color: white;
    	border: #b2f1ff 1px solid;
    	border-radius: 10px;
	}
	.nav-button{
		height: 50px;
	}
	.navButtons{
		transition: height 2s;
		display: none;
		height: auto;
		flex-direction: row;
    	flex-wrap: wrap;
		margin-top: 90px;
		margin-right: -114px;
	}
	.navButtons > a{
		height: 90px;
		width: 100%;
		padding-right: 75px; /* TODO: Remove this hack styling */
	}
}

@media (max-width: 1080px) {
	.nav-buttons-container{
		margin-left: auto;
	}
}

@media (max-width: 768px) {
	.nav-logo-container > img{
		width: 200px;
	}
}

.nav-button {
	/* height: 50%; */
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
	padding-left: 20px;
	padding-right: 20px;
	min-width: 100px;
	font-size: 20px;
}

.nav-button:hover {
	background-color: #b2f1ff;
	cursor: pointer;
}

.nav-selected {
	background-color: #b2f1ff7a;
}

.nav-button:not(:first-child) {
	/* border-left: 1px solid black; */
}