@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;
}
 .footer {
     align-items: center;
     background-color: var(--primary-bg-color);
     display: flex;
     justify-content: center;
     min-height: 60px;
     padding: 20px;
     position: relative;
}
 .footer::before {
     animation: gradient-animation 5s linear infinite;
     background: linear-gradient(90deg, red, yellow, green, cyan, blue, violet);
     background-size: 200% 100%;
     content: '';
     height: 2px;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
}
 .footer p {
     position: relative;
     margin: 0;
     color: var(--primary-text-color);
     font-family: 'Roboto', sans-serif;
     font-weight: 300;
     font-size: 12px;
     transition: color 0.3s;
     animation: fadeIn 2s ease-in-out 0s forwards;
}
 .footer p::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 1px;
     background-color: var(--hover-text-color);
     transition: width 0.3s;
}
 .footer p:hover {
     color: #fff;
}
 .footer p:hover::after {
     width: 100%;
}
 @keyframes gradient-animation {
     0% {
         background-position: 200% 0;
    }
     100% {
         background-position: -200% 0;
    }
}
 @keyframes fadeIn {
     from {
         opacity: 0;
    }
     to {
         opacity: 1;
    }
}