html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background-color: black;
}

.background {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
animation: hueRotate 20s linear infinite;
filter: hue-rotate(0deg);
z-index: 0;
transition: opacity 1s ease-in-out;
}

@keyframes hueRotate {
from {
    filter: hue-rotate(360deg);
}
to {
    filter: hue-rotate(0deg);
}
}

.background-rotate {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 2s ease-in-out;
pointer-events: none;
}

.background-rotate.active {
opacity: 1;
transition: opacity 1s ease-in-out;
}

.author {
position: fixed;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 600;
bottom: 8px;
left: 8px;
color: white;
opacity: 0;
font-size: 22px;
z-index: 10;
transition: opacity 1s ease-in-out;
}

.overlay-top, .overlay-bottom {
position: fixed;
left: 0;
width: 100%;
height: 20%;
pointer-events: none;
z-index: 2;
}

.overlay-top {
top: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
}

.overlay-bottom {
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
}

.title-container {
position: fixed;
top: 2%;
left: 1%;
display: flex;
align-items: center;
z-index: 10;
pointer-events: none;
}

.center-logo {
opacity: 0.2;
transition: opacity 1s ease-in-out;
}

.center-logo svg {
width: 7vh;
height: auto;
mix-blend-mode: hue;
pointer-events: none;
}

.title-banner {
font-family: 'Roboto', sans-serif;
font-size: clamp(24px, 4vw, 44px);
padding-bottom: 1px;
font-weight: 900;
color: rgb(255, 255, 255);
opacity: 0.5;
transition: opacity 1.5s ease-in-out;
white-space: nowrap;
}

.title-banner.shimmer {
position: relative;
background: linear-gradient(120deg, #ffffff 20%, #e0e0e07a 40%, #ffffff 60%);
background-size: 200% auto;
background-position: -100% center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmerText 5s linear infinite;
}

@keyframes shimmerText {
0% {
    background-position: 200% center;
}
100% {
    background-position: -200% center;
}
}

.tip-box {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
padding: 15px 20px;
border-radius: 12px;
color: white;
font-family: sans-serif;
text-align: center;
width: 90%;
max-width: 90%;
word-wrap: break-word;
transition: opacity 0.5s ease;
z-index: 2;
}

.tip-title {
font-family: 'Roboto', serif;
font-weight: 900;
margin-bottom: 5px;
font-size: 24px;
opacity: 0;
transition: opacity 0.5s ease;
}

.tip-text {
font-family: 'Funnel Sans', sans-serif;
font-size: 22px;
opacity: 0;
transition: opacity 0.5s ease;
}