.barItem{
	width: 20rem;
}

.topbar-container{
	width:100%;
	position: sticky;
	top: 0;
  z-index: 16;

  pointer-events: all;
	background: rgba(250, 250, 250, 0.4); /* translucent */
  backdrop-filter: blur(15px);          /* frosted effect */
  -webkit-backdrop-filter: blur(15px);  /* Safari support */
}

.topbar{
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height:3rem;
	padding: 0.5rem 60px;
	font-size:0.8rem;
	font-weight: 300;
  transition: box-shadow 0.3s ease, border-bottom 0.3s ease;
  
  transition: background-color 1s ease;

}

.topbar.scrolled {
  border-bottom: 1px solid var(--grad-left);
  box-shadow: 3px 3px 5px rgba(0,0,0,0.03);
}

.topbar.scrolledMuch{
	background-color: var(--body-bg);
}



.menu{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	text-decoration: none;
	margin-left: 50px;
	width:20%;
	min-width: 300px;
	max-width: 400px;
	color: var(--dark);

}

.menuItem{
	
	font-weight: 300;
	text-align: center;

}

.menuItem:hover{
	color: var(--grad-left);
	font-weight: 600;
	cursor: pointer;
}



.gotoWrapper{
	font-weight: 600;
	padding:1rem 0px;
	border-radius: 8px;

	font-size: 0.8rem;
	font-weight: 300;
	color: var(--dark);
	display: flex;
	justify-content: center;
	align-items: center;
	height:7px;
	width:150px;
	border: 0.5px solid var(--light-gray);



}

.gotoWrapper:hover{
	color: var(--grad-left);
	font-weight: 600;
	cursor: pointer;
}

.goto{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	max-width: 200px;

}

.logoContainer{
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	max-width: 200px;
}

.logo{
	width: 40px;


}

.logo:hover{
	cursor:pointer;
}