body#categories-page {
    margin: 0;
    min-height: 100vh;
    font-family: 'Press Start 2P', monospace;
    background-image: url("art1.gif");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

body#categories-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(10, 0, 25, 0.75);
    z-index: 0;
}

.overlay-stars {
    position: fixed;
    inset: 0;
    background-image: radial-gradient(#ff69b4 1px, transparent 1px),
                      radial-gradient(#b084ff 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px;
    animation: moveStars 50s linear infinite;
    opacity: 0.25;
    z-index: 1;
}

@keyframes moveStars {
    from { background-position: 0 0, 0 0; }
    to { background-position: 300px 500px, -400px 700px; }
}

.categories-container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 900px;
    padding: 60px 40px;
    background: rgba(30, 0, 60, 0.6);
    border: 3px solid #ff69b4;
    border-radius: 20px;
    box-shadow: 0 0 30px #b084ff, 0 0 60px #ff69b4;
    text-align: center;
}

.page-title {
    font-family: 'Creepster', cursive;
    font-size: 60px;
    margin-bottom: 50px;
    color: #fff38c;
    text-shadow: 0 0 15px #ff69b4, 0 0 25px #b084ff;
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.cat-button {
    display: block;
    padding: 25px 10px;
    background: linear-gradient(45deg, #ff69b4, #b084ff);
    border: 3px solid #fff38c;
    border-radius: 12px;
    color: black;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.cat-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px #ff69b4, 0 0 40px #b084ff;
    color: white;
}

.cat-button.back {
    background: linear-gradient(45deg, #444, #888);
    color: white;
    border: 3px solid #fff38c;
}

.description {
    font-size: 12px;
    line-height: 1.8;
    color: #ddd;
    max-width: 700px;
    margin: 0 auto;
}

.description p {
    margin-bottom: 20px;
}

@media (max-width: 1024px) {
    .page-title {
        font-size: 40px;
    }

    .cat-button {
        font-size: 12px;
        padding: 18px 10px;
    }

    .description {
        font-size: 11px;
    }
}