@import url("https://fonts.googleapis.com/css?family=Varela+Round");

ul{
    list-style-type: none;
}

.nav-link:hover{
    color: rgb(66, 161, 150);
}

.nav-link {
    color: #c1886d !important;
    padding-top: 10px !important;
    font-weight: 600 !important;
}

.nav-menu li {
transition: background-position-x 0.9s linear;
}

.nav-menu li a {
padding: .5rem .1em;;
transition: all 0.45s;
}

.nav-menu li:hover {
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
animation: line 1s;
}

.nav-menu li:hover a {
color: #d94f5c;
}

@keyframes line {
0% {
    background-position-x: 390px;
}
}

.navbar-container {
	width: 100%;
	height: 60px;
	padding: 1.6rem .1rem;
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	background-color: rgba(175,175,212,.3);
	border: 1px solid rgba(255, 255, 255, 0.125);
	display: flex;
    align-items: center;
    justify-content: space-between;
	position: fixed;
	z-index: 111;
}

.sticky {
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	background-color: rgba(255, 255, 255, 0.51);
	border: 1px solid rgba(209, 213, 219, 0.3);
}

.logo {
    cursor: pointer;
    color: #e4d9c5;
}

.menu-list {
    display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0 !important;

}

.menu-list ul li {
	padding-top: 10px;
	float: left;
	margin-right: 1rem;
}

@media(max-width: 600px) {
	.menu-list ul li {
	margin-right: 0.5rem !important;
}
}

@media(min-width: 1024px) {
	.menu-list ul li a {
	font-size: 1.3rem;
	color: #1a9dd6;
}
}

@media(max-width: 1023px) and (min-width: 601px) {
	.menu-list ul li a {
	font-size: 1.1em;
	color: #1a9dd6;
	padding: 0 !important;
}
}

@media(max-width: 600px) {
	.menu-list ul li a {
	font-size: 1em;
	color: #1a9dd6;
	padding-left: 0 !important;
	padding-bottom: 0 !important;
}
}