* {
  margin: 0;
  padding: 0;
  
}
*, *:before, *:after {
		box-sizing: unset;
	}
.dice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 120px;
    width: 320px;
    height: 100px;
    perspective: 600px;
}   
.die-list {
  height: 6rem;
  list-style-type: none;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 6rem;
}
   
.even-roll {
  -webkit-transition: -webkit-transform 1.5s ease-out;
  transition: -webkit-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;
  transition: transform 1.5s ease-out, -webkit-transform 1.5s ease-out;
}
.odd-roll {
  -webkit-transition: -webkit-transform 1.25s ease-out;
  transition: -webkit-transform 1.25s ease-out;
  transition: transform 1.25s ease-out;
  transition: transform 1.25s ease-out, -webkit-transform 1.25s ease-out;
}
.die-item {
  background-color: #fefefe;
  box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3),
    inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  display: grid;
  grid-template-areas: "one two three" "four five six" "seven eight nine";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 100%;
  padding: 1rem;
  position: absolute;
  width: 100%;
}
.dot {
  align-self: center;
  background-color: #676767;
  border-radius: 50%;
  box-shadow: inset -0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.5);
  display: block;
  height: 1.25rem;
  justify-self: center;
  width: 1.25rem;
}
.even-roll[data-roll="1"] {
  -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
          transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="2"] {
  -webkit-transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
          transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="3"] {
  -webkit-transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
          transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
}
.even-roll[data-roll="4"] {
  -webkit-transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
          transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
}
.even-roll[data-roll="5"] {
  -webkit-transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
          transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="6"] {
  -webkit-transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
          transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
}
.odd-roll[data-roll="1"] {
  -webkit-transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
          transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="2"] {
  -webkit-transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
          transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="3"] {
  -webkit-transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
          transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
}
.odd-roll[data-roll="4"] {
  -webkit-transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
          transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
}
.odd-roll[data-roll="5"] {
  -webkit-transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
          transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="6"] {
  -webkit-transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
          transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
}
[data-side="1"] {
  -webkit-transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);
          transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);
}
[data-side="2"] {
  -webkit-transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);
          transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);
}
[data-side="3"] {
  -webkit-transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);
          transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);
}
[data-side="4"] {
  -webkit-transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);
          transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);
}
[data-side="5"] {
  -webkit-transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);
          transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);
}
[data-side="6"] {
  -webkit-transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);
          transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);
}
[data-side="1"] .dot:nth-of-type(1) {
  grid-area: five;
}
[data-side="2"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="2"] .dot:nth-of-type(2) {
  grid-area: nine;
}
[data-side="3"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="3"] .dot:nth-of-type(2) {
  grid-area: five;
}
[data-side="3"] .dot:nth-of-type(3) {
  grid-area: nine;
}
[data-side="4"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="4"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="4"] .dot:nth-of-type(3) {
  grid-area: seven;
}
[data-side="4"] .dot:nth-of-type(4) {
  grid-area: nine;
}
[data-side="5"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="5"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="5"] .dot:nth-of-type(3) {
  grid-area: five;
}
[data-side="5"] .dot:nth-of-type(4) {
  grid-area: seven;
}
[data-side="5"] .dot:nth-of-type(5) {
  grid-area: nine;
}
[data-side="6"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="6"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="6"] .dot:nth-of-type(3) {
  grid-area: four;
}
[data-side="6"] .dot:nth-of-type(4) {
  grid-area: six;
}
[data-side="6"] .dot:nth-of-type(5) {
  grid-area: seven;
}
[data-side="6"] .dot:nth-of-type(6) {
  grid-area: nine;
}

#roll-button-groen:hover {
    color: #3f9b0b;
}
.speelButtons{
        font-size:15pt; position: absolute;top: 330px;left: 810px;width: 200px; display: none
    }
    
/* =========================================================
   POPUP / OVERLAY
   ========================================================= */

/* =========================================================
   POPUP / OVERLAY
   ========================================================= */

.success-overlay {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 20px !important;

    box-sizing: border-box !important;

    z-index: 99999 !important;

    display: grid;
    place-items: center !important;

    background: rgba(0, 0, 0, 0.65);
}


/* =========================================================
   INHOUD POPUP
   ========================================================= */

.success-message {
    position: relative !important;

    width: min(450px, 100%) !important;
    max-width: 450px !important;

    margin: 0 !important;
    padding: 35px 25px !important;

    box-sizing: border-box !important;

    background: #fff;

    border-radius: 20px;

    text-align: center;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.35);

    animation: successPop 0.35s ease-out;
}


/* =========================================================
   TITEL
   ========================================================= */

.success-message h2 {
    margin: 0 0 15px 0 !important;
}


/* =========================================================
   PIONNEN
   ========================================================= */

.success-message img {
    display: inline-block;

    width: auto !important;
    height: 80px !important;

    margin: 5px;
}


/* =========================================================
   TEKST
   ========================================================= */

.success-message p {
    margin: 0 0 25px 0;
    font-size: 17px;
}


/* =========================================================
   KNOPPEN
   ========================================================= */

.success-message .btn-nav {
    display: inline-block;
}


/* =========================================================
   SLUITKNOP
   ========================================================= */

.popup-close {
    position: absolute !important;

    top: 10px !important;
    right: 10px !important;

    width: 40px;
    height: 40px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;
}


/* =========================================================
   ANIMATIE
   ========================================================= */

@keyframes successPop {

    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* =========================================================
   AANTAL SPELERS
   ========================================================= */

#popupBegin .success-message {
    max-width: 500px !important;
}


.player-choice {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    margin: 20px 0 15px 0;
}


.player-choice img {
    height: 60px !important;
    width: auto !important;
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 480px) {

    .success-overlay {
        padding: 15px !important;
    }

    .success-message {
        width: 100% !important;
        max-width: 400px !important;

        padding: 30px 20px !important;

        border-radius: 16px;
    }

    .success-message h2 {
        font-size: 24px;
    }

    .player-choice {
        flex-direction: column;
        gap: 10px;
    }

    .player-choice img {
        height: 55px !important;
    }

}



    
#dobbelstenen {position: absolute;left:650px;top:450px}      
#nakijkenn {position: absolute;left: 00px;top: 40px;display:none }  
#oefening {height:600px;position:relative;}   
    
/* Media Query for Mobile Devices */
        @media (max-width: 480px) {
            #oefening{
                height:300px;
            }
            #spel{
                zoom: 0.40;
                -moz-transform: scale(0.40);
                    }
            #dobbelstenen {
                left:100px;
                top:600px;
                }
            #nakijken {left: 400px;top: 700px }
            .speelButtons{
                top: 620px;left: 0px;z-index: 20;
            }
            
        }

        /* Media Query for low resolution  Tablets, Ipads */
        @media (min-width: 481px) and (max-width: 767px) {
            
        }

        /* Media Query for Tablets Ipads portrait mode */
        @media (min-width: 768px) and (max-width: 1024px){
            
           
            
        }

        /* Media Query for Laptops and Desktops */
        @media (min-width: 1025px) and (max-width: 1280px){
            
        }

        /* Media Query for Large screens */
        @media (min-width: 1281px) {
            
            #spel{
                zoom: 1;
                -moz-transform: scale(1);
                    }
               }