/************/

/*          */

/*   Cube   */

/*          */

/************/

.cube {
    width: 100%;
    height: 100%;
}

/*
  
      This next bit is just for labeling a Cube's face.
  
  */

.faceLabel {
    display: none;
    position: absolute;
    font-size: 60px;
    text-align: center;
    font-family: "RubikExtended";
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
    color: #fff;
}

/****************/

/*              */

/*   Cubelets   */

/*              */

/****************/

.cube .cubelet {
    width: 1em;
    height: 1em;
    position: absolute;
    box-sizing: border-box;
}

/*********************/

/*                   */

/*   Cubelet Faces   */

/*                   */

/*********************/

/*
      
      Direction-facing planes of limited size
      that act as containers for content.
  
  */

.cube .face {
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: #333;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    /*padding: 0.05em;*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/*
  
      Extroverted faces have content such as a colored sticker, text, etc.
      They are constantly visible. Meanwhile introverted faces are not
      visible when the cube is an untwisted state. Some introverted walls 
      are momentarily visible as the cube twists.
  
  */

.cube .face.faceIntroverted {
    background-color: #333;
}

/*
  
      Our Cubelet faces are naturally black to match the physical Rubik's Cube.
      Adding or removing the "transparent" class here keeps the position and
      rotation integrity of the face while supporting Group.showPlastics() and
      Group.hidePlastics().
  
  */

.cube .face.faceTransparent {
    background-color: transparent;
}

/*
  
      Awwww.... Look at da purty colors...
  
  */

.purty .face {
    opacity: 0.5;
}

.purty .face.faceFront {
    background-color: #fff;
}

.purty .face.faceUp {
    background-color: #e87000;
}

.purty .face.faceRight {
    background-color: #3d81f6;
}

.purty .face.faceDown {
    background-color: #dc422f;
}

.purty .face.faceLeft {
    background-color: #009d54;
}

.purty .face.faceBack {
    background-color: #f5b400;
}

/*.purty .face.faceFront { background-color: #CCC; }
  .purty .face.faceUp    { background-color: #C30; }
  .purty .face.faceRight { background-color: #00A; }
  .purty .face.faceDown  { background-color: #C00; }
  .purty .face.faceLeft  { background-color: #070; }
  .purty .face.faceBack  { background-color: #CB0; }*/

/****************************/

/*                          */

/*   Cubelet Face Content   */

/*                          */

/****************************/

/*
  
      WIREFRAMES
  
      Oddly, we cannot use borders to make our wireframes
      because this will cause a visible oscillation as CSS
      struggles to decide what gets drawn on top.
      Instead we use specially crafted box-shadows.
  
  */

.cube .face>.wireframe {
    /*box-sizing: border-box;*/
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.05);
}

/*
  
      STICKERS
  
      About what you'd expect. The default color here
      is full on bright purple (which does not exist 
      on an actual Rubik's Cube) so that one can see 
      quickly if something's gone wrong with stickers.
  
  */

.cube .sticker {
    /*position: absolute;*/
    width: 100%;
    height: 100%;
    /*background-color: #F0F;*/
    /*border-radius: 0.1em;*/
    text-align: center;
}

.cube .stickerLogo {
    background-image: url("https://viewmycube.com/media/rubiksLogoClassic.png");
    background-size: 100% 100%;
    background-repeat: none;
}

.cube .sticker.red {
    background: #d7d8d9;
}

.cube .sticker.white {
    background: #b3b5b7;
}

.cube .sticker.blue {
    background: #585858;
}

.cube .sticker.green {
    background: #767778;
}

.cube .sticker.orange {
    background: #e6e7e8;
}

.cube .sticker.yellow {
    background: #939597;
}

/*
  
      CUBELET IDs
  
      Each Cubelet has a unique ID number from 0 to 26.
      We display these mostly for debugging purposes
      as the end user probably doesn't care and/or would
      find this superfluous info confusing.
  
  */

.cube .face>.id {
    display: none;
    position: absolute;
    z-index: 1000;
    width: 90%;
    height: 90%;
    font-size: 1em;
    line-height: 0.9em;
    text-align: center;
    color: #000;
}

.cube .face>.id>.underline {
    border-bottom: 1px solid #000;
}

/*
  
      We want ID numbers displayed on introverted faces to be white,
      but why use #FEFEFE instead of #FFF?
      So we can export as PDF, open up in Adobe Illustrator, select "Same Fill Color" 
      and it will exclude our #FFF text nodes!
  
  */

.cube .face.faceIntroverted>.id {
    color: #fefefe;
}

.cube .face.faceIntroverted>.id>.underline {
    border-bottom: 1px solid #fefefe;
}

/*
      
      TEXT
  
      Formerly referred to as "Hero Text", this is the one-character
      display for a Cubelet face.
  
  */

.cube .face>.text {
    display: none;
    position: absolute;
    z-index: 2000;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    font-family: "RubikExtended", sans-serif;
    font-size: 1em;
    line-height: 1em;
}

.graydient {
    /* http://www.colorzilla.com/gradient-editor/ */
    background: #000;
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgb(41, 44, 46) 0%, #000000 90%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgb(41, 44, 46)), color-stop(90%, #000000));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgb(41, 44, 46) 0%, #000000 90%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgb(41, 44, 46) 0%, #000000 90%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgb(41, 44, 46) 0%, #000000 90%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgb(41, 44, 46) 0%, #000000 90%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgb(41, 44, 46), endColorstr='#000000', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.scrambleBtnStyle span {
    background-image: url(https://iamthecu.be/media/buttons/actionShuffle.png);
    width: 48px;
    height: 48px;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.scrambleBtnStyle {
    position: fixed;
    bottom: 10px;
    /* right: 50px; */
    /* left: 50%; */
    /* This should be commented out in next merge */
    /* transform: translate(-50%, 0); */
    /* This should be commented out in next merge */
    border-radius: 7px;
    /* width: 136px; */
    /* height: 40px; */
    font-size: 20px;
    /* background-color: black; */
    display: flex;
    color: white;
    /* border: 1.5px solid white; */
    z-index: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* This should be uncommented in next merge */
/* .scrambleBtnStyle {
    right: 50px;
  }
  
  .createBtnStyle {
    background-color: rgb(0 162 58);
    left: 35px;
    bottom: 20px;
    position: fixed;
    display: flex;
    z-index: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 40px;
    width: 40px;
    border-radius: 50%;
  } */

.logoStyle {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1;
}

@media only screen and (min-width: 480px) {

    /* Below should be commented out in next merge */
    .scrambleBtnStyle {
        right: 30px;
        /* transform: translate(0, 0);
        left: auto; */
    }

    /* .createBtnStyle {
      left: 50px;
      transform: translate(0, 0);
      right: auto;
    } */
}