.bottom-nav{

position:fixed;

left:50%;

bottom:15px;

transform:translateX(-50%);

width:95%;

max-width:700px;

height:75px;

display:flex;

justify-content:space-around;

align-items:center;

background:rgba(255,255,255,.82);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.4);

border-radius:30px;

box-shadow:
0 12px 30px rgba(0,0,0,.12);

z-index:999;

}

.bottom-nav a{

flex:1;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:4px;

text-decoration:none;

color:#666;

font-size:12px;

font-weight:600;

transition:.3s;

border-radius:25px;

}

.bottom-nav a:hover{

color:#2d6cdf;

}

.bottom-nav a.active{

color:#fff;

background:#2d6cdf;

margin:8px;

height:58px;

box-shadow:
0 10px 25px rgba(45,108,223,.35);

}

.bottom-nav .material-symbols-outlined{

font-size:28px;

}

.dark .bottom-nav{

background:rgba(35,35,35,.85);

border:1px solid rgba(255,255,255,.08);

}

.dark .bottom-nav a{

color:#ddd;

}

.dark .bottom-nav a.active{

background:#2d6cdf;

color:#fff;

}