1 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
    2
    3 :root {
    4   --background-color: #FFFFE0; /* Light Yellow */
    5   --card-background: rgba(42, 42, 42, 0.8);
    6   --primary-color: #ff4081;
    7   --secondary-color: #7c4dff;
    8   --text-color: #ffffff;
    9   --shadow-color: rgba(0, 0, 0, 0.5);
   10   --glow-color: rgba(255, 64, 129, 0.8);
   11   --font-main: 'Poppins', sans-serif;
   12 }
   13
   14 body {
   15   font-family: var(--font-main);
   16   background-color: var(--background-color);
   17   color: var(--text-color);
   18   display: flex;
   19   justify-content: center;
   20   align-items: center;
   21   min-height: 100vh;
   22   margin: 0;
   23   background-image: linear-gradient(45deg, var(--primary-color) 0%, var(--secondary-color) 100%);
   24 }
   25
   26 .container {
   27   background: var(--card-background);
   28   padding: 2rem 3rem;
   29   border-radius: 20px;
   30   text-align: center;
   31   box-shadow: 0 15px 30px var(--shadow-color), 0 10px 10px var(--shadow-color);
   32   backdrop-filter: blur(10px);
   33   -webkit-backdrop-filter: blur(10px);
   34   border: 1px solid rgba(255, 255, 255, 0.1);
   35 }
   36
   37 h1 {
   38   font-size: 2.5rem;
   39   font-weight: 700;
   40   color: var(--text-color);
   41   margin-bottom: 2rem;
   42   text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--primary-color);
   43 }
   44
   45 #generate-btn {
   46   background-color: var(--primary-color);
   47   color: var(--text-color);
   48   border: none;
   49   padding: 1rem 2.5rem;
   50   font-size: 1.2rem;
   51   font-weight: 600;
   52   border-radius: 50px;
   53   cursor: pointer;
   54   transition: all 0.3s ease;
   55   box-shadow: 0 0 20px var(--glow-color), 0 4px 15px rgba(0,0,0,0.4);
   56   position: relative;
   57   overflow: hidden;
   58 }
   59
   60 #generate-btn:hover {
   61   transform: translateY(-5px);
   62   box-shadow: 0 0 35px var(--glow-color), 0 8px 25px rgba(0,0,0,0.3);
   63 }
   64
   65 #generate-btn:active {
   66     transform: translateY(-2px);
   67     box-shadow: 0 0 20px var(--glow-color), 0 4px 15px rgba(0,0,0,0.4);
   68 }
   69
   70 #lotto-display {
   71   margin: 2rem 0;
   72   display: flex;
   73   justify-content: center;
   74   gap: 1rem;
   75 }
   76
   77 @media (max-width: 600px) {
   78   .container {
   79     padding: 1.5rem;
   80   }
   81   h1 {
   82     font-size: 2rem;
   83   }
   84   #lotto-display {
   85     gap: 0.5rem;
   86   }
   87 }