/* General Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: background-image 1s ease-in-out;
    --primary-color: #ffffff;
    --primary-glow: rgba(255, 255, 255, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.4);
    overflow-x: hidden;
}

main {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

/* Background Image Classes */
.bg1 { background-image: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop'); }
.bg2 { background-image: url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=2560&auto=format&fit=crop'); }
.bg3 { background-image: url('https://images.unsplash.com/photo-1433086966358-54859d0ed716?q=80&w=2560&auto=format&fit=crop'); }
.bg4 { background-image: url('https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=2560&auto=format&fit=crop'); }
.bg5 { background-image: url('https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?q=80&w=2560&auto=format&fit=crop'); }
.bg6 { background-image: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=2560&auto=format&fit=crop'); }
.bg7 { background-image: url('https://images.unsplash.com/photo-1472214103451-9374bd1c798e?q=80&w=2560&auto=format&fit=crop'); }
.bg8 { background-image: url('https://images.unsplash.com/photo-1431794062232-2a99a5431c6c?q=80&w=2560&auto=format&fit=crop'); }
.bg9 { background-image: url('https://images.unsplash.com/photo-1580133318324-f2f76d987dd8?q=80&w=2560&auto=format&fit=crop'); }
.bg10 { background-image: url('https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?q=80&w=2560&auto=format&fit=crop'); }

/* Override for the card in the web component */
lotto-generator::part(card) {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

lotto-generator::part(title) {
    color: #FFFFFF;
}

lotto-generator::part(text) {
    color: #E0E0E0;
}

lotto-generator::part(number) {
    background-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}