83 lines
1.7 KiB
CSS
83 lines
1.7 KiB
CSS
:root {
|
|
--gradient-start: #FCAE4E;
|
|
--gradient-end: #FFC95C;
|
|
--neocat-scale: 0.2;
|
|
--footer-height: 100px;
|
|
--color-text-default: #000000;
|
|
--color-footer: #3d3d3d;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: monospace, sans-serif;
|
|
background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
|
|
background-size: 200% 200%;
|
|
animation: gradientAnimation 5s ease-in-out infinite;
|
|
color: var(--color-text-default);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background: linear-gradient(to bottom, var(--gradient-end), var(--gradient-start));
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
@keyframes gradientAnimation {
|
|
0%, 100% {
|
|
background-position: 0% 0%;
|
|
}
|
|
50% {
|
|
background-position: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.neocat {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) scale(var(--neocat-scale));
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translate(-50%, -50%) scale(var(--neocat-scale)) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translate(-50%, calc(-50% - 5%)) scale(var(--neocat-scale)) rotate(-5deg);
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--color-text-default);
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus {
|
|
color: #FFC95C;
|
|
}
|
|
|
|
footer {
|
|
color: var(--color-footer);
|
|
position: absolute;
|
|
left: 0;
|
|
text-align: center;
|
|
bottom: 0;
|
|
height: var(--footer-height);
|
|
width: 100%;
|
|
overflow: hidden;
|
|
} |