body{
    background: linear-gradient(#a6abe6, #e97b7b, #a6abe6);
    display:flex;
    flex-direction: column;
    align-items:center;
    height:100vh;
    letter-spacing:2px;
}

.heading{
    font-size:xx-large;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing:5px;
}
p{
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
 .game{
    width:60%;
    display:flex;
    flex-direction:column;
    align-items:center;
 }

 .button{
    width:100px;

 }

 #gameOver{
    display:none;
    font-size: xx-large;
    margin-top:70px;
  
}

#youWin{
    display:none;
    font-size: xx-large;
    margin-top:70px;
   
}

 .dice{
    border:solid black 1px;
    background-color: rgb(233, 231, 231);
    width:150px;
    height:150px;
    padding:20px;
    border-radius:1em;
    display:flex;
    justify-content: center;
    align-items: center;
    margin:10px;
    color: rgb(233, 231, 231);
 }
 #roll{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing:3px;
    font-size:larger;
    padding:10px;
    cursor: pointer;
    border-radius:1em;
    width:100%;
    margin-top: 60px;
    margin-bottom: 20px;
    background-image:linear-gradient(rgb(171, 235, 231), rgb(87, 214, 201), rgb(171, 235, 231));
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
 }
 #roll:hover{
    opacity: 85%;
 }
 #roll:active{
    background-image:linear-gradient(rgb(87, 214, 201),rgb(171, 235, 231), rgb(87, 214, 201));
 }

 #pressRoll{
     width:85%;
     border:2px solid black;
     border-radius:2em;
     padding:5px;
 }
 #dice1{
     display: none;
     width:95%;
 }
 #dice2{
    display: none;
    width:95%;
}
#dice3{
    display: none;
    width:95%;
}
#dice4{
    display: none;
    width:95%;
}
#dice5{
    display: none;
    width:95%;
}
#dice6{
    display: none;
    width:95%;
}
#rules{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing:3px;
    font-size:larger;
    padding:10px;
    cursor: pointer;
    border-radius:1em;
    width:100%;
    margin-top: 20px;
    margin-bottom: 30px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    background-image:linear-gradient(rgb(171, 235, 231), rgb(87, 214, 201), rgb(171, 235, 231));
}
#rules:hover{
    opacity: 85%;
 }
#rules:active{
    background-image:linear-gradient(rgb(87, 214, 201),rgb(171, 235, 231), rgb(87, 214, 201));
}
#restart{
    display:none;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing:3px;
    font-size:larger;
    padding:10px;
    cursor: pointer;
    border-radius:1em;
    width:100%;
    margin-top: 30px;
    margin-bottom: 30px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    background-image:linear-gradient(rgb(171, 235, 231), rgb(87, 214, 201), rgb(171, 235, 231));
 }
 #restart:hover{
    opacity: 85%;
 }
 #restart:active{
    background-image:linear-gradient(rgb(87, 214, 201),rgb(171, 235, 231), rgb(87, 214, 201));
}
.info{
    border:solid black 1px;
    background-color: rgb(233, 231, 231);
    width:40%;
    display:flex;
    flex-direction:column;
    border-radius:1em;
    margin:10px;
    padding:10px;
}
    
#rulesText{
    display:none;
    width:fit-content;
    align-self:center;
    font-size: x-large;
    padding-left: 10px;
    padding-right: 10px;
}

#player{
    width:fit-content;
    align-self:center;
    font-size: x-large;
}
#tryAgain{
    display:none;
    width:fit-content;
    align-self:center;
    font-size: x-large;
}

.scorecard{
    display:flex;
    flex-direction: row;
    align-self: center;
}
#score{
    font-size: x-large;
    width:100%;
    padding-left:10px;
    padding-right: 10px;
}

#scoreContainer{
    width:fit-content;
    font-size: x-large;
    padding-left:10px;
    padding-right: 10px;
    align-self: center;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

@media all and (max-width:800px){
   #gameOver{
       font-size: x-large;
   }
   #youWin{
    font-size: 23px;
   }
   #rulesText{
    font-size: large;
   }
   #tryAgain{
       font-size:large;
   }
   #scoreContainer{
    font-size:large;
   }
   #score{
    font-size:large;
   }
   #player{
    font-size:large;
   }
}

@media all and (max-width:530px){
    #gameOver{
        font-size: larger;
    }
    #youWin{
     font-size: 20px;
    }
    #rulesText{
     font-size: medium;
    }
    #tryAgain{
        font-size:large;
    }
    #scoreContainer{
     font-size:large;
    }
    #score{
     font-size:large;
    }
    #player{
     font-size:large;
    }
}


/* 2 Player Game */

#startGame{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing:3px;
    font-size:larger;
    padding:10px;
    cursor: pointer;
    border-radius:1em;
    width:100%;
    margin-top: 60px;
    margin-bottom: 20px;
    background-image:linear-gradient(rgb(171, 235, 231), rgb(87, 214, 201), rgb(171, 235, 231));
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}