html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.landing-content {
    width: 100%;
    height: 100%;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    background: url('/static/images/hahaha.webp') no-repeat center center fixed;
    background-size: 110% 110%; /* or use 'contain' if you want the whole image visible */
    background-position: center;
    /* Animation settings */
    animation: bg-move 30s linear infinite;
}

/* Animate background position diagonally */
@keyframes bg-move {
    0% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 100% 0%;
    }
}

.landing-content h1 {
    margin-top: auto; /* pushes h1 to the bottom */
    display: flex;
    font-family: 'Orbitron', sans-serif;
    font-size: 5.5rem;
    letter-spacing: 1px;
    flex-direction: column;
    /* Remove height: 100%; and justify-content: center; */
    text-align: center;
    color: #ffe6e6;
    text-shadow: 10px 10px 10px #000000;
    font-weight: bold;
}

.landing-content p {
    margin-top: auto; /* pushes h1 to the bottom */
    display: flex;
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    letter-spacing: 1px;
    flex-direction: column;
    /* Remove height: 100%; and justify-content: center; */
    text-align: center;
    color: #ffe6e6;
    text-shadow: 10px 10px 10px #000000;
    font-weight: bold;
}

.landing-content a {
    margin-top: auto; /* pushes h1 to the bottom */
    display: flex;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
    flex-direction: column;
    /* Remove height: 100%; and justify-content: center; */
    text-align: center;
    color: #ffe6e6;
    text-shadow: 10px 10px 10px #000000;
    list-style: none;
    text-decoration: none;
    font-weight: bold;
}