* {text-align: center; color: azure;}

body {background-image:  url('../img/bluebg.jpg'); }
section {margin: 64px auto;}
h1{font-size: 32px; margin: 0; color: #e1ff36; text-shadow: 1px 1px 4px #000;}
#headingText {font-size: 16p; margin: 8px auto; color: #fff;}
.subInfo {display: flex; width: 95%; margin: auto; justify-content: space-between; margin: 16px auto;}
#secondSection {box-shadow: 0 0 2px #fff; width: 95%; margin: auto; border-radius: 10px; background-color: #000}
h2 {margin: 16px auto; font-size: 24px; padding-top: 8px;}
#howItWorks {display: flex; justify-content: space-around;}
#games {margin: 32px auto 0; display: flex; justify-content: space-around; }
h3{margin: 8px auto; font-size: 18px;}
/*  */
.game {
    width: 60%;
    min-height: 150px;
    background-image: url('../img/board1.jfif'); 
    background-color: #d1d3d4; 
    padding: 8px; border-radius: 10px; box-shadow: 0px 0px 2px #fff;
    margin: 32px auto;

}
.game .inpGrp, .game .gmDetail {
    display: flex;
    justify-content: space-between;
    margin: 8px auto;
}
.game span, .game div{ color: #000;}
form .inpGrp {
    padding: 8px;
    
}

.inpGrp input {padding: 4px; }
label {color: #000;}
.game input {display: inline; width: fit-content;}
.game button {margin-top: 16px;}
.game h4 {color: #000; font-weight: 600;}

/* .game span {margin: 8px auto; display: block;} */
/* .game button, .primaryCTA{padding: 4px 16px; border-radius: 10px; border: none;background-color: #000; color: #fff;} */
/* .primaryCTA {} */ 
.primaryCTA {
    background-color: #000; 
    color: #fff; border: 2px solid #fff; 
    font-weight: 600; box-shadow: 1px 1px 2px #000;
    font-size: 18px;
    border: none;
    padding: 4px 16px;
    border-radius: 10px;
}

.secondaryCTA {
    background-color: rgba(0, 0, 0, 0); 
    color: #fff; border: 2px solid #fff; 
    font-weight: 600; box-shadow: 1px 1px 2px #000;
    font-size: 18px;
    padding: 4px 16px;
    border-radius: 10px;
}

input, select {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-bottom: 1px solid #fff;
}

.game input {
    color: black;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-bottom: 1px solid #000;
}
    
#leagueTable {
    width: 95%; background-color: #000; 
    margin: auto; border-radius: 10px; 
    box-shadow: 0 0 2px #fff;
}
#leagueTable th, #leagueTable td{padding: 4px 0;}
.instructions {width: 95%; margin: auto; list-style-type: disc}
.instructions li {
    text-align: left;
    margin: 8px auto;
}
#transactionSection {display: flex; width: 95%; margin: auto; justify-content: space-around;}

.error {color: red; margin: 16px auto;}
#leagueCountDown, #leaguePrize {
    color: #e1ff36; font-weight: 600; 
    padding-left: 4px; font-size: 18px;
    text-shadow: 0 0 2px #000;
    
}

.modal {
    display: none;
    border-radius: 10px;
    box-shadow: 1px 1px 2px #000;
    position: fixed;
    background-image: url('../img/whitebg.jpg');
    top: 25%;
    width: 80%;
    min-height: 200px;
    left: 10%;
}

.modalRelative {
    position: relative;
    width: 100%;
    height: 100%;
}
.closeModal {
    color: blue;
    font-size: 26px;
    font-weight: 800;
    position: absolute;
    top: 0;
    right: 4px;

}

.modal h3, .modal p, .modal span, .modal label, .modal i, .modal a{
    color: #000;
}

.modal h3 {
    margin-top: 16px;
}

.modal input, .modal option, select {
    border: none;
    border-bottom: 1px solid #000 ;
    color: #000;
}

select {padding: 4px;}

.modal #currentBalanceInfo, .modal .modalSupportInfo {
    margin: 10px auto;
}