@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
 :root {
     --primary-bg-color: #1e2124;
     --primary-text-color: #b3b3b3;
     --hover-text-color: #fff;
     --active-text-color: #fff;
     --primary-font: 'Roboto', sans-serif;
}
 body {
     margin: 0;
     font-family: 'Arial, sans-serif';
     overflow-x: hidden;
}
 .navbar {
     align-items: center;
     background-color: var(--primary-bg-color);
     display: flex;
     font-family: var(--primary-font);
     justify-content: center;
     padding: 20px;
     position: relative;
}
 .navbar::after {
     animation: gradient-animation 5s linear infinite;
     background: linear-gradient(90deg, red, yellow, green, cyan, blue, violet);
     background-size: 200% 100%;
     bottom: 0;
     content: '';
     height: 2px;
     left: 0;
     position: absolute;
     width: 100%;
}
 .navbar .nav-left {
     display: flex;
     gap: 20px;
     margin-right: 20px;
}
 .navbar .nav-right {
     display: flex;
     gap: 20px;
     margin-left: 20px;
}
 .navbar .nav-center {
     align-items: center;
     color: var(--hover-text-color);
     display: flex;
     font-size: 24px;
     gap: 10px;
     margin: 0 50px;
}
 .navbar .nav-center .dice-icon {
     animation: dice-animation 10s cubic-bezier(.36,.07,.19,.97) infinite;
     font-size: 30px;
     perspective: 600px;
     transform-style: preserve-3d;
     user-select: none;
}
 .navbar a {
     color: var(--primary-text-color);
     font-size: 18px;
     font-weight: 500;
     letter-spacing: 0.5px;
     position: relative;
     text-decoration: none;
     transition: color 0.5s, transform 0.5s;
}
 .navbar a:hover {
     color: var(--hover-text-color);
     transform: scale(1.05);
}
 .navbar a.active {
     color: var(--active-text-color);
}
 .navbar a.active::after {
     background-color: var(--hover-text-color);
     bottom: -5px;
     content: '';
     height: 2px;
     left: 0;
     position: absolute;
     width: 100%;
}
 @media (max-width: 600px) {
     .navbar {
         align-items: flex-start;
         flex-direction: column;
         padding: 15px;
    }
     .navbar .nav-left, .navbar .nav-right {
         gap: 10px;
         margin: 10px 0;
    }
     .navbar .nav-center {
         font-size: 20px;
         margin: 10px 0;
    }
     .navbar a {
         font-size: 16px;
    }
}
 @media (min-width: 601px) and (max-width: 900px) {
     .navbar .nav-center {
         font-size: 22px;
    }
     .navbar a {
         font-size: 18px;
    }
}
 @keyframes gradient-animation {
     0% {
         background-position: 200% 0;
    }
     100% {
         background-position: -200% 0;
    }
}
 @keyframes dice-animation {
     0%, 20% {
         transform: translate(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     2%, 18% {
         transform: translate(-10px, -5px) rotateX(10deg) rotateY(10deg) rotateZ(10deg);
    }
     4%, 16% {
         transform: translate(10px, 5px) rotateX(-10deg) rotateY(-10deg) rotateZ(-10deg);
    }
     6%, 14% {
         transform: translate(-10px, 5px) rotateX(10deg) rotateY(10deg) rotateZ(10deg);
    }
     8%, 12% {
         transform: translate(10px, -5px) rotateX(-10deg) rotateY(-10deg) rotateZ(-10deg);
    }
     10% {
         transform: translate(0) scale(1.1);
    }
     25%, 40% {
         transform: rotateY(180deg) scale(1);
         box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }
     50% {
         transform: rotateY(180deg) scale(1);
    }
     55% {
         transform: translateX(0) translateY(0) scale(1.05);
         opacity: 1;
    }
     60% {
         transform: translateX(0) translateY(0) scale(0.95);
    }
     65% {
         transform: translateX(0) translateY(0) scale(1.05);
    }
     100% {
         transform: translateX(100px) translateY(-50px) scale(0) rotateZ(360deg);
         opacity: 0;
         box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    }
}