body{
    /* background-color: rgb(94, 91, 91); */
    background-color: rgb(61, 76, 90);
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 10px;
    justify-content: space-evenly;
}
#game{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    /* border: solid black 2px; */
}
#rolls{
    font-size: xx-large;
    font-weight: bold;
    font-family: 'Prompt', sans-serif;
}
#scoreSheet{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#scoreSheet2{
    display:none;   
}
h1{
    font-family: 'Prompt', sans-serif;
    font-size: 80px;
}
h2{
    font-family: 'Prompt', sans-serif;
    font-size: 60px;
}
h3{
    font-family: 'Prompt', sans-serif;
    font-size: 40px;
    width: fit-content;
}
#rolling{
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(230, 230, 230);
    width:350px;
    padding: 10px;
    display:none;
}
#dice{
    display:flex;
    justify-content: center;
    align-items: center;
    border: solid black;
    flex-direction: row;
    background-color: rgb(230, 230, 230);
    width:500px;
    padding: 10px;
}
#dice1{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice2{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice3{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice4{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice5{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice6{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice1_2{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice2_2{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice3_2{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice4_2{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice5_2{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice6_2{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice1_3{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice2_3{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice3_3{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice4_3{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice5_3{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice6_3{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice1_4{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice2_4{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice3_4{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice4_4{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice5_4{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice6_4{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice1_5{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice2_5{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice3_5{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice4_5{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice5_5{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice6_5{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice1black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice2black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice3black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice4black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice5black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice6black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice1_2black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice2_2black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice3_2black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice4_2black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice5_2black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice6_2black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice1_3black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice2_3black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice3_3black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice4_3black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice5_3black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice6_3black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice1_4black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice2_4black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice3_4black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice4_4black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice5_4black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice6_4black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice1_5black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice2_5black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice3_5black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice4_5black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice5_5black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#dice6_5black{
    margin:10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width:80px;
    display: none;
}
#twoPlayerBtn{
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 0.4em;
    font-size: larger;
    font-weight: bold;
    font-family: 'Prompt', sans-serif;
    background-color: lightslategrey;
}
#twoPlayerBtn:active{
    background-color: darkslategrey;
}
#gameOver{
    display: none;
}
#player1{
    display: none;
  font-size:xx-large;
}
#player2{
    font-size:xx-large;
    display: none;
}
#yahtzeeBonus{
    display: none;
}
#submitScore{
    display:none;
}
.button{
    padding:10px;
    display:flex;
    align-items: center;
    width: fit-content;

}
#newGame{
    cursor: pointer;
    padding: 15px;
    border-radius: 0.4em;
    display:none;
    font-size: xx-large;
    font-weight: bold;
    font-family: 'Prompt', sans-serif;
    background-color: lightslategrey;
}
#newGame:active{
    background-color: darkslategrey;
}
#pressRoll{
    padding:1px;
    width:400px;
}
#hold{
    width: 460px;
    display: flex;
    justify-content: space-between;
    padding: 30px;
    display: none;
}
#hold1{
    cursor: pointer;
    border-radius: 0.4em;
    padding: 5px;
    width:60px;
    font-size: medium;
    font-weight: bold;
    margin-right: 36px;
    background-color: lightslategrey;
}
#hold2{
    cursor: pointer;
    border-radius: 0.4em;
    padding: 5px;
    width:60px;
    font-size: medium;
    font-weight: bold;
    margin-right: 36px;
    background-color: lightslategrey;
}
#hold3{
    cursor: pointer;
    border-radius: 0.4em;
    padding: 5px;
    width:60px;
    font-size: medium;
    font-weight: bold;
    margin-right: 36px;
    background-color: lightslategrey;
}
#hold4{
    cursor: pointer;
    border-radius: 0.4em;
    border-radius: 0.4em;
    padding: 5px;
    width:60px;
    font-size: medium;
    font-weight: bold;
    margin-right: 36px;
    background-color: lightslategrey;
}
#hold5{
    cursor: pointer;
    border-radius: 0.4em;
    padding: 5px;
    width:60px;
    font-size: medium;
    font-weight: bold;
    background-color: lightslategrey;
}
#roll{
    cursor: pointer;
    border-radius: 0.4em;
    padding: 5px;
    width:80px;
    font-size: larger;
    font-weight: bold;
    /* background-color: rgb(131, 170, 212); */
    background-color: lightslategrey;
}
#roll:active{
    background-color: darkslategrey;
    /* background-color: rgb(169, 192, 216); */
}
#rulesBtn{
    display:none;
    width: 130px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 0.4em;
    padding: 5px;
    font-size: larger;
    font-weight: bold;
    background-color: lightslategrey;
}
#rulesBtn:active{
    background-color: darkslategrey;
}
#rules{
    border: rgb(55, 63, 71) solid 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: 600px;
    font-family:'Prompt', sans-serif;
    display: none;
    background-color: rgb(158, 162, 165);
}
#rulesHeading{
    justify-content: center;
    display:flex;
    /* align-items: center; */
}
table{
    display: flex;
    align-items: center;
}
th{
    padding-left: 5px;
    padding-right: 5px;
    border:black solid 2px;
    font-family: 'Prompt', sans-serif;
    font-size: medium;
    /* background-color: rgb(131, 170, 212); */
    background-color: lightslategrey;
}
td{
    border:black solid 2px;
    font-family: 'Prompt', sans-serif;
    padding-left: 5px;
    padding-right: 5px;
}
.first{
    background-color: rgb(158, 162, 165);
}
.second{
    background-color: rgb(132, 139, 146);
}
#submit1{
   display:none;
   cursor: pointer;
}
#submit2{
    display:none;
    cursor: pointer;
 }
 #submit3{
    display:none;
    cursor: pointer;
 }
 #submit4{
    display:none;
    cursor: pointer;
 }
 #submit5{
    display:none;
    cursor: pointer;
 }
 #submit6{
    display:none;
    cursor: pointer;
 }
 #submit7{
    display:none;
    cursor: pointer;
 }
 #submit8{
    display:none;
    cursor: pointer;
 }
 #submit9{
    display:none;
    cursor: pointer;
 }
 #submit10{
    display:none;
    cursor: pointer;
 }
 #submit11{
    display:none;
    cursor: pointer;
 }
 #submit1{
    display:none;
    cursor: pointer;
 }
 #submit12{
    display:none;
    cursor: pointer;
 }
 #submit13{
    display:none;
    cursor: pointer;
 }
 #submit14{
    display:none;
    cursor: pointer;
 }
 #submit15{
    display:none;
    cursor: pointer;
 }
 #submit16{
    display:none;
    cursor: pointer;
 }
 #submit1_2{
    cursor: pointer;
     display:none;
 }
 #submit2_2{
    cursor: pointer;
    display:none;
}
#submit3_2{
    cursor: pointer;
    display:none;
}
#submit4_2{
    cursor: pointer;
    display:none;
}
#submit5_2{
    cursor: pointer;
    display:none;
}
#submit6_2{
    cursor: pointer;
    display:none;
}
#submit7_2{
    cursor: pointer;
    display:none;
}
#submit8_2{
    cursor: pointer;
    display:none;
}
#submit9_2{
    cursor: pointer;
    display:none;
}
#submit10_2{
    cursor: pointer;
    display:none;
}
#submit11_2{
    cursor: pointer;
    display:none;
}
#submit12_2{
    cursor: pointer;
    display:none;
}
#submit13_2{
    cursor: pointer;
    display:none;
}
#submit14_2{
    cursor: pointer;
    display:none;
}
#submit15_2{
    cursor: pointer;
    display:none;
}
#submit16_2{
    cursor: pointer;
    display:none;
}
 #score1{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score3{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score4{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score5{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score6{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score7{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score8{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score9{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score10{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score11{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size:x-large;
 }
 #score12{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score13{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score14{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #totalScore{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #bonus{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #totalUpper{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #totalLower{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #totalUpper2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #grandTotal{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #submitTitle1{
     display: none;
 }
#ones{
    cursor: pointer;
}
#twos{
    cursor: pointer;
}
#threes{
    cursor: pointer;
}
#fours{
    cursor: pointer;
}
#fives{
    cursor: pointer;
}
#sixes{
    cursor: pointer;
}
#threeOfAKind{
    cursor: pointer;
}
#fourOfAKind{
    cursor: pointer;
}
#fullHouse{
    cursor: pointer;
}
#smallStraight{
    cursor: pointer;
}
#largeStraight{
    cursor: pointer;
}
#yahtzee{
    cursor: pointer;
}
#chance{
    cursor: pointer;
}
#y1{
    cursor: pointer;
}
#y2{
    cursor: pointer;
}
#y3{
    cursor: pointer;
}
#score1_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score2_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score3_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score4_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score5_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score6_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score7_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score8_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score9_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score10_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score11_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size:x-large;
 }
 #score12_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score13_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #score14_2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large; 
 }
 #totalScore2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #bonus2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #p2totalUpper{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #p2totalLower{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #p2totalUpper2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #grandTotal2{
    padding-left: 10px;
    font-family: 'Gochi Hand', cursive;
    font-size: x-large;
 }
 #submitTitle2{
     display: none;
 }
#ones2{
    cursor: pointer;
}
#twos2{
    cursor: pointer;
}
#threes2{
    cursor: pointer;
}
#fours2{
    cursor: pointer;
}
#fives2{
    cursor: pointer;
}
#sixes2{
    cursor: pointer;
}
#threeOfAKind2{
    cursor: pointer;
}
#fourOfAKind2{
    cursor: pointer;
}
#fullHouse2{
    cursor: pointer;
}
#smallStraight2{
    cursor: pointer;
}
#largeStraight2{
    cursor: pointer;
}
#yahtzee2{
    cursor: pointer;
}
#chance2{
    cursor: pointer;
}
#y1_2{
    cursor: pointer;
}
#y2_2{
    cursor: pointer;
}
#y3_2{
    cursor: pointer;
}
@media all and (max-width:1200px) {
    body{
       display: flex;
        flex-direction: column; 
    }
}
@media all and (max-width:500px) {
    .dice{
        width:440px;
    }
    #hold1{
        margin-right: 30px;
        margin-left: 22px;
        width:55px;
    }
    #hold2{
        margin-right: 30px;
        width:55px;
    }
    #hold3{
        margin-right: 30px;
        width:55px;
    }
    #hold4{
        margin-right: 30px;
        width:55px;
    }
    #hold5{
      
        width:55px;
    }
    #dice1{
        width:70px
    }
    #dice2{
        width:70px
    }
    #dice3{
        width:70px
    }
    #dice4{
        width:70px
    }
    #dice5{
        width:70px
    }
    #dice6{
width:70px
    }
    #dice1_2{
width:70px
    }
    #dice2_2{
width:70px
    }
    #dice3_2{
width:70px
    }
    #dice4_2{
width:70px
    }
    #dice5_2{
width:70px
    }
    #dice6_2{
width:70px
    }
    #dice1_3{
width:70px
    }
    #dice2_3{
width:70px
    }
    #dice3_3{
width:70px
    }
    #dice4_3{
width:70px
    }
    #dice5_3{
width:70px
    }
    #dice6_3{
width:70px
    }
    #dice1_4{
width:70px
    }
    #dice2_4{
width:70px
    }
    #dice3_4{
width:70px
    }
    #dice4_4{
width:70px
    }
    #dice5_4{
width:70px
    }
    #dice6_4{
width:70px
    }
    #dice1_5{
width:70px
    }
    #dice2_5{
width:70px
    }
    #dice3_5{
width:70px
    }
    #dice4_5{
width:70px
    }
    #dice5_5{
width:70px
    }
    #dice6_5{
width:70px
    }
    #dice1black{
width:70px
    }
    #dice2black{
width:70px
    }
    #dice3black{
width:70px
    }
    #dice4black{
width:70px
    }
    #dice5black{
width:70px
    }
    #dice6black{
width:70px
    }
    #dice1_2black{
width:70px
    }
    #dice2_2black{
width:70px
    }
    #dice3_2black{
width:70px
    }
    #dice4_2black{
width:70px
    }
#dice5_2black{
    width:70px
}
    #dice6_2black{
width:70px
    }
    #dice1_3black{
width:70px
    }
    #dice2_3black{
width:70px
    }
    #dice3_3black{
width:70px
    }
    #dice4_3black{
width:70px
    }
    #dice5_3black{
width:70px
    }
    #dice6_3black{
width:70px
    }
    #dice1_4black{
width:70px
    }
    #dice2_4black{
width:70px
    }
    #dice3_4black{
width:70px
    }
    #dice4_4black{
width:70px
    }
    #dice5_4black{
width:70px
    }
    #dice6_4black{
width:70px
    }
    #dice1_5black{
width:70px
    }
    #dice2_5black{
width:70px
    }
    #dice3_5black{
width:70px
    }
    #dice4_5black{
width:70px
    }
    #dice5_5black{
width:70px
    }
    #dice6_5black{
width:70px
    }
}