/* CSS for the lottery game */
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
}
.container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
h1 {
    color: #143358;
    font-size: 3em;
    margin-top: 2em;
}
p {
    color: #555;
    font-size: 1.2em;
    margin-top: 1em;
}
button {
    /*padding: 10px 20px;*/
    background-color: #143358;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 2em;
}

.number-button {
    background-color: #f5f5f5;
    border: 2px solid #ccc;
    border-radius: 5px;
    color: #333;
    font-size: 20px;
    /*padding: 10px 20px;*/
}

.number-button.selected {
    background-color: #ff6961;
    color: #fff;
}

.number-button.correct-number {
    background-color: #add8e6;
    color: #fff;
}

.play-again {
    background-color: rgb(88, 198, 222);
    color: white;
}
.go-home {
    background-color: white;
    color: black;
}

.cash-amount {
    background-color: #7de26d;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-block;
}
.message {
    padding: 10px;
    background-color: whitesmoke;
    color: #555;
    border-radius: 5px;
    font-size: 1.2rem;
    margin-bottom: 20px;
    border: 1px dashed saddlebrown;
}

.circle-wrapper {
   width:501px;
   height:501px;
   border-radius:51%;
   background:Chartreuse;
   position:relative;
   margin:100px;
}

.circle {
   display:block;
   position:absolute;
   top:51%;
   left:51%;
   width:100px;
   height:100px;
   margin:-51px;
   background:red;
   border-radius:51%;
   text-align:center;
   line-height:100px;
}

.deg-1 {
   transform:translate(251px)
}

.deg-2 {
   transform:rotate(36deg) translate(251px) rotate(-37deg);
}

.deg-3 {
   transform:rotate(72deg) translate(251px) rotate(-73deg);
}

.deg-4 {
   transform:rotate(108deg) translate(251px) rotate(-109deg);
}

.deg-5 {
   transform:rotate(144deg) translate(251px) rotate(-145deg);
}

.deg-6 {
   transform:rotate(180deg) translate(251px) rotate(-181deg);
}

.deg-7 {
   transform:rotate(216deg) translate(251px) rotate(-217deg);
}

.deg-8 {
   transform:rotate(252deg) translate(251px) rotate(-253deg);
}

.deg-9 {
   transform:rotate(288deg) translate(251px) rotate(-289deg);
}

.deg-10 {
   transform:rotate(324deg) translate(251px) rotate(-325deg);
}