styles.css

/* Background styling */
.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
body {
    font-family: 'Arial', sans-serif; /* Clean and modern font */
    background-color: #171717; /* Dark gray for a sleek look */
    color: #fff; /* White text for contrast */
    text-align: center;
    padding: 5px; /* Increased padding for a more spacious layout */
}

.tilt-container {
    width: 300px; /* Adjusted width for a smaller rectangle */
    height: 10px; /* Set a height for the popup */
    margin: 0 auto;
    border-radius: 15px; /* More rounded corners */
    position: relative; /* Position relative for absolute positioning of markers */
}

/* Title */
h1 {
    font-size: 34px; /* Adjusted font size for the title */
    color: #ffcc00; /* Gold text */
    margin-bottom: 10px; /* Reduced margin for a tighter look */
    font-family: 'Bebas Neue', serif; /* Elegant serif for casino style */
    text-shadow: 2px 2px #000; /* Slight shadow for a polished look */
}

/* Paragraphs */
p {
    font-size: 16px; /* Adjusted font size for better readability */
    color: #e0e0e0; /* Light gray for better contrast */
}

/* Tilt Bar */
#tilt-bar {
    width: 100%;
    height: 10px; /* Height for visibility */
    border-radius: 12px;
    background: linear-gradient(to right, rgb(0, 255, 0), rgb(255, 165, 0), rgb(255, 0, 0)); /* Smooth gradient from green to orange to red */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* A slight shadow for depth */
    transition: width 0.5s ease, background 0.5s ease; /* Smooth transition on width and color changes */
    position: relative; /* Position relative for markers */
}

/* Marker styles */
.markers {
    position: absolute; /* Position markers relative to the tilt bar */
    width: 100%; /* Make markers container full width */
    top: -30px; /* Adjust to move markers above the bar */
}

/* Individual marker styles */
.marker {
    position: absolute; /* Absolute position for markers */
    color: #fff; /* Color of the marker text */
    font-size: 14px; /* Font size for better readability */
    transform: translateX(-50%); /* Center the marker text above its position */
    margin-top: -5px; /* Space between marker text and line */
}

/* Vertical marker lines */
.marker-line {
    position: absolute; /* Position vertically */
    width: 2px; /* Width of the vertical line */
    height: 25px; /* Height of the vertical line */
    background-color: #ffcc00; /* Gold color for vertical lines */
    top: 30px; /* Position so that it appears on the bar */
}

/* Poker chip-inspired buttons */
button {
    background-color: #d32f2f; /* Red poker chip color */
    color: #fff;
    border: none;
    border-radius: 50%; /* Circular buttons like poker chips */
    width: 50px; /* Adjusted width for buttons */
    height: 50px; /* Adjusted height for buttons */
    font-size: 13px; /* Font size for button text */
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Slight shadow to give a raised look */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s; /* Smooth transitions for hover and press effects */
}

button:active {
    box-shadow: none;
    transform: translateY(3px); /* Press effect */
}

button:hover {
    background-color: #b71c1c; /* Darker red on hover */
}

.poker-chip {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: white;
    background-color: red; /* Base color of the poker chip */
    border: 4px solid white; /* White outer ring */
    border-radius: 50%; /* Circular shape */
    width: 120px; /* Diameter of the chip */
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Adds depth */
    position: relative;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
}

button::before {
    top: 20px;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(90deg);
}

.button:after {
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(90deg);
}

/* Add additional small stripes */
.button::before,
button::after {
    height: 10px;
    width: 24px; /* Small stripe width */
    background-color: white;
}