body {
background-color: var(--utilfoge-bg-base);
color: var(--utilfoge-text-base);
transition: background-color 0.3s ease, color 0.3s ease;
}  .utilfoge-text-gradient,
.text-gradient {
background-image: linear-gradient(var(--grad-angle, 90deg), var(--utilfoge-grad-1), var(--utilfoge-grad-2));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
} @keyframes utilfoge-gradient-spin {
0% {
--grad-angle: 0deg;
}
100% {
--grad-angle: 360deg;
}
}
.utilfoge-text-gradient.animated,
.text-gradient.animated {
animation: utilfoge-gradient-spin 4s linear infinite;
} .utilfoge-border-gradient,
.border-gradient {
border: 4px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: 
linear-gradient(var(--utilfoge-bg-base), var(--utilfoge-bg-base)),
linear-gradient(var(--grad-angle, 90deg), var(--utilfoge-grad-1), var(--utilfoge-grad-2));
}
.utilfoge-border-gradient.animated,
.border-gradient.animated {
animation: utilfoge-gradient-spin 4s linear infinite;
} .utilfoge-dark-mode-toggle {
background: transparent;
border: none;
cursor: pointer;
color: var(--utilfoge-text-base);
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
padding: 0.5rem;
transition: background-color 0.2s ease;
}
.utilfoge-dark-mode-toggle:hover {
background-color: var(--utilfoge-bg-surface);
}
.utilfoge-dark-mode-toggle svg {
width: 1.5rem;
height: 1.5rem;
}
html.dark .utilfoge-icon-sun {
display: none;
}
html.dark .utilfoge-icon-moon {
display: block !important;
}
html:not(.dark) .utilfoge-icon-moon {
display: none;
}
html:not(.dark) .utilfoge-icon-sun {
display: block !important;
}