* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background-color: #0EB70E;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-image: url("leather.png");
}
#topbar, #scorebar{
	background:#2f3947;
	background-image: url("leather.png");
}
#butts{
	position: fixed;
	top: 0;
	left: 0;
	right:0;
	text-align:center;
	z-index: 10;
	width:75%;
	margin:0 auto;
}

#butts button{
	margin:4px 20px 0 10px;
	color:#eaebed;
	background:#2f3947;
	border: 1px solid #300;
	border-radius:5px;
	padding:3px 6px;
	text-decoration:none;
	font-size: 0.8rem;
	min-width:10%;
}
#butts button:hover{
	box-shadow: 2px 2px 5px #000; 
}

#topbar {
	color:#eaebed;
	box-shadow: 2px 2px 5px #000; 
}
#topbar h1{
	font-size:1.2rem;
	text-align:left;
	padding:1px 0 1px 5px;
}
/* as this is additonal, change in the cribscore.js */
#scorebar{
	color:#eaebed;
	position:absolute;
	bottom:0;
	width:100%;
	min-height:5.5rem;
	padding:0 1%;
	border-top:1px solid #000;

}
/* crib board */
#board{
	width:100%;
	background-color: rgb(66,50,0, 0.75);
	background-image: url("wood.png");
	padding:9px 0 9px 1%;
	margin: 5px 0;
	box-shadow: 2px 2px 8px #000;
	min-width:775px;
}
span.peg{
	height: 10px;
	width: 0.9%;
	background: rgb(221,221,221);
	background: linear-gradient(0deg, rgba(221,221,221,1) 0%, rgba(153,153,153,1) 80%);
	border-radius: 50%;
	display: inline-block;
	margin: 0 5px 5px 0;
}
span.peg:nth-child(5n){
	margin-right:1.25%;
}
span.red{
	background: rgb(245,79,85);
	background: linear-gradient(0deg, rgba(245,79,85,0.6) 0%, rgba(91,6,6,0.6) 80%);
	box-shadow: 2px 2px 2px #555;
}
span.score{
	background:#fffffe;
	font-size:0.9em;
	padding:0 0.5%;
	margin-left: 1%;
	border-radius:5px;
	box-shadow: inset 2px 2px 4px #000;
	width:2em;
	max-width:3%;
}
/* end */

/* scoring */
div#bar{
	vertical-align:middle;
}
/*
progress{
	height:24px;
	width:85%;
	accent-color: #FF9700;
}
* */
#myscore{
	margin-left:5px;
	padding:0;
}
.but{
	font-weight: bold; 
	font-size: 1rem;
	margin:4px;
	padding:2px;
	border-radius:10px;
	min-width:2.8rem;
	text-align:center;
	border:1px solid #003;
}
.add{
	font-weight: bold; 
	font-size: 1rem;
	padding:5px;
	border-radius:10px;
	color:#060;
	margin-left:2rem;
}
.but:hover{
	cursor:grab;
	background:#F6CF27;
	box-shadow: 2px 2px 5px #000; 
}
.add:hover{
	cursor:grab;
	background:#F6CF27;
	box-shadow: 2px 2px 5px #000; 
}
#number, #score{
	font-weight: bold; 
	font-size: 1rem;
	margin:0 4px;
	padding:5px;
	border-radius:10px;
	width:2rem;
	text-align:right;
	box-shadow: inset 2px 2px 8px #000;
}
#number{
	background: #7FFD68;
}
#score{
	background: #FAD2F0;
	margin-left:12px;
	width:3rem;
}
#oa{
	margin-left:20px;
}
/* denoting areas on the page */
#discard p, #crib p, #hand p{
	padding:2px 0 0 3px;
	font-size:1em;
	color:rgba(51,77,65,.4);
}
#scoreboard p{
	color:#eaebed;
}
#discard, #crib, #hand{
	border:1px solid rgba(51,77,65,.2);
	border-radius:5px;
}

/* popups */
.details-reset>summary {
    list-style: none
}

.details-reset>summary:before {
    display: none
}

.details-reset>summary::-webkit-details-marker {
    display: none
}

summary {
  -webkit-appearance: none;
  list-style: none;
  user-select: none;
}

details[open]>summary::before {
  content: " ";
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  user-select: none;
  z-index: 10;
}
summary.button{
	position: absolute;
	top:0;
	right:5px;
	border-radius:5px;
	padding:1px 3px;
	width:1.5rem;
	background:#2f3947;
	color:#eaebed;
	text-align:center;
}
summary.button:hover{
	cursor:grab;
	box-shadow: 2px 2px 2px #333; 
}
.dialog {
  left: 50%;
  margin: 10vh auto;
  max-height: 75vh;
  max-width: 100vw;
  position: fixed;
  top: 0;
  transform: translateX(-50%);
  width:100vh;
  z-index: 999;
  overflow-y: scroll;
}

.my-modal {
  background-color: #ffe;
  padding: 10px 20px;
  color:#2f3947;
  font-size:0.7rem;
}
.my-modal h2{
	color:#600;
}
.my-modal ul{
	padding-left:8px;
	list-style-type:none;
}
.my-modal p{
	margin-bottom:5px;
}
.my-modal strong{
	font-weight:900;
}
/* Cards: do not edit */
.card {
  position: absolute;
  display: inline-block;

  background-color: #fff;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  cursor: default;
  will-change: transform;
  border: 1px solid #999;
 }
.card:before,
.card:after {
  position: absolute;
  font-size: 0.7rem;
  text-align: center;
  line-height: 0.7rem;
  font-family: 'Ubuntu Condensed', sans-serif;
  white-space: pre-line;
  width: 0.55rem;
  letter-spacing: -0.1rem;
}
.card:before {
  top: 0.15rem;
  left: 0;
}
.card:after {
  bottom: 0.1rem;
  right: 0;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.card .face {
  height: 100%;
  background-position: 50% 50%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.card .back {
  position: absolute;
  background-image: url("faces/back.png");
  background-position: 50% 50%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.card.spades,
.card.clubs,
.card.joker {
  color: #000;
}
.card.hearts,
.card.diamonds,
.card.joker.rank3 {
  color: #d40000;
}
.card.joker.rank1:before,
.card.joker.rank2:before,
.card.joker.rank3:before,
.card.joker.rank1:after,
.card.joker.rank2:after,
.card.joker.rank3:after {
  content: "J\a O\a K\a E\a R";
  letter-spacing: 0;
  font-size: 0.4rem;
  line-height: 0.4rem;
  padding: 0.15rem 0.05rem;
  width: 0.5rem;
}
.card.rank1:before,
.card.rank1:after {
  content: "A";
}
.card.rank2:before,
.card.rank2:after {
  content: "2";
}
.card.rank3:before,
.card.rank3:after {
  content: "3";
}
.card.rank4:before,
.card.rank4:after {
  content: "4";
}
.card.rank5:before,
.card.rank5:after {
  content: "5";
}
.card.rank6:before,
.card.rank6:after {
  content: "6";
}
.card.rank7:before,
.card.rank7:after {
  content: "7";
}
.card.rank8:before,
.card.rank8:after {
  content: "8";
}
.card.rank9:before,
.card.rank9:after {
  content: "9";
}
.card.rank10:before,
.card.rank10:after {
  content: "10";
}
.card.rank11:before,
.card.rank11:after {
  content: "J";
}
.card.rank12:before,
.card.rank12:after {
  content: "Q";
}
.card.rank13:before,
.card.rank13:after {
  content: "K";
}
.card.spades.rank1 .face {
  background-image: url("faces/0_1.svg");
}
.card.spades.rank2 .face {
  background-image: url("faces/0_2.svg");
}
.card.spades.rank3 .face {
  background-image: url("faces/0_3.svg");
}
.card.spades.rank4 .face {
  background-image: url("faces/0_4.svg");
}
.card.spades.rank5 .face {
  background-image: url("faces/0_5.svg");
}
.card.spades.rank6 .face {
  background-image: url("faces/0_6.svg");
}
.card.spades.rank7 .face {
  background-image: url("faces/0_7.svg");
}
.card.spades.rank8 .face {
  background-image: url("faces/0_8.svg");
}
.card.spades.rank9 .face {
  background-image: url("faces/0_9.svg");
}
.card.spades.rank10 .face {
  background-image: url("faces/0_10.svg");
}
.card.spades.rank11 .face {
  background-image: url("faces/0_11.svg");
}
.card.spades.rank12 .face {
  background-image: url("faces/0_12.svg");
}
.card.spades.rank13 .face {
  background-image: url("faces/0_13.svg");
}
.card.hearts.rank1 .face {
  background-image: url("faces/1_1.svg");
}
.card.hearts.rank2 .face {
  background-image: url("faces/1_2.svg");
}
.card.hearts.rank3 .face {
  background-image: url("faces/1_3.svg");
}
.card.hearts.rank4 .face {
  background-image: url("faces/1_4.svg");
}
.card.hearts.rank5 .face {
  background-image: url("faces/1_5.svg");
}
.card.hearts.rank6 .face {
  background-image: url("faces/1_6.svg");
}
.card.hearts.rank7 .face {
  background-image: url("faces/1_7.svg");
}
.card.hearts.rank8 .face {
  background-image: url("faces/1_8.svg");
}
.card.hearts.rank9 .face {
  background-image: url("faces/1_9.svg");
}
.card.hearts.rank10 .face {
  background-image: url("faces/1_10.svg");
}
.card.hearts.rank11 .face {
  background-image: url("faces/1_11.svg");
}
.card.hearts.rank12 .face {
  background-image: url("faces/1_12.svg");
}
.card.hearts.rank13 .face {
  background-image: url("faces/1_13.svg");
}
.card.clubs.rank1 .face {
  background-image: url("faces/2_1.svg");
}
.card.clubs.rank2 .face {
  background-image: url("faces/2_2.svg");
}
.card.clubs.rank3 .face {
  background-image: url("faces/2_3.svg");
}
.card.clubs.rank4 .face {
  background-image: url("faces/2_4.svg");
}
.card.clubs.rank5 .face {
  background-image: url("faces/2_5.svg");
}
.card.clubs.rank6 .face {
  background-image: url("faces/2_6.svg");
}
.card.clubs.rank7 .face {
  background-image: url("faces/2_7.svg");
}
.card.clubs.rank8 .face {
  background-image: url("faces/2_8.svg");
}
.card.clubs.rank9 .face {
  background-image: url("faces/2_9.svg");
}
.card.clubs.rank10 .face {
  background-image: url("faces/2_10.svg");
}
.card.clubs.rank11 .face {
  background-image: url("faces/2_11.svg");
}
.card.clubs.rank12 .face {
  background-image: url("faces/2_12.svg");
}
.card.clubs.rank13 .face {
  background-image: url("faces/2_13.svg");
}
.card.diamonds.rank1 .face {
  background-image: url("faces/3_1.svg");
}
.card.diamonds.rank2 .face {
  background-image: url("faces/3_2.svg");
}
.card.diamonds.rank3 .face {
  background-image: url("faces/3_3.svg");
}
.card.diamonds.rank4 .face {
  background-image: url("faces/3_4.svg");
}
.card.diamonds.rank5 .face {
  background-image: url("faces/3_5.svg");
}
.card.diamonds.rank6 .face {
  background-image: url("faces/3_6.svg");
}
.card.diamonds.rank7 .face {
  background-image: url("faces/3_7.svg");
}
.card.diamonds.rank8 .face {
  background-image: url("faces/3_8.svg");
}
.card.diamonds.rank9 .face {
  background-image: url("faces/3_9.svg");
}
.card.diamonds.rank10 .face {
  background-image: url("faces/3_10.svg");
}
.card.diamonds.rank11 .face {
  background-image: url("faces/3_11.svg");
}
.card.diamonds.rank12 .face {
  background-image: url("faces/3_12.svg");
}
.card.diamonds.rank13 .face {
  background-image: url("faces/3_13.svg");
}
.card.joker.rank1 .face {
  background-image: url("faces/4_1.svg");
}
.card.joker.rank2 .face {
  background-image: url("faces/4_2.svg");
}
.card.joker.rank3 .face {
  background-image: url("faces/4_3.svg");
}
@media (max-width: 540px) {
  #topbar {
    text-align: left;
  }
}
@media (min-width: 640px) {
  html {
    font-size: 125%;
  }
}
.moving{
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.7);
}