Here is the CSS:
Code:
/* Base adjustments for a dynamic neon theme */
body {
font-family: 'Verdana', Arial, Helvetica, sans-serif;
background-color: #000;
/* Deep black for high contrast */
color: #8aff00;
/* Bright neon lime green for text */
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Neon colors */
:root {
--neon-blue: #00c8ff;
--neon-pink: #ff00e0;
--neon-green: #39ff14;
--neon-yellow: #fffb00;
}
/* Hyperlinks with neon colors and dynamic glow */
a {
color: var(--neon-pink);
/* Neon pink */
text-decoration: none;
transition: color 0.3s ease-out;
}
a:hover {
color: var(--neon-blue);
/* Neon blue on hover */
text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
/* Glowing effect */
}
/* Container enhancements with neon glow */
.container,
.banner_container,
.inner {
background-color: #111;
/* Dark background */
border: 3px solid transparent;
border-image: linear-gradient(45deg, var(--neon-pink), var(--neon-blue), var(--neon-green)) 1;
/* Gradient border */
box-shadow: 0 0 15px var(--neon-green);
/* Neon glow */
}
/* Header and section headers with rainbow gradient text and glow */
.mainheadmiddle,
.sidebar__section-header {
background: linear-gradient(45deg, var(--neon-pink), var(--neon-yellow), var(--neon-green), var(--neon-blue), var(--neon-pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-text 10s ease infinite;
text-shadow: 0 0 10px #fff;
}
@keyframes rainbow-text {
0%,
100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
/* Nav buttons with neon glow */
.navbutton,
.navsearch {
background: #333;
/* Dark background */
color: var(--neon-green);
/* Neon green text */
text-shadow: 0 0 8px var(--neon-green);
/* Neon glow effect */
transition: box-shadow 0.3s ease-out;
}
.navbutton:hover,
.navsearch:hover {
box-shadow: 0 0 12px var(--neon-green), 0 0 24px var(--neon-pink);
/* Intense multi-color glow on hover */
}
/* Input styling with neon accents */
.navsearchinput {
background: #222;
/* Darker background */
color: var(--neon-blue);
/* Neon blue text */
border: 2px solid var(--neon-blue);
/* Neon blue border */
transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.navsearchinput:hover {
background: var(--neon-blue);
/* Neon blue background on hover */
color: #000;
/* Black text for contrast */
}
/* Animated gradient background for main body */
.mainbody {
background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #ff8c00, #ff0080);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
color: #fff;
/* White text for contrast */
text-shadow: 0 0 5px #fff;
/* White glow for readability */
}
@keyframes gradientShift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Further enhancing link glow effects */
a {
animation: glow 2s infinite alternate;
}
@keyframes glow {
0%,
100% {
text-shadow: 0 0 8px var(--neon-pink), 0 0 12px var(--neon-pink);
}
50% {
text-shadow: 0 0 12px var(--neon-blue), 0 0 20px var(--neon-blue);
}
}
/* This setup represents a more vibrant, dynamic neon theme, utilizing CSS variables, gradients, and animations for a visually captivating user interface. Adjustments to gradients, colors, and animations can be made to tailor the theme further to specific needs or preferences. */
