html, body {
    margin: 0;
    user-select: none;
    background-color: #222;
    height: 100vh;
}

.form-container {
    background: radial-gradient(#2c2c2c, #1a1a1a);
    border: 2px solid #555;
    border-radius: 12px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 0 0 25px rgba(80, 0, 100, 0.2), 0 0 5px 2px rgba(13, 0, 108, 0.1);
    padding: 5vw;
}



.menu-container::before {
    position: absolute;
    inset: -8px;
    border-radius: 18px;
    border: 1px solid rgba(200, 140, 255, 0.15);
    box-shadow: 0 0 10px rgba(130, 0, 255, 0.08);
    pointer-events: none;
}

.menu-button {
    display: inline-block;
    width: 15vw;
    padding: 0.6rem 1.2rem;
    margin: 1.2rem 0;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #cccbd1;
    border: 1px solid #5e4a7f;
    border-radius: 8px;
    background: linear-gradient(to bottom, #1d1328, #2a1b3c);
    box-shadow: inset 0 0 15px rgba(150, 120, 255, 0.4);
    text-shadow: 0 0 7px rgba(0, 0, 0, 1);
    transition: all 0.25s ease;
    cursor: pointer;
}

    .menu-button.play {
        background: linear-gradient(to bottom, #1b3c20, #294860);
        border-color: #7a5bd3;
    }

        .menu-button.play:hover {
            background: linear-gradient(to bottom, #3b2960, #153f1e);
            box-shadow: 0 0 10px rgb(66 217 68 / 40%);
        }

    .menu-button.souls {
        background: linear-gradient(to bottom, #1f1b2a, #322d45);
        border-color: #675c80;
    }

        .menu-button.souls:hover {
            background: linear-gradient(to bottom, #322d45, #4d4664);
            box-shadow: 0 0 10px rgba(120, 110, 150, 0.3);
        }

    .menu-button.demons {
        background: linear-gradient(to bottom, #1b0f19, #291625);
        border-color: #553a4c;
    }

        .menu-button.demons:hover {
            background: linear-gradient(to bottom, #291625, #3e2137);
            box-shadow: 0 0 10px rgba(100, 40, 80, 0.3);
        }