styles.css

body{

    background: linear-gradient(45deg, #2206bc, rgb(38, 143, 254));

}




.txtContainer{
text-align: center;
display: flex;
flex-direction: column;
line-height: 20%;
align-items: center;
justify-content: center;
}


input[type="number"] {
font-size: 15px;
border: none;
background: transparent;
cursor: pointer;
height: 15px;
width: 30px;

}
input[type="number"]:focus {
outline: none;
border-color: #03080e;
box-shadow: 0 0 5px #012950;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
  appearance: none;
 margin: 0;
}
td,th{
width: 5px;
text-align: center;
padding: 5px;
background-color: rgb(110, 158, 208);
}    

h1,h2,h3,p{
    color: rgb(220, 217, 233);
}



.center-button-container {
    text-align: center;
}

.form-button {
    padding: 10px 20px;
    background: linear-gradient(45deg, #010b0b, rgb(24, 129, 241));
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
    margin: 5px;
    display: inline-block; /* This makes the button behave like an inline element */
}

.form-button:hover {
    background-color: maroon;
    padding: 20px 30px;
}

.form-button:focus {
    outline: none;
}
.cid{
    color: white;
}


.submit-button {
    padding: 10px 20px;
    background: linear-gradient(45deg, #010b0b, rgb(24, 129, 241));
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
    margin: 5px;
    text-align: center;
}

.submit-button:hover {
    background-color: maroon;
    padding: 20px 30px;
}

.submit-button:focus {
    outline: none;
}

 .popup {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 999;
 }

 .popup-content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: linear-gradient(45deg, #010b0b, rgb(24, 129, 241));
     color: white;
     padding: 20px;
     border-radius: 5px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     text-align: center;
 }

 .close {
     position: absolute;
     top: 10px;
     right: 10px;
     font-size: 20px;
     cursor: pointer;
 }

 /* Animation for the popup */
 .popup.show {
     display: block;
     animation: fadeIn 0.5s;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }