#top-bar {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%,0);
  z-index: 100;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.9);
  width:130px;
  height: 130px;
}

.nav-logo {
  width: 100px;
  height: 100px;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-49%,77%);
}

.nav_bar_li a{
  color: white;
  text-decoration: none;
}

.nav_bar_li a:hover{
  color: lightblue;
  text-decoration: underline;
}


/*Modification of the website for mobile*/
@media (min-width: 850px) {
	
	#nav-container {
	  position: absolute;
	  width: 100%;
	  top: 70px;
	  z-index: 2;
	}
	
	#nav {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 30%;
	}
	
	.nav_bar-left, .nav_bar-right {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	  display: flex;
          gap: 20%;
	  width: 30%;
	}

	.nav_bar-left {
	  justify-content: right;
	}

	.nav_bar-right {
	  justify-content: left;
	}
	
	
	.mobile-nav-toggle{
	  display: none;
	}
}


@media only screen and (max-width: 850px) {

	.nav-container{
	  position: fixed;
	  inset: 0 0 0 75%;	
	  z-index: 2;
	}

	.nav{
	  height: 100%;
	  flex-direction: column;
	  display: flex;
	  padding-top: 70px;
	  padding-left: 4vw;
	  margin-bottom: 0;
	  background: hsl(14 60% 85% /1);
	  transform: translateX(100%);
	  transition: transform 350ms ease-out;
	}

	.nav[data-visible="true"]{
	  transform: translateX(0%);
	}

	.nav_bar-left, .nav_bar-right{
	  z-index: 99;
	  margin: 0;
	  transform: translateX(100%);
	  transition: transform 350ms ease-out;
	  padding-left: 3vw;
	}
	
	.nav_bar-left[data-visible="true"]{
	  transform: translateX(0%);
	}

	.nav_bar-right[data-visible="true"]{
	  transform: translateX(0%);
	}
	
	.nav_bar_li{
	  padding: 2vh 0;
	}
	
	
	.nav_bar-left, .nav_bar-right {
	  list-style: none;
	}
	
	
	.mobile-nav-toggle{
	  display: block;
	  position: fixed;
	  background: url("../assets/nav-open.svg");
	  background-repeat: no-repeat;
	  background-size: cover;
	  border: 0;
	  width: 30px;
	  aspect-ratio: 1;
	  z-index:200;
	  margin-top: 0;
	  top: 13px;
	  right: 30px;
	}
	
	.mobile-nav-toggle[aria-expanded="true"]{
	  background: url("../assets/nav-close.svg");
	  background-size: cover;
	}

}