@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Poppins', sans-serif;
}

body {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 background: #06021b;
} */

.navigation {
 right: 15px;
 background: linear-gradient(45deg, #2196f3, #e91e63);
 position: relative;
 width: 400px;
 height: 70px;
 /* background: linear-gradient(45deg, #0b365a, #6d0c2c); */
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 10px;
 z-index: 2;
}

.navigation ul {
 display: flex;
 width: 350px;
}

.navigation ul li {
 position: relative;
 width: 70px;
 height: 70px;
 list-style: none;
 z-index: 1;
 cursor: pointer;
}

.navigation ul li a {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 width: 100%;
 text-align: center;
 font-weight: 500;
}

.navigation ul li a .icon {
 position: relative;
 display: block;
 line-height: 75px;
 font-size: 1.5em;
 text-align: center;
 color: #d3d0d0;
 transition: .5s;
}

.hover-text {
 /* display: none; */
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%);
 background-color: rgba(0, 0, 0, 0.8);
 color: white;
 padding: 5px;
 border-radius: 10px;
 white-space: nowrap;
 margin-top: 5px;
 z-index: 10;
 opacity: 0;
 font-size: 15px;
 transition: opacity 0.3s ease-in-out;
}

.navigation ul li a:hover+ .hover-text {
 /* display: block; */
 opacity: 1;
}

.change-theme + .hover-text {
 left: 12px;
 /* right: 10px; */
}

.navigation ul li.active a .icon {
 transform: translateY(30px) translateX(0px);
}

.navigation ul li:nth-child(6).active a .icon {
 transform: translateY(25px) translateX(0px);
}

.navigation ul li a .text {
 position: absolute;
 color: #fff;
 font-weight: 400;
 font-size: .75em;
 letter-spacing: .05em;
 opacity: 0;
 transform: translateY(20px);
 transition: .5s;
}

.navigation ul li.active a .text {
 opacity: 1;
 transform: translateY(-13px);
}

.navigation ul li a .circle {
 top: 10px;
 position: absolute;
 display: block;
 width: 45px;
 height: 45px;
 background: transparent;
 border-radius: 50%;
 border: 1.8px solid #fff;
 transform: translateY(-37px) scale(0);
}

.navigation ul li.active a .circle {
 transition: .5s;
 transition-delay: .5s;
 transform: translateY(32px) scale(1) translateX(0px);
}

.indicator {
 position: absolute;
 top: 50%;
 left: 7.5%;
 width: 60px;
 height: 60px;
 background: linear-gradient(45deg, #2196f3, #e91e63);
 border: 6px solid #6e0789;
 /* border: 6px solid #7b5800; */
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: .5s, background 0.5s ease-in-out;
}

.indicator::before {
 content: '';
 position: absolute;
 /* transform: rotate(180deg); */
 /* top: 10%; */
 top: 48%;
 left: -22px;
 width: 20px;
 height: 20px;
 background: transparent;
 border-top-right-radius: 20px;
 box-shadow: 1px -10px 0 #790d29;
 /* box-shadow: 1px -10px 0 #7b5800; */
 /* box-shadow: 1px -10px 0 #06021b; */
}

.indicator::after {
 /* transform: rotate(180deg); */
 /* top: 10%; */
 content: '';
 position: absolute;
 top: 48%;
 right: -22px;
 width: 20px;
 height: 20px;
 background: transparent;
 border-top-left-radius: 20px;
 box-shadow: #790d29 -1px -10px 0px;
 /* box-shadow: -1px -10px 0 #7b5800; */
 /* box-shadow: -1px -10px 0 #06021b; */
}

.navigation ul li:nth-child(1).active~.indicator {
 transform: translateX(-13px) rotate(180deg);
}

.navigation ul li:nth-child(2).active~.indicator {
 transform: translateX(calc(40px * 0.75)) rotate(180deg);
}

.navigation ul li:nth-child(3).active~.indicator {
 transform: translateX(calc(40px * 1.85)) rotate(180deg);
}

.navigation ul li:nth-child(4).active~.indicator {
 transform: translateX(calc(40px * 2.94)) rotate(180deg);
}

.navigation ul li:nth-child(5).active~.indicator {
 transform: translateX(calc(40px * 4.03)) rotate(180deg);
}

.navigation ul li:nth-child(6).active~.indicator {
 transform: translateX(calc(40px * 5.15)) rotate(180deg);
}

.navigation ul li:nth-child(7).active~.indicator {
 transform: translateX(calc(40px * 6.25)) rotate(180deg);
}

@media screen and (max-width: 1212px) {
 .navigation {
  right: unset;
 }
}