html, * {
    font-family: helvetica;
    box-sizing: border-box;
}

body {
    display: grid;
    justify-content: center;
    align-items: center;
    /* https://leaverou.github.io/css3patterns/#upholstery Nate Engel*/
    background:
    radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
    radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
    radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
    radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
    radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
    radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
    radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
    radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
    linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
    linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
    background-color: #300;
    background-size: 100px 100px;
}

main {
    
    height: auto;
    display: grid;
    grid-template-columns: 10vh 10vh 10vh 10vh 10vh 10vh 10vh 40vh;
    grid-template-rows: 10vh 10vh 10vh 10vh 10vh 10vh 10vh;
}

main * {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: darkgreen;
    background-image: url(/assets/felt.png);
    background-repeat: repeat;
}

main div {
    border: 1px solid black;
}

#come {
    grid-column: 1 / 6;
    grid-row: 2 / 4;
}

#anySeven {
    grid-column: 6 / 8;
    grid-row: 2;
}

#fieldTop {
    grid-column: 1 / 6;
    grid-row: 4 / 5;
    border-bottom: none;
    word-spacing: 30px;
}

#fieldBottom {
    grid-column: 1 / 6;
    grid-row: 5 / 6;
    border-top: none;
}

#dontPass {
    grid-column: 1 / 6;
    grid-row: 6;
}

#passLine {
    grid-column: 1 / 6;
    grid-row: 7;
}

#anyCraps {
    grid-column: 6 / 8;
    grid-row: 7;
}

#hardFour {
    grid-column: 6 / 7;
    grid-row: 3;
}

#hardTen {
    grid-column: 7 / 8;
    grid-row: 3;
}

#hardSix {
    grid-column: 6 / 7;
    grid-row: 4;
}

#hardEight {
    grid-column: 7 / 8;
    grid-row: 4;
}

#anyThree {
    grid-column: 6 / 7;
    grid-row: 5;
}

#anyEleven {
    grid-column: 7 / 8;
    grid-row: 5;
}

#anyTwo {
    grid-column: 6 / 7;
    grid-row: 6;
}

#anyTwelve {
    grid-column: 7 / 8;
    grid-row: 6;
}
.sideBet {
    font-size: 4vmin;
}

.pointRow {
    font-size: 3vmin;
 
}

#dontCome {
    text-align: center;
}

.center {
    font-size: 3vmin;
}

section.bottomRow {
    display: grid;
    grid-template-columns: 7vh 7vh 7vh 7vh 7vh 7vh 7vh 7vh 7vh 7vh 30vh;
    grid-template-rows: 7vh 7vh;
    justify-items: center;
    background-color: darkgreen;
    background-image: url(/assets/felt.png);
    
}

.chip {
    display: flex;
    border-radius: 50%;
    height: 5vmin;
    width: 5vmin;
    align-items: center;
    justify-content: center;
}

.bottomRow {
    align-items: center;
}

#chipTotal {
    grid-column: 1 / 3;
    grid-row: 2;
    font-size: 2.75vh;
}

#chipDisplay {
    grid-column: 3 / 5;
    grid-row: 2;
    font-size: 2.75vh;
}

#rollBtn {
    grid-column: 6 / 8;
    grid-row: 2;
    height: 6vh;
    font-size: 2vh;
}

#resetBtn {
    grid-column: 9 / 10;
    grid-row: 2;
    height: 6vh;
    font-size: 2vh;
}

#betAmount {
    grid-column: 9 / 11;
    grid-row: 1;
    font-size: 2.3vh;
}

#betDisplay {
    grid-column: 7 / 9;
    grid-row: 1;
    font-size: 2.75vh;
}

#chip1 {
    background-color: white;
}

#chip5 {
    background-color: red;
}
#chip25 {
    background-color: green;
}
#chip100 {
    background-color: black;
    color: white;
}
#chip500 {
    background-color: rgb(247, 101, 186);
}
#chip1000 {
    background-color: #ff7b00;
}

#rolledDice {
    grid-column: 11 / 12;
    grid-row: 1 / 3;
    font-size: 10vh;
}


#activeBets {
    display: flex;
    
    flex-direction: column;
    justify-content: left;
    padding-top: 3vh;
    grid-row: 1 / 8;
    background-color: darkgreen;
    border: none;
    font-size: 4vh;
    border: 1px solid black;
}
ul {
    font-size: 2.2vh;
    flex-direction: column;
    margin-left: -30px;
}