Fix the gradient

This commit is contained in:
Maxwell Jeffress 2024-11-26 08:32:22 +11:00
parent 500ac029df
commit c07a2c7fce

View File

@ -1,43 +1,21 @@
/* Reset default margin and ensure full viewport coverage */ /* Credit to Manuel Pinto on Codepen for the code!
https://codepen.io/P1N2O/pen/pyBNzX */
body { body {
margin: 0; background: linear-gradient(-33deg, #721c7a, #612bd4, #3aa5c5, #30cf7f);
min-height: 100vh; background-size: 400% 400%;
background: linear-gradient( animation: gradient 120s ease infinite;
30deg, height: 100vh;
#50C878, /* green */
#7FFFD4, /* aqua */
#87CEEB, /* light blue */
#00008B, /* dark blue */
#800080, /* purple */
#50C878, /* green */
#7FFFD4, /* aqua */
#87CEEB, /* light blue */
#00008B, /* dark blue */
#800080, /* purple */
#50C878 /* green */
);
background-size: 1000% 1000%;
animation: gradient 120s ease infinite;
} }
/* Gradient animation keyframes */
@keyframes gradient { @keyframes gradient {
0% { 0% {
background-position: 0% 50%; background-position: 0% 50%;
} }
100% { 50% {
background-position: 200% 50%; background-position: 100% 50%;
} }
100% {
background-position: 0% 50%;
}
} }
/* Optional: styling for centered content */
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: sans-serif;
font-size: 2rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}