/* CSS RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  font-size: 100%;
}

ol,
ul {
  list-style: none;
}

img,
video {
  width: 100%;
}

a {
  color: black;
  text-decoration: none;
}


/* STYLES-------------------------------------------------------------------------*/
:root {
  font-size: 16px;
}

* {
  background-color: rgb(4, 41, 126);
}

@font-face {
  font-family: futurabold;
  src: url(../fonts/FuturaStd-Bold.otf);
}

@font-face {
  font-family: futurabook;
  src: url(../fonts/FuturaStd-Book.otf)
}

h1 {
  position: absolute;
  font-family: futurabold;
  text-transform: uppercase;
  word-break: break-all;
  color: rgb(223, 25, 25);
  -webkit-text-stroke-width: 0.8vh;
  -webkit-text-stroke-color: white;
  font-size: 20vh;
  padding: 15px;
  text-shadow: 3px 3px rgb(172, 172, 172);
}

.subheading {
  position: absolute;
  width: 500px;
  height: 372px;
  background-color: transparent;
  -webkit-animation: moveX 5s linear 0s infinite alternate, moveY 7s linear 0s infinite alternate;
  -moz-animation: moveX 5s linear 0s infinite alternate, moveY 7s linear 0s infinite alternate;
  -o-animation: moveX 5s linear 0s infinite alternate, moveY 7s linear 0s infinite alternate;
  animation: moveX 5s linear 0s infinite alternate, moveY 7s linear 0s infinite alternate;
}

  @-webkit-keyframes moveX {
    from {
      left: 0;
    }
    to {
      left: calc(100% - 500px)
    }
  }

  @-moz-keyframes moveX {
    from {
      left: 0;
    }
    to {
      left: calc(100% - 500px)
    }
  }

  @-o-keyframes moveX {
    from {
      left: 0;
    }
    to {
      left: calc(100% - 500px)
    }
  }

  @keyframes moveX {
    from {
      left: 0;
    }
    to {
      left: calc(100% - 500px)
    }
  }

  @-webkit-keyframes moveY {
    from {
      top: 0;
    }
    to {
      top: calc(100% - 372px)
    }
  }

  @-moz-keyframes moveY {
    from {
      top: 0;
    }
    to {
      top: calc(100% - 372px)
    }
  }

  @-o-keyframes moveY {
    from {
      top: 0;
    }
    to {
      top: calc(100% - 372px)
    }
  }

  @keyframes moveY {
    from {
      top: 0;
    }
    to {
      top: calc(100% - 372px)
    }
  }

  @media only screen and (min-width: 1500px) {
    .subheading {
      width: 700px;
      height: 520px;
      -webkit-animation: moveX 10s linear 0s infinite alternate, moveY 14s linear 0s infinite alternate;
      -moz-animation: moveX 10s linear 0s infinite alternate, moveY 14s linear 0s infinite alternate;
      -o-animation: moveX 10s linear 0s infinite alternate, moveY 14s linear 0s infinite alternate;
      animation: moveX 10s linear 0s infinite alternate, moveY 14s linear 0s infinite alternate;
    }


    @-webkit-keyframes moveX {
      from {
        left: 0;
      }
      to {
        left: calc(100% - 700px)
      }
    }

    @-moz-keyframes moveX {
      from {
        left: 0;
      }
      to {
        left: calc(100% - 700px)
      }
    }

    @-o-keyframes moveX {
      from {
        left: 0;
      }
      to {
        left: calc(100% - 700px)
      }
    }

    @keyframes moveX {
      from {
        left: 0;
      }
      to {
        left: calc(100% - 700px)
      }
    }

    @-webkit-keyframes moveY {
      from {
        top: 0;
      }
      to {
        top: calc(100% - 520px)
      }
    }

    @-moz-keyframes moveY {
      from {
        top: 0;
      }
      to {
        top: calc(100% - 520px)
      }
    }

    @-o-keyframes moveY {
      from {
        top: 0;
      }
      to {
        top: calc(100% - 520px)
      }
    }

    @keyframes moveY {
      from {
        top: 0;
      }
      to {
        top: calc(100% - 520px)
      }
    }
  }


/*MOBILE----------------------------------------------*/

@media only screen and ( max-width: 1180px ) {
  h1 {
    font-size: 19vh;
    padding-right: 10px;
  }
}
@media only screen and ( max-width: 900px ) {
  h1 {
    font-size: 17vh;
    padding-right: 10px;
  }
}

@media only screen and ( max-width: 800px ) {
  h1 {
    font-size: 15vh;
    padding-right: 10px;
  }

  .subheading {
    width: 350px;
    height: 260.4px;
  }

  @-webkit-keyframes moveX {
    from {
      left: 0;
    }
    to {
      left: calc(100% - 350px)
    }
  }
  
  @-moz-keyframes moveX {
    from {
      left: 0;
    }
    to {
      left: calc(100% - 350px)
    }
  }
  
  @-o-keyframes moveX {
    from {
      left: 0;
    }
    to {
      left: calc(100% - 350px)
    }
  }
  
  @keyframes moveX {
    from {
      left: 0;
    }
    to {
      left: calc(100% - 350px)
    }
  }
  
  @-webkit-keyframes moveY {
    from {
      top: 0;
    }
    to {
      top: calc(100% - 260.4px)
    }
  }
  
  @-moz-keyframes moveY {
    from {
      top: 0;
    }
    to {
      top: calc(100% - 260.4px)
    }
  }
  
  @-o-keyframes moveY {
    from {
      top: 0;
    }
    to {
      top: calc(100% - 260.4px)
    }
  }
  
  @keyframes moveY {
    from {
      top: 0;
    }
    to {
      top: calc(100% - 260.4px)
    }
  }
}


/*dices---------------------------------------------*/
.dice {
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateY(185deg) rotateX(150deg) rotateZ(315deg);
  background-color: white;
}

.side {
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 10%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  &:before {
    content: "";
    width: 20%;
    height: 20%;
    background: black;
    border-radius: 50%;
  }
}

/* Dice_1 --------------------------------------------------*/
.dice_1 {
  left: 7vw;
  top: 15vh;
  width: 100px;
  height: 100px;
  animation: rotate_1 10s linear infinite;

}

.one_1 {
  transform: translateZ(50px);
}

.two_1 {
  z-index: 5;
  transform: translateX(-50px) rotateY(-90deg);

  &:before {
    background-color: white;
    box-shadow:
      #000 -25px -25px 0px 0px,
      #000 25px 25px 0px 0px;
  }

}

.three_1 {
  z-index: 5;
  transform: translateY(50px) rotateX(90deg);

  &:before {
    box-shadow:
      #000 -25px 25px 0px 0px,
      #000 25px -25px 0px 0px;
  }
}

.four_1 {
  z-index: 5;
  transform: translateY(-50px) rotateX(90deg);

  &:before {
    background-color: white;
    box-shadow:
      #000 -25px 25px 0px 0px,
      #000 -25px -25px 0px 0px,
      #000 25px 25px 0px 0px,
      #000 25px -25px 0px 0px;
  }
}

.five_1 {
  z-index: 5;
  transform: translateX(50px) rotateY(90deg);

  &:before {
    box-shadow:
      #000 -25px -25px 0px 0px,
      #000 -25px 25px 0px 0px,
      #000 25px -25px 0px 0px,
      #000 25px 25px 0px 0px;
  }
}

.six_1 {
  z-index: 5;
  transform: translateZ(-50px);

  &:before {
    background-color: white;
    box-shadow:
      #000 -25px -25px 0px 0px,
      #000 -25px 0px 0px 0px,
      #000 -25px 25px 0px 0px,
      #000 25px -25px 0px 0px,
      #000 25px 0px 0px 0px,
      #000 25px 25px 0px 0px;
  }
}

@keyframes rotate_1 {
  from {
    transform: rotateY(0) rotateX(360deg) rotateZ(360deg);
  }

  to {
    transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg);
  }
}

/* MEDIA QUERIES--------------------------------------------------------------------------*/

@media only screen and ( max-width: 425px ) {
  .dice_1 {
  left: 8vw;
  top: 30vh;
  }
}

@media only screen and ( min-width: 1500px ) {
  .dice_1 {
    width: 200px;
    height: 200px;
  }


.one_1 {
  transform: translateZ(100px);
}

.two_1 {
  transform: translateX(-100px) rotateY(-90deg);

  &:before {
    background-color: white;
    box-shadow:
      #000 -50px -50px 0px 0px,
      #000 50px 50px 0px 0px;
  }
}

.three_1 {
  transform: translateY(100px) rotateX(90deg);

  &:before {
    box-shadow:
      #000 -50px 50px 0px 0px,
      #000 50px -50px 0px 0px;
  }
}

.four_1 {
  transform: translateY(-100px) rotateX(90deg);

  &:before {
    background-color: white;
    box-shadow:
      #000 -50px 50px 0px 0px,
      #000 -50px -50px 0px 0px,
      #000 50px 50px 0px 0px,
      #000 50px -50px 0px 0px;
  }
}

.five_1 {
  transform: translateX(100px) rotateY(90deg);

  &:before {
    box-shadow:
      #000 -50px -50px 0px 0px,
      #000 -50px 50px 0px 0px,
      #000 50px -50px 0px 0px,
      #000 50px 50px 0px 0px;
  }
}

.six_1 {
  transform: translateZ(-100px);

  &:before {
    background-color: white;
    box-shadow:
      #000 -50px -50px 0px 0px,
      #000 -50px 0px 0px 0px,
      #000 -50px 50px 0px 0px,
      #000 50px -50px 0px 0px,
      #000 50px 0px 0px 0px,
      #000 50px 50px 0px 0px;
  }
}
}


/*Dice_2--------------------------------------------------*/
.dice_2 {
  left: 65vw;
  top: 10vh;
  width: 180px;
  height: 180px;
  animation: rotate_2 10s linear infinite;
}

.one_2 {
  transform: translateZ(90px);
}

.two_2 {
  transform: translateX(-90px) rotateY(-90deg);
}

.two_2:before {
  background-color: white;
  box-shadow:
    #000 -45px -45px 0px 0px,
    #000 45px 45px 0px 0px;
}

.three_2 {
  transform: translateY(90px) rotateX(90deg);
}

.three_2:before {
  box-shadow:
    #000 -45px 45px 0px 0px,
    #000 45px -45px 0px 0px;
}

.four_2 {
  transform: translateY(-90px) rotateX(90deg);
}

.four_2:before {
  background-color: white;
  box-shadow:
    #000 -45px 45px 0px 0px,
    #000 -45px -45px 0px 0px,
    #000 45px 45px 0px 0px,
    #000 45px -45px 0px 0px;
}

.five_2 {
  transform: translateX(90px) rotateY(90deg);
}

.five_2:before {
  box-shadow:
    #000 -45px -45px 0px 0px,
    #000 -45px 45px 0px 0px,
    #000 45px -45px 0px 0px,
    #000 45px 45px 0px 0px;
}

.six_2 {
  transform: translateZ(-90px);
}

.six_2:before {
  background-color: white;
  box-shadow:
    #000 -45px -45px 0px 0px,
    #000 -45px 0px 0px 0px,
    #000 -45px 45px 0px 0px,
    #000 45px -45px 0px 0px,
    #000 45px 0px 0px 0px,
    #000 45px 45px 0px 0px;
}

@keyframes rotate_2 {
  from {
    transform: rotateY(0) rotateX(0deg) rotateZ(0deg);
  }

  to {
    transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
  }
}

/*MEDIA QUERIES--------------------------------------------------------------*/

@media only screen and ( max-width: 1180px ) {
  .dice_2 {
    width: 90px;
    height: 90px;
  }

  .one_2 {
    transform: translateZ(45px);
  }

  .two_2 {
    transform: translateX(-45px) rotateY(-90deg);
  }

  .two_2:before {
    box-shadow:
      #000 -22.5px -22.5px 0px 0px,
      #000 22.5px 22.5px 0px 0px;
  }

  .three_2 {
    transform: translateY(45px) rotateX(90deg);
  }

  .three_2:before {
    box-shadow:
      #000 -22.5px 22.5px 0px 0px,
      #000 22.5px -22.5px 0px 0px;
  }

  .four_2 {
    transform: translateY(-45px) rotateX(90deg);
  }

  .four_2:before {
    box-shadow:
      #000 -22.5px 22.5px 0px 0px,
      #000 -22.5px -22.5px 0px 0px,
      #000 22.5px 22.5px 0px 0px,
      #000 22.5px -22.5px 0px 0px;
  }

  .five_2 {
    transform: translateX(45px) rotateY(90deg);
  }

  .five_2:before {
    box-shadow:
      #000 -22.5px -22.5px 0px 0px,
      #000 -22.5px 22.5px 0px 0px,
      #000 22.5px -22.5px 0px 0px,
      #000 22.5px 22.5px 0px 0px;
  }

  .six_2 {
    transform: translateZ(-45px);
  }

  .six_2:before {
    box-shadow:
      #000 -22.5px -22.5px 0px 0px,
      #000 -22.5px 0px 0px 0px,
      #000 -22.5px 22.5px 0px 0px,
      #000 22.5px -22.5px 0px 0px,
      #000 22.5px 0px 0px 0px,
      #000 22.5px 22.5px 0px 0px;
  }
}

@media only screen and ( min-width: 1500px ) {
  .dice_2 {
    width: 360px;
    height: 360px;
    top: 15vh;
  }
  
  .one_2 {
    transform: translateZ(180px);
  }
  
  .two_2 {
    transform: translateX(-180px) rotateY(-90deg);
  }
  
  .two_2:before {
    background-color: white;
    box-shadow:
      #000 -90px -90px 0px 0px,
      #000 90px 90px 0px 0px;
  }
  
  .three_2 {
    transform: translateY(180px) rotateX(90deg);
  }
  
  .three_2:before {
    box-shadow:
      #000 -90px 90px 0px 0px,
      #000 90px -90px 0px 0px;
  }
  
  .four_2 {
    transform: translateY(-180px) rotateX(90deg);
  }
  
  .four_2:before {
    background-color: white;
    box-shadow:
      #000 -90px 90px 0px 0px,
      #000 -90px -90px 0px 0px,
      #000 90px 90px 0px 0px,
      #000 90px -90px 0px 0px;
  }
  
  .five_2 {
    transform: translateX(180px) rotateY(90deg);
  }
  
  .five_2:before {
    box-shadow:
      #000 -90px -90px 0px 0px,
      #000 -90px 90px 0px 0px,
      #000 90px -90px 0px 0px,
      #000 90px 90px 0px 0px;
  }
  
  .six_2 {
    transform: translateZ(-180px);
  }
  
  .six_2:before {
    background-color: white;
    box-shadow:
      #000 -90px -90px 0px 0px,
      #000 -90px 0px 0px 0px,
      #000 -90px 90px 0px 0px,
      #000 90px -90px 0px 0px,
      #000 90px 0px 0px 0px,
      #000 90px 90px 0px 0px;
  }
  
}



/*Dice_3--------------------------------------------------*/
.dice_3 {
  left: 30vw;
  top: 40vh;
  width: 200px;
  height: 200px;
  animation: rotate_3 10s linear infinite;
}

.one_3 {
  transform: translateZ(100px);
}

.two_3 {
  transform: translateX(-100px) rotateY(-90deg);
  &:before {
    background-color: white;
    box-shadow:
      #000 -50px -50px 0px 0px,
      #000 50px 50px 0px 0px;
  }
}

.three_3 {
  transform: translateY(100px) rotateX(90deg);
  &:before {
    box-shadow:
      #000 -50px 50px 0px 0px,
      #000 50px -50px 0px 0px;
  }
}

.four_3 {
  transform: translateY(-100px) rotateX(90deg);
  &:before {
    background-color: white;
    box-shadow:
      #000 -50px 50px 0px 0px,
      #000 -50px -50px 0px 0px,
      #000 50px 50px 0px 0px,
      #000 50px -50px 0px 0px;
  }
}

.five_3 {
  transform: translateX(100px) rotateY(90deg);
  &:before {
    box-shadow:
      #000 -50px -50px 0px 0px,
      #000 -50px 50px 0px 0px,
      #000 50px -50px 0px 0px,
      #000 50px 50px 0px 0px;
  }
}

.six_3 {
  transform: translateZ(-100px);
  &:before {
    background-color: white;
    box-shadow:
      #000 -50px -50px 0px 0px,
      #000 -50px 0px 0px 0px,
      #000 -50px 50px 0px 0px,
      #000 50px -50px 0px 0px,
      #000 50px 0px 0px 0px,
      #000 50px 50px 0px 0px;
  }
}


@keyframes rotate_3 {
  from {
    transform: rotateY(0deg) rotateX(0deg) rotateZ(360deg);
  }

  to {
    transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg);
  }
}

@media only screen and ( max-width: 425px ) {
  .dice_3 {
    left: 40vw;
    top: 55vh;
  }
}

@media only screen and ( max-width: 1180px ) {
  .dice_3 {
    width: 150px;
    height: 150px;
    animation: rotate_3 10s linear infinite;
  }
  
  .one_3 {
    transform: translateZ(75px);
  }
  
  .two_3 {
    transform: translateX(-75px) rotateY(-90deg);
    &:before {
      background-color: white;
      box-shadow:
        #000 -37.5px -37.5px 0px 0px,
        #000 37.5px 37.5px 0px 0px;
    }
  }
  
  .three_3 {
    transform: translateY(75px) rotateX(90deg);
    &:before {
      box-shadow:
        #000 -37.5px 37.5px 0px 0px,
        #000 37.5px -37.5px 0px 0px;
    }
  }
  
  .four_3 {
    transform: translateY(-75px) rotateX(90deg);
    &:before {
      background-color: white;
      box-shadow:
        #000 -37.5px 37.5px 0px 0px,
        #000 -37.5px -37.5px 0px 0px,
        #000 37.5px 37.5px 0px 0px,
        #000 37.5px -37.5px 0px 0px;
    }
  }
  
  .five_3 {
    transform: translateX(75px) rotateY(90deg);
    &:before {
      box-shadow:
        #000 -37.5px -37.5px 0px 0px,
        #000 -37.5px 37.5px 0px 0px,
        #000 37.5px -37.5px 0px 0px,
        #000 37.5px 37.5px 0px 0px;
    }
  }
  
  .six_3 {
    transform: translateZ(-75px);
    &:before {
      box-shadow:
        #000 -37.5px -37.5px 0px 0px,
        #000 -37.5px 0px 0px 0px,
        #000 -37.5px 37.5px 0px 0px,
        #000 37.5px -37.5px 0px 0px,
        #000 37.5px 0px 0px 0px,
        #000 37.5px 37.5px 0px 0px;
    }
  }
}

@media only screen and (min-width: 1500px) {
  .dice_3 {
    width: 300px;
    height: 300px;
  }
  
  .one_3 {
    transform: translateZ(150px);
  }
  
  .two_3 {
    transform: translateX(-150px) rotateY(-90deg);
    &:before {
      background-color: white;
      box-shadow:
        #000 -75px -75px 0px 0px,
        #000 75px 75px 0px 0px;
    }
  }
  
  .three_3 {
    transform: translateY(150px) rotateX(90deg);
    &:before {
      box-shadow:
        #000 -75px 75px 0px 0px,
        #000 75px -75px 0px 0px;
    }
  }
  
  .four_3 {
    transform: translateY(-150px) rotateX(90deg);
    &:before {
      background-color: white;
      box-shadow:
        #000 -75px 75px 0px 0px,
        #000 -75px -75px 0px 0px,
        #000 75px 75px 0px 0px,
        #000 75px -75px 0px 0px;
    }
  }
  
  .five_3 {
    transform: translateX(150px) rotateY(90deg);
    &:before {
      box-shadow:
        #000 -75px -75px 0px 0px,
        #000 -75px 75px 0px 0px,
        #000 75px -75px 0px 0px,
        #000 75px 75px 0px 0px;
    }
  }
  
  .six_3 {
    transform: translateZ(-150px);
    &:before {
      background-color: white;
      box-shadow:
        #000 -75px -75px 0px 0px,
        #000 -75px 0px 0px 0px,
        #000 -75px 75px 0px 0px,
        #000 75px -75px 0px 0px,
        #000 75px 0px 0px 0px,
        #000 75px 75px 0px 0px;
    }
  }
  
}



/*Dice_4--------------------------------------------------*/
.dice_4 {
  left: 85vw;
  top: 70vh;
  width: 100px;
  height: 100px;
  animation: rotate_4 10s linear infinite;
}

.one_4 {
  transform: translateZ(50px);
}

.two_4 {
  transform: translateX(-50px) rotateY(-90deg);
  &:before {
    background-color: white;
    box-shadow:
      #000 -25px -25px 0px 0px,
      #000 25px 25px 0px 0px;
  }
}

.three_4 {
  transform: translateY(50px) rotateX(90deg);
  &:before {
    box-shadow:
      #000 -25px 25px 0px 0px,
      #000 25px -25px 0px 0px;
  }
}

.four_4 {
  transform: translateY(-50px) rotateX(90deg);
  &:before {
    background-color: white;
    box-shadow:
      #000 -25px 25px 0px 0px,
      #000 -25px -25px 0px 0px,
      #000 25px 25px 0px 0px,
      #000 25px -25px 0px 0px;
  }
}

.five_4 {
  transform: translateX(50px) rotateY(90deg);
  &:before {
    box-shadow:
      #000 -25px -25px 0px 0px,
      #000 -25px 25px 0px 0px,
      #000 25px -25px 0px 0px,
      #000 25px 25px 0px 0px;
  }
}

.six_4 {
  transform: translateZ(-50px);
  &:before {
    background-color: white;
    box-shadow:
      #000 -25px -25px 0px 0px,
      #000 -25px 0px 0px 0px,
      #000 -25px 25px 0px 0px,
      #000 25px -25px 0px 0px,
      #000 25px 0px 0px 0px,
      #000 25px 25px 0px 0px;
  }
}

@keyframes rotate_4 {
  from {
    transform: rotateY(360) rotateX(0deg) rotateZ(360deg);
  }

  to {
    transform: rotateY(0deg) rotateX(360deg) rotateZ(0deg);
  }
}

@media only screen and ( max-width: 425px ) {
  .dice_4 {
    left: 63vw;
    top: 110vh;
  }
}

@media only screen and ( min-width: 1500px) {
  .dice_4 {
    width: 200px;
    height: 200px;
  }


.one_4 {
  transform: translateZ(100px);
}

.two_4 {
  transform: translateX(-100px) rotateY(-90deg);

  &:before {
    background-color: white;
    box-shadow:
      #000 -50px -50px 0px 0px,
      #000 50px 50px 0px 0px;
  }
}

.three_4 {
  transform: translateY(100px) rotateX(90deg);

  &:before {
    box-shadow:
      #000 -50px 50px 0px 0px,
      #000 50px -50px 0px 0px;
  }
}

.four_4 {
  transform: translateY(-100px) rotateX(90deg);

  &:before {
    background-color: white;
    box-shadow:
      #000 -50px 50px 0px 0px,
      #000 -50px -50px 0px 0px,
      #000 50px 50px 0px 0px,
      #000 50px -50px 0px 0px;
  }
}

.five_4 {
  transform: translateX(100px) rotateY(90deg);

  &:before {
    box-shadow:
      #000 -50px -50px 0px 0px,
      #000 -50px 50px 0px 0px,
      #000 50px -50px 0px 0px,
      #000 50px 50px 0px 0px;
  }
}

.six_4 {
  transform: translateZ(-100px);

  &:before {
    background-color: white;
    box-shadow:
      #000 -50px -50px 0px 0px,
      #000 -50px 0px 0px 0px,
      #000 -50px 50px 0px 0px,
      #000 50px -50px 0px 0px,
      #000 50px 0px 0px 0px,
      #000 50px 50px 0px 0px;
  }
}
}


/*Dice_5--------------------------------------------------*/
.dice_5 {
  left: 20vw;
  top: 80vh;
  width: 70px;
  height: 70px;
  animation: rotate_5 10s linear infinite;
}

.one_5 {
  transform: translateZ(35px);
}

.two_5 {
  transform: translateX(-35px) rotateY(-90deg);
  &:before {
    background-color: white;
    box-shadow:
      #000 -17.5px -17.5px 0px 0px,
      #000 17.5px 17.5px 0px 0px;
  }
}

.three_5 {
  transform: translateY(35px) rotateX(90deg);
  &:before {
    box-shadow:
      #000 -17.5px 17.5px 0px 0px,
      #000 17.5px -17.5px 0px 0px;
  }
}

.four_5 {
  transform: translateY(-35px) rotateX(90deg);
  &:before {
    background-color: white;
    box-shadow:
      #000 -17.5px 17.5px 0px 0px,
      #000 -17.5px -17.5px 0px 0px,
      #000 17.5px 17.5px 0px 0px,
      #000 17.5px -17.5px 0px 0px;
  }
}

.five_5 {
  transform: translateX(35px) rotateY(90deg);
  &:before {
    box-shadow:
      #000 -17.5px -17.5px 0px 0px,
      #000 -17.5px 17.5px 0px 0px,
      #000 17.5px -17.5px 0px 0px,
      #000 17.5px 17.5px 0px 0px;
  }
}

.six_5 {
  transform: translateZ(-35px);
  &:before {
    background-color: white;
    box-shadow:
      #000 -17.5px -17.5px 0px 0px,
      #000 -17.5px 0px 0px 0px,
      #000 -17.5px 17.5px 0px 0px,
      #000 17.5px -17.5px 0px 0px,
      #000 17.5px 0px 0px 0px,
      #000 17.5px 17.5px 0px 0px;
  }
}

@keyframes rotate_5 {
  from {
    transform: rotateY(360) rotate(360deg) rotateZ(360deg);
  }

  to {
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  }
}

@media only screen and ( max-width: 1180px ) {
  .dice_5 {
    left: 15vw;
    top: 90vh;
  }
}

@media only screen and (min-width: 1500px){
  .dice_5 {
    width: 140px;
    height: 140px;
  }
  
  .one_5 {
    transform: translateZ(70px);
  }
  
  .two_5 {
    transform: translateX(-70px) rotateY(-90deg);
    &:before {
      background-color: white;
      box-shadow:
        #000 -35px -35px 0px 0px,
        #000 35px 35px 0px 0px;
    }
  }
  
  .three_5 {
    transform: translateY(70px) rotateX(90deg);
    &:before {
      box-shadow:
        #000 -35px 35px 0px 0px,
        #000 35px -35px 0px 0px;
    }
  }
  
  .four_5 {
    transform: translateY(-70px) rotateX(90deg);
    &:before {
      background-color: white;
      box-shadow:
        #000 -35px 35px 0px 0px,
        #000 -35px -35px 0px 0px,
        #000 35px 35px 0px 0px,
        #000 35px -35px 0px 0px;
    }
  }
  
  .five_5 {
    transform: translateX(70px) rotateY(90deg);
    &:before {
      box-shadow:
        #000 -35px -35px 0px 0px,
        #000 -35px 35px 0px 0px,
        #000 35px -35px 0px 0px,
        #000 35px 35px 0px 0px;
    }
  }
  
  .six_5 {
    transform: translateZ(-70px);
    &:before {
      background-color: white;
      box-shadow:
        #000 -35px -35px 0px 0px,
        #000 -35px 0px 0px 0px,
        #000 -35px 35px 0px 0px,
        #000 35px -35px 0px 0px,
        #000 35px 0px 0px 0px,
        #000 35px 35px 0px 0px;
    }
  }
}
  

/*------------------------------------------------------------------*/

.tip {
  width: 300px;
  color: white;
  background-color: white;
  opacity: 0;
  border: solid 2px rgb(96, 125, 175);
  position: absolute;
  z-index: 100;
  margin: 20px;
}

.tip_text {
  font-family: futurabook;
  color: black;
  background-color: transparent;
  padding: 10px;
  font-size: 1.1rem;
  hyphens: auto;
}

.tip_1 {
  left: 7vw;
  top: 13vh;
}

.tip_2 {
  left: 65vw;
  top: 10vh;
}

.tip_3 {
  left: 30vw;
  top: 40vh;
}

.tip_4 {
  left: 75vw;
  top: 70vh;
}

.tip_5 {
  left: 20vw;
  top: 80vh;
}

.dice:hover + .tip {
  opacity: 0.98;
}
.dice:hover {
  animation-play-state: paused;
}

.dice:active {
  animation-play-state: paused;
}

.dice:active+.tip {
  opacity: 0.98;
}

.dice:focus+.tip {
opacity: 0.98;
}

@media only screen and ( max-width: 1180px ){
  .tip_2 {
    left: 32vw;
    top: 10vh;
  }

  .tip_4 {
    width: 150px;
    left: 70vw;
  }

  .tip_5 {
    top: 90vh; 
  }
}

@media only screen and ( max-width: 425px ) {
  .tip {
    width: 200px;
  }
  .tip_text {
    font-size: 0.75rem;
  }

  .tip_1 {
    left: 8vw;
    top: 30vh;
  }
  
  .tip_2 {
    left: 22vw;
    top: 10vh;
  }
  
  .tip_3 {
    left:20vw;
    top: 50vh;
  }
  
  .tip_4 {
    width: 150px;
    left: 40vw;
    top: 110vh;
  }
  
  .tip_5 {
    width: 150px;
    left: 18vw;
    top: 90vh;
  }
}

@media only screen and (min-width: 1500px) {
  .tip {
    width: 450px;
    border: solid 3px rgb(96, 125, 175);
  }
  
  .tip_text {
    font-size: 1.8rem;
    hyphens: auto;
  }

  .tip_2 {
    left: 65vw;
    top: 15vh;
  }
  
  .tip_5 {
    left: 10vw;
    top: 80vh;
  }
  
}