@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: "Bagel Fat One", system-ui; */

@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=MuseoModerno:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: "MuseoModerno", sans-serif; */

:root {
    --yellow: #FFC700;
    --red: #F92B3A;
    --green: #AEDF35;
	/* --blue: #2B388F; */
	--blue: #485eea;
	--grey: rgb(50, 50, 50);
	--white: #fff;
    --head-font: 'MuseoModerno', sans-serif;
    --body-font: 'Ubuntu', sans-serif;
}

/* header styles */
header{
	text-align: center;
	font-family: var(--head-font);
	
}

#navbar{
    position: fixed;
	z-index: 99;
	top: 0px;
	left: 0;
	right: 0;
	max-width: 100vw;
    transition: top 0.3s;
    height: 4rem;
}



/* nav styles */

header nav{
	text-align:center;
	max-width: 100vw;
}

header  nav ul li{
	display:block;
	margin-bottom:0;
	
} 

#navbar ul li{
	/* background-color: #C1C0C0; */
	background-color: var(--white); 
}



header nav ul{
	display: flex;
	font-size: 1.2em;
	margin-top: 34px;
	justify-content: flex-end;
	height: 4rem;
	margin:  0 auto;
	align-items: center;
}

header nav a{
	display:block;
	padding: 0px;
	text-decoration: none;
	border-radius: 50px;
	margin-right: 5px;
	color: var(--grey);
}




#navbar #logo{
    display: flex;
    position: absolute;
    left: 20px;
    top: 0.1rem;
   }

 #logo img {
    width: 3.5rem; 
	height: auto; 
}











































#navbar ul{
    height: 6rem;
	position:relative;
	height:100%;
	width:100%;
	display:flex;
	flex-direction: row;
	justify-content: end;
	align-items: end;
}



#navbar li {
	margin-right: 10px;
    padding: 7px;
    padding-left: 15px;
    padding-right: 10px;
	border: 2px var(--grey) solid;
	border-radius: 1em;
	margin-bottom: 10px;
	cursor: pointer;
	box-shadow: 0px 1px 3px var(--grey);
}




#navbar  li:nth-child(1){
	background: none;
    border: none;
    box-shadow: none;
}

#navbar  li:nth-child(2), 
#navbar  li:nth-child(3), 
#navbar  li:nth-child(4),
#navbar  li:nth-child(5){
	transition: box-shadow 0.5s, transform 0.5s;
}
#navbar  li:nth-child(5){
    font-size: 1.5rem;
	
}
#navbar  li:nth-child(5) a{
	color: var(--red);
}


@media (max-width: 834px){

}








#navbar li:nth-child(2):hover,
#navbar li:nth-child(3):hover,
#navbar li:nth-child(4):hover,
#navbar li:nth-child(5):hover {
    box-shadow: 2px 2px 5px var(--grey);
    transform: translateY(-6px);
}

#navbar li:nth-child(2):hover,
#navbar li:nth-child(3):hover,
#navbar li:nth-child(4):hover,
#navbar li:nth-child(5):hover  {
    box-shadow: 2px 2px 5px var(--grey);
    transform: translateY(-6px);
	background: var(--yellow);
}

#navbar li:nth-child(5):hover{
    background: var(--red);
}

#navbar li:nth-child(5):hover a{
    color: var(--white);
}



#navbar ul li:hover::before {
	content: ''; 
	position: absolute;
	display: inline-flex;
	text-align: left;
	width: 1.2rem; 
	height: 1.2rem; 
	left: 0.1rem;
	top: 20%;
	background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
	background-size: contain; 
	background-repeat: no-repeat;
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
	opacity: 1;
	animation: blink 1s infinite;
}

#navbar  li:nth-child(5):hover::before{
    width: 1.5rem; 
	height: 1.5rem; 
    top: 17%;
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

#navbar  li:nth-child(1):hover::before{
    display: none;
}   


@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
  }