body {
    background-color: #121212;
    color: #fff;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

header {
    background-color: #1e1e1e;
    padding: 1rem;
    text-align: center;
}

header h1 {
    margin: 0;
}

nav {
    margin-top: 0.5rem;
}

nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 1rem;
}

main {
    padding: 2rem;
}

#slider {
    margin-bottom: 2rem;
}

.slider-container {
    /* Add slider styles here */
    height: 200px; /* Example height */
    background-color: #2c2c2c;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent items from wrapping */
    padding: 1rem;
}

.slider-item {
    display: inline-block;
    margin-right: 1rem;
    text-align: center;
}

.slider-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
}

#editor {
    /* Add editor styles here */
    background-color: #2c2c2c;
    padding: 1rem;
}

footer {
    background-color: #1e1e1e;
    padding: 1rem;
    text-align: center;
}

/* Background animation */
body::before {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, #00bcd4, #9c27b0, #e91e63, #f44336, #ff5722, #ff9800, #ffeb3b, #cddc39, #8bc34a, #4caf50, #009688, #00bcd4);
    background-size: 400% 400%;
    animation: animate 10s linear infinite;
    z-index: -1;
}

@keyframes animate {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}