body {
    margin: 0;
    padding: 0;
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    text-shadow: 2px 2px 8px #000;
    overflow: hidden;
    cursor: none;
}

.chaos {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.cryptic-image {
    position: absolute;
    top: 50%;
    left: 52%;
    width: 80vw;
    max-width: 600px;
    height: auto;
    transform: translate(-50%, -50%);
    animation: float 5s infinite alternate;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fade 3s infinite alternate-reverse;
}

.question {
    position: absolute;
    font-size: 2em;
    top: 10%;
    left: 20%;
    transform: rotate(-10deg);
    animation: moveText 10s infinite linear;
    color: red;
}

.creepy-eyes {
    position: absolute;
    bottom: 5%;
    right: 10%;
    width: 60vw;
    max-width: 400px;
    height: auto;
    animation: glitch 3s infinite;
}

@keyframes float {
    from { transform: translate(-50%, -50%) translateY(-20px); }
    to { transform: translate(-50%, -50%) translateY(20px); }
}

@keyframes fade {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

@keyframes moveText {
    0% { top: 10%; left: 20%; }
    25% { top: 30%; left: 60%; }
    50% { top: 70%; left: 40%; }
    75% { top: 40%; left: 10%; }
    100% { top: 10%; left: 20%; }
}

@keyframes glitch {
    0% { transform: translate(0); opacity: 1; }
    20% { transform: translate(-10px, 10px); opacity: 0.8; }
    40% { transform: translate(10px, -10px); opacity: 0.6; }
    60% { transform: translate(-10px, -10px); opacity: 0.4; }
    80% { transform: translate(10px, 10px); opacity: 0.2; }
    100% { transform: translate(0); opacity: 1; }
}