body {
    background: #000000;
    color: gold;
    text-align: center;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: auto;
    padding-top: 50px;
}

.logo {
    width: 200px;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: gold;
    font-size: 18px;
    padding: 10px;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: orange;
}

.background {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 20px;
}

body:not(.home) .background {
    width: 80%;
    margin: 30px auto;
}

button {
    background: gold;
    border: none;
    padding: 15px 30px;
    font-size: 20px;
    cursor: pointer;
    margin-top: 45px;
    border-radius: 5px;
    transition: background 0.3s, transform 0.2s;
}

button:hover {
    background: orange;
    transform: scale(1.05);
}

button:hover::after {
    content: "🎲 Good luck!";
    display: block;
    font-size: 14px;
    color: white;
    margin-top: 5px;
}

.image-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 45px 0;
    flex-wrap: wrap;
}

.float-image {
    width: 120px;
    height: auto;
    margin-right: 20px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    nav ul {
        flex-direction: column;
        gap: 10px;
    }
    .container {
        width: 95%;
    }
    .image-section {
        flex-direction: column;
        align-items: center;
    }
    .float-image {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

.card {
    font-size: 36px;
    background: #222;
    border: 2px solid gold;
    color: white;
    border-radius: 8px;
    width: 60px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roulette-game {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid orange;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    border-radius: 10px;
}
  
.roulette-game select,
.roulette-game input,
.roulette-game button {
    font-size: 18px;
    margin: 10px;
    padding: 8px;
}

#wheel {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    border: 10px solid #444;
    border-radius: 50%;
    background: conic-gradient(
        red 0deg 18deg, black 18deg 36deg, red 36deg 54deg, black 54deg 72deg,
        red 72deg 90deg, black 90deg 108deg, red 108deg 126deg, black 126deg 144deg,
        red 144deg 162deg, black 162deg 180deg, red 180deg 198deg, black 198deg 216deg,
        red 216deg 234deg, black 234deg 252deg, red 252deg 270deg, black 270deg 288deg,
        red 288deg 306deg, black 306deg 324deg, red 324deg 342deg, black 342deg 360deg
    );
    transition: transform 4s ease-out;
}

button, select, input {
    background: gold;
    border: none;
    padding: 15px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s, transform 0.2s;
}

button:hover, select:hover, input:hover {
    background: orange;
    transform: scale(1.05);
}