.navigation {
   display: block;
   position: fixed;
   height: 100vh;
   width: 70px;
   top: 0;
   background: linear-gradient(300deg, rgba(124, 242, 255, 0.23), rgba(225, 255, 215, 0.13) 22%, rgba(129, 255, 143, 0.3)38%, rgba(255, 255, 255, 0.13) 74%, rgba(255, 175, 216, 0.3)100%);
   border: 10px solid var(--sub);
   transition: width 0.5s ease-in-out;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   z-index: 9998;
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(8px);
   background-size: 150% 150%;
   overflow: hidden;
   box-shadow: 1px 5px 5px rgba(46, 46, 46, 0.35), inset 1px 1px 5px rgba(46, 46, 46, 0.35);
}

.navigation img {
   position: relative;
   width: 50px;
   left: -3px;
   margin-top: -5vmin;
   margin-bottom: 5vmin;
}

.navigation:hover {
   width: 300px;
}
.navigation ul {
   display: block;
   position: absolute;
   top: 20vmin;
   left: 10%;
   width: 100%;
}
.navigation ul li {
   list-style: none;
   display: block;
   position: relative;
   width: 92%;
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;

}
.nav-bot {
   font-weight: bold;
   padding: 0.25rem 0.5rem;
}
.navigation ul li a,
.navigation ul li .nav-bot {
   font-family: "Yomogi", cursive;
   position: relative;
   text-decoration: none;
   color: var(--text);
   width: 100%;
   display: flex;
   align-items: center;
   transition: all 0.3s ease-in-out;
}
.navigation ul li:hover {
   transform: scale(1.1);
   background-color: rgba(213, 206, 194, 0.5);
}
/* .active */
.navigation ul li.active {
   background-color: var(--sub) !important;
   transition: box-shadow 0.5s ease-in-out;
   box-shadow: 1px 1px 5px rgba(46, 46, 46, 0.35);
   z-index: 100;
}
.navigation ul li.active:hover {
   transform: scale(1);
}
.navigation ul li.active .nav-bot::before,
.navigation ul li.active .nav-bot::after,
.navigation ul li.active a::before,
.navigation ul li.active a::after {
   content: "";
   position: absolute;
   width: 45px;
   height: 50px;
   right: 0;
   border-radius: 40%;
   box-shadow: 25px 15px 0 var(--sub);
}
.navigation ul li.active .nav-bot::before,
.navigation ul li.active a::before {
   top: -49px;
}
.navigation ul li.active .nav-bot::after,
.navigation ul li.active a::after {
   bottom: -49px;
   box-shadow: 25px -15px 0 var(--sub);
}
.navigation ul li a .icon,
.navigation ul li .nav-bot .icon {
   display: block;
   min-width: 35px;
   height: 60px;
   line-height: 70px;
   text-align: center;
}
.navigation ul li a .icon ion-icon,
.navigation ul li .nav-bot .icon ion-icon {
   font-size: 2.4rem;
   transition: transform 0.3s ease-in-out;
}
.navigation ul li a .title,
.navigation ul li .nav-bot .title {
   height: 60px;
   padding-left: 7px;
   line-height: 60px;
   white-space: nowrap;
}
.navigation ul li:hover .icon ion-icon {
   transform: scale(1.25);
}
.navigation ul li.active .icon ion-icon {
   transform: scale(1.5);
}