/* Die roller and dice settings */

.colorSwatch {
        border: solid thin;
        margin: 1vh;
        padding: 1vh;
    }

    #dieRollingWindow {
    }

    .cube {
        position: relative;
        margin: 5vh auto;
        height: 8vh;
        width: 8vh;        transition: transform 1.8s ease-out;
        transform-style: preserve-3d;
    }

    .cubeSmall {
        margin: 20px;
        height: 3.7vh;
        width: 3.7vh;
        transition: transform 1.5s ease-out;
        transform-style: preserve-3d;
    }

    .face {
      position: absolute;
      height: 8vh; /* was "50" with no units*/
      width: 8vh;
      padding: 0px;
      background-color: rgba(50, 50, 50, 1);
      font-size: 27px;
      line-height: 1em;
      color: #fff;
      border: 1px solid #555;
//      border-radius: 2.1vh; /*was 12px*/
      border-radius: 1vh;
    }

    .faceSmall {
      position: absolute;
      height: 3.7vh;
      width: 3.7vh;

      padding: 0px;
      background-color: ivory;
      color: #fff;
      border: 1px solid #555;
      border-radius: 6px;
    }

    .innerX {
        height: 45;
        width: 45;

        transform: rotateX(90deg)
    }

    .innerY {
        height: 45;
        width: 45;

        transform: rotateY(90deg)
    }
    .innerZ {
        height: 45;
        width: 45;

        transform: rotateZ(90deg)
    }

    /*all instances of 25px changed to 4vh and 13px to 2vh*/
    .one  {
        transform: rotateX(90deg) translateZ(4vh);
    }

    .two {
        transform: translateZ(4vh);
    }

    .three {
        transform: rotateY(90deg) translateZ(4vh);
    }

    .four {
        transform: rotateY(180deg) translateZ(4vh);
    }

    .five {
        transform: rotateY(-90deg) translateZ(4vh);
    }

    .six {
        transform: rotateX(-90deg) rotate(180deg) translateZ(4vh);
    }

    .oneSmall  {
        transform: rotateX(90deg) translateZ(2vh);
    }

    .twoSmall {
        transform: translateZ(2vh);
    }

    .threeSmall {
        transform: rotateY(90deg) translateZ(2vh);
    }

    .fourSmall {
        transform: rotateY(180deg) translateZ(2vh);
    }

    .fiveSmall {
        transform: rotateY(-90deg) translateZ(2vh);
    }

    .sixSmall {
        transform: rotateX(-90deg) rotate(180deg) translateZ(2vh);
    }

    .dot {
        position:absolute;
        width:20%;
        height:20%;
        border-radius:100%;
        background:#f44;
        box-shadow:inset 3px 3px 3px #222;
    }

    .smallDot {
        position:absolute;
        width:20%;
        height:20%;
        border-radius:100%;
        background: white;
        box-shadow:inset 1px 1px 0.15vh #333;
    }

    .posUpperLeft {
        top:15%;
        left:15%;
    }
    .posMidLeft {
        bottom:40%;
        left:15%;
    }
    .posLowerLeft {
        bottom:15%;
        left:15%;
    }
    .posCenter {
        bottom:40%;
        right:40%;
    }
    .posUpperRight {
        top:15%;
        right:15%;
    }
    .posMidRight {
        bottom:40%;
        right:15%;
    }
    .posLowerRight {
        bottom:15%;
        right:15%;
    }

.numDiceButton {
    position: fixed;
    top: 85%;
    bottom: 10%;
    background: grey;
    text-align: center;
    padding: 8px 0;
    margin: 2%;
    margin: auto;

}