h2
{
  text-align:center;
  background-color:brown;
  padding:6px;
  color:cornsilk;
}
.out
{
  height:100%;
  width:95%;
  background-image:url("../images/snakesandladders.jpg?v=1.0016");
  background-size: 100% auto;
  background-repeat:no-repeat;
  float:left;
  position: relative;
}
.mn
{

  height:100%;
  width:100%;
  position:absolute;
  top: 0;
  left: 0;
  padding:20px;
}
#side
{
  /*height:500px;
  width:200px;
  margin-left:500px;*/
}
.btn
{
  height:40px;
  width:100px;
  margin-left:50px;
  margin-top:20px;
  border-radius:5px;
}
.boardbox
{
  height:10%;
  width:10%;
  z-index:-1;
  padding:8px;
  display: flex;
  justify-content: center;
}
.left
{
  float:left;
}
.right
{
  float:right;
}
#counter.img
{
  height:50px;
 /* width:50px; */
  margin:2px 0px 3px 5px;
}
#dice
{
  height:80px;
  width:80px;
  font-size:70px;
  color:black;
  margin:auto;
  border:none;
  background-color:white;
  cursor:pointer;
}
.leftstart p a {
  color: inherit;
  text-decoration: none;
  cursor:pointer;
}

/*** DICE ****/

#dice {
  width: 90px;
  height: 90px;
  transform-style: preserve-3d;
  transition: transform 1.5s ease-out;
}

#dice:hover {
cursor: pointer;
}

.sides{
  background-color: #ff0000;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);

}
.sidesglow {
  -webkit-box-shadow:0px 0px 40px 6px rgba(255,123,46,0.9);
  -moz-box-shadow: 0px 0px 40px 6px rgba(255,123,46,0.9);
  box-shadow: 0px 0px 40px 6px rgba(255,123,46,0.9);
    border-radius: 10px;
}
.dot {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ffffff;
  transform: translate(-50%, -50%);
  -webkit-box-shadow: inset 1px 2px 2px 3px #dddddd;
    -moz-box-shadow: inset 1px 2px 2px 3px #dddddd;
    box-shadow: inset 1px 2px 2px 3px #dddddd;
}

.side-1 .dot-1 { top: 50%; left: 50%; }

.side-2 .dot-1 { top: 25%; left: 25%; }
.side-2 .dot-2 { top: 75%; left: 75%; }

.side-3 .dot-1 { top: 25%; left: 25%; }
.side-3 .dot-2 { top: 75%; left: 75%; }
.side-3 .dot-3 { top: 50%; left: 50%; }

.side-4 .dot-1 { top: 25%; left: 25%; }
.side-4 .dot-2 { top: 25%; left: 75%; }
.side-4 .dot-3 { top: 75%; left: 25%; }
.side-4 .dot-4 { top: 75%; left: 75%; }

.side-5 .dot-1 { top: 25%; left: 25%; }
.side-5 .dot-2 { top: 25%; left: 75%; }
.side-5 .dot-3 { top: 75%; left: 25%; }
.side-5 .dot-4 { top: 75%; left: 75%; }
.side-5 .dot-5 { top: 50%; left: 50%; }

.side-6 .dot-1 { top: 25%; left: 25%; }
.side-6 .dot-2 { top: 25%; left: 75%; }
.side-6 .dot-3 { top: 75%; left: 25%; }
.side-6 .dot-4 { top: 75%; left: 75%; }
.side-6 .dot-5 { top: 50%; left: 25%; }
.side-6 .dot-6 { top: 50%; left: 75%; }

#dice .side-1 {
transform: translateZ(45px);
}
#dice .side-2 {
transform: rotateX(-180deg) translateZ(45px);
}
#dice .side-3 {
transform: rotateY(90deg) translateZ(45px);
}
#dice .side-4 {
transform: rotateY(-90deg) translateZ(45px);
}
#dice .side-5 {
transform: rotateX(90deg) translateZ(45px);
}
#dice .side-6 {
transform: rotateX(-90deg) translateZ(45px);
}

#dice[data-side="1"] {
  transform: rotateX(360deg) rotateY(360deg) rotateZ(720deg);
}
#dice[data-side="2"] {
  transform: rotateX(360deg) rotateY(540deg) rotateZ(720deg);
}
#dice[data-side="3"] {
  transform: rotateX(360deg) rotateY(630deg) rotateZ(720deg);
}
#dice[data-side="4"] {
  transform: rotateX(360deg) rotateY(450deg) rotateZ(720deg);
}
#dice[data-side="5"] {
  transform: rotateX(630deg) rotateY(360deg) rotateZ(720deg);
}
#dice[data-side="6"] {
  transform: rotateX(450deg) rotateY(360deg) rotateZ(720deg);
}

#dice[data-side="1"].reRoll {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
#dice[data-side="2"].reRoll {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
#dice[data-side="3"].reRoll {
  transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg);
}
#dice[data-side="4"].reRoll {
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
#dice[data-side="5"].reRoll {
  transform: rotateX(270deg) rotateY(0deg) rotateZ(0deg);
}
#dice[data-side="6"].reRoll {
  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}

#diceResult{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #EE4E34;
color: white;
font-weight: bold;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

#diceResult.hide{
opacity: 0;
}

#diceResult.reveal{
animation: fadeUp 0.3s forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    bottom: 0;
  }

  100% {
    opacity: 1;
    bottom: 20px;
  }
}
/***** DICE COLOURS *******/
#counter.img {
  filter: drop-shadow(2px 3px 3px #fff);
}

#counter.img.player1 {
  filter: invert(12%) sepia(100%) saturate(5159%) hue-rotate(244deg) brightness(66%) contrast(120%);
  
}

#counter.img.player2 {
  filter: invert(65%) sepia(46%) saturate(498%) hue-rotate(87deg) brightness(94%) contrast(91%);
}
#counter.img.player3 {
  filter: invert(49%) sepia(95%) saturate(371%) hue-rotate(107deg) brightness(96%) contrast(96%);
}

#counter.img.player4 {
  filter: invert(26%) sepia(85%) saturate(534%) hue-rotate(225deg) brightness(87%) contrast(84%);
}


/***** DICE COLOURS *******/
@-webkit-keyframes shakeX {
  from,
  to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
  }
  }
  @keyframes shakeX {
  from,
  to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
  }
  }
  .animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }

  @-webkit-keyframes flash {
    from,
    50%,
    to {
    opacity: 1;
    }
    25%,
    75% {
    opacity: 0;
    }
    }
    @keyframes flash {
    from,
    50%,
    to {
    opacity: 1;
    }
    25%,
    75% {
    opacity: 0;
    }
    }
    .animate__flash {
        -webkit-animation-name: flash;
        animation-name: flash;
        -webkit-animation-duration: 1s;
        animation-duration: 1s ;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    @-webkit-keyframes tada {
      from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      }
      10%,
      20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      }
      30%,
      50%,
      70%,
      90% {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 3deg);
      }
      40%,
      60%,
      80% {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -3deg);
      }
      to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      }
      }
      @keyframes tada {
      from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      }
      10%,
      20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      }
      30%,
      50%,
      70%,
      90% {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 3deg);
      }
      40%,
      60%,
      80% {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -3deg);
      }
      to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      }
      }
      .animate__tada {
          -webkit-animation-name: tada;
          animation-name: tada;
          -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
          animation-iteration-count: infinite;
      }    
@keyframes blink {
  0% {
         background-color: rgba(255,0,0,1)
  }
  50% {
         background-color: rgba(255,0,0,0.5)
  }
  100% {
         background-color: rgba(255,0,0,1)
  }
}
@-webkit-keyframes blink {
  0% {
         background-color: rgba(255,0,0,1)
  }
  50% {
         background-color: rgba(255,0,0,0.5)
  }
  100% {
         background-color: rgba(255,0,0,1)
  }
}
.blinking {
  -moz-transition:all 0.5s ease-in-out;
  -webkit-transition:all 0.5s ease-in-out;
  -o-transition:all 0.5s ease-in-out;
  -ms-transition:all 0.5s ease-in-out;
  transition:all 0.5s ease-in-out;
  -moz-animation:blink normal 1.5s infinite ease-in-out;
  /* Firefox */
  -webkit-animation:blink normal 1.5s infinite ease-in-out;
  /* Webkit */
  -ms-animation:blink normal 1.5s infinite ease-in-out;
  /* IE */
  animation:blink normal 1.5s infinite ease-in-out;
  /* Opera */

}

    /**Desktop Query*/
    @media only screen and (min-width: 769px) {
      .desktop {
        display: block;
      }
      .mobile, .tablet {
        display: none;
      }


    }

    /**Desktop Query*/
    @media only screen and (min-width: 521px) and (max-width: 768px)  {
      .desktop {
        display: block;
      }
      .mobile, .tablet {
        display: none;
      }
/*
      .borderorange {
        height: 99vh;
      }
*/
      
      .boardbox
      {
        /*height:35px;
        width:35px;*/
        height: 10%;
        width: 10%;
        padding:5px;

      }
      #counter.img {
        margin: 0px 10px 5px 15px;
        height: 25px;
      }      
    }


    /*Tablet Query*/
    @media only screen and (min-width: 481px) and (max-width: 521px) {
      .tablet {
        display: block;
      }
      .mobile, .desktop {
        display: none;
      }

        .genericPadding {
          padding: 20px 20px 20px 20px;
      }       
/*
      .borderorange {
        height: 99vh;
      } 
*/
      .out
      {
        height:100%;
        width:100%;
      }        
      .boardbox
      {
        /*height:35px;
        width:35px;*/
        height: 10%;
        width: 10%;
        padding:5px;

      }
      #counter.img {
        margin: 0px 10px 5px 15px;
        height: 30px;
      }
      .successnotify {
        margin-top: 20px;
      }
      .successnotify p {
        font-size: 2rem;
      }      
      .leftstart p, .rigtdicediv p {
        font-size: 1.5rem;

    }       
    #dice {
      width: 50px;
      height: 50px;
    } 
    .dot {
      width: 10px;
      height: 10px;
    }
    #dice .side-1 {
      transform: translateZ(25px);
      }
      #dice .side-2 {
      transform: rotateX(-180deg) translateZ(25px);
      }
      #dice .side-3 {
      transform: rotateY(90deg) translateZ(25px);
      }
      #dice .side-4 {
      transform: rotateY(-90deg) translateZ(25px);
      }
      #dice .side-5 {
      transform: rotateX(90deg) translateZ(25px);
      }
      #dice .side-6 {
      transform: rotateX(-90deg) translateZ(25px);
      }
      


    }
    
    /*Mobile Query*/
    @media only screen and (max-width: 480px) {
      .mobile {
        display: block;
      }
      .desktop, .tablet {
        display: none;
      }
/*
      .borderorange {
        height: 99vh;
      }
*/
      .out
      {
        height:100%;
        width:100%;
      }

      .genericPadding {
        padding: 20px 20px 20px 20px;
      }
      .boardbox
      {
        /*height:35px;
        width:35px;*/
        height: 10%;
        width: 10%;
        padding:5px;

      }
      #counter.img {
        height: 25px;
        /* width: 50px; */
        margin: 2px 0px 3px 5px;
      }

        .successnotify p {
          font-size: 1.25rem;
        }
        .leftstart p, .rigtdicediv p {
          font-size: 1.5rem;

      }       
      #dice {
        width: 50px;
        height: 50px;
      } 
      .dot {
        width: 10px;
        height: 10px;
      }
      #dice .side-1 {
        transform: translateZ(25px);
        }
        #dice .side-2 {
        transform: rotateX(-180deg) translateZ(25px);
        }
        #dice .side-3 {
        transform: rotateY(90deg) translateZ(25px);
        }
        #dice .side-4 {
        transform: rotateY(-90deg) translateZ(25px);
        }
        #dice .side-5 {
        transform: rotateX(90deg) translateZ(25px);
        }
        #dice .side-6 {
        transform: rotateX(-90deg) translateZ(25px);
        }
    }

    /* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
/* Styles */
  .headingdiv h1 {
    font-size: 2rem;
    font-weight: 700;
  }
    .mn {
      padding: 5px;
    }
      .out
      {
        height:100%;
        width:100%;
      }

      .boardbox
      {
        /*height:35px;
        width:35px;*/
        height: 10%;
        width: 10%;
        padding:0px;

      }
      #counter.img {
        height: 15px!important;
        /* width: 50px; */
        margin: 0px 5px 3px 5px;
      }

        .successnotify p {
          font-size: 1rem;
          padding: 8px 5px;
        }
        .leftstart p, .rigtdicediv p {
          font-size: 1rem;

      }       
      #dice {
        width: 40px;
        height: 40px;
      } 
      .dot {
        width: 8px;
        height: 8px;
      }
      #dice .side-1 {
        transform: translateZ(18px);
        }
        #dice .side-2 {
        transform: rotateX(-180deg) translateZ(18px);
        }
        #dice .side-3 {
        transform: rotateY(90deg) translateZ(18px);
        }
        #dice .side-4 {
        transform: rotateY(-90deg) translateZ(18px);
        }
        #dice .side-5 {
        transform: rotateX(90deg) translateZ(18px);
        }
        #dice .side-6 {
        transform: rotateX(-90deg) translateZ(18px);
        }

}


@media only screen and (-webkit-min-device-pixel-ratio: 2.625), 
       only screen and (-min--moz-device-pixel-ratio: 2.625), 
       only screen and (-o-min-device-pixel-ratio: 2.625/1), 
       only screen and (min-device-pixel-ratio: 2.625) {

        .headingdiv h1 {
          font-size: 2rem;
          font-weight: 700;
        }
          .mn {
            padding: 5px;
          }
            .out
            {
              height:100%;
              width:100%;
            }

            #counter.img {
   
              margin: 0px 5px 3px 10px;
            }
      
              .successnotify p {
                font-size: 1rem;
                padding: 8px 5px;
              }
              .leftstart p, .rigtdicediv p {
                font-size: 1rem;
      

		   }
       }