:root{--first-color:hsl(225,95%,56%);--black-color:hsl(225,12%,12%);--white-color:hsl(0,0%,100%);--text-color:hsl(225,8%,65%);--body-color:hsl(225,100%,99%)}.nav{position:fixed;bottom:0;left:0;right:0;background-color:rgba(13,15,23,.8);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(10px);width:100%;margin-inline:auto;box-shadow:0 2px 16px hsla(228,95%,4%,.1);padding:.7rem;border-radius:0;z-index:50}.nav__list{justify-content:space-between;list-style:none;margin:0;padding:0}.nav__link,.nav__list{display:flex;align-items:center}.nav__link{color:var(--text-color);font-size:1.5rem;transition:color .4s;flex-direction:column}.nav__link:hover{color:var(--white-color)}.nav__expand{border:none;outline:none;width:40px;height:40px;background-color:var(--first-color);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .4s}.nav__expand-icon{display:inline-block;color:var(--white-color);font-size:1.5rem;transition:transform .4s}.nav__expand-list{position:absolute;top:-4.5rem;left:0;right:0;background-color:rgba(13,15,23,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 16px hsla(228,95%,4%,.1);width:max-content;margin-inline:auto;padding:.4rem 1.2rem;border-radius:4rem;display:flex;column-gap:2rem;z-index:-1;overflow:hidden;transform:translateY(5rem) scale(.1);transition:transform .5s cubic-bezier(.5,1.8,.4,.8);opacity:0;visibility:hidden}.nav__expand-list li{transform:translateY(3rem);transition:transform .4s ease}.nav__expand-list li:first-child{transition-delay:.1s}.nav__expand-list li:nth-child(2){transition-delay:.15s}.nav__expand-list li:nth-child(3){transition-delay:.2s}.nav__expand-list.show-list{transform:translateY(0) scale(1);opacity:1;visibility:visible}.nav__expand-list.show-list li{transform:translateY(0)}.active-link{color:var(--white-color)}@media screen and (min-width:450px){.nav{width:350px}}.nav__label{display:none}.nav__expand-list .nav__label{display:block;font-size:.625rem;margin-top:.25rem}.nav__link i{font-size:1.5rem}.rotate-icon{transform:rotate(135deg)}.progress-bar{position:relative;height:2px;width:0;background-color:var(--accent);transition:width 1s ease-out;margin-top:0;margin-bottom:15px;border-radius:20px}.progress-bar.loading{width:100%;transition:width 4s cubic-bezier(.4,0,.2,1)}