/*************************************************************************
* 
*    style.css
*    
*    Filipe Teixeira's Rubik's Cube Simulator
*    
*    Copyright (c) 2023 by Filipe Martins Teixeira. All rights reserved.
*    
*    Author name: Filipe Martins Teixeira
*    Author e-mail: filipe@filipeteixeira.com.br, shuantsu@gmail.com
*    Author github: https://github.com/shuantsu
*    Author homepage: https://www.filipeteixeira.com.br
*    
*    This code is licensed for personal and non-commercial use. You may
*    modify the code solely for personal use and may not distribute or
*    sell the modified code.
*    
*    Redistribution of this code without written permission from the
*    author is strictly prohibited. Using this code in competing
*    products or services is prohibited. You may not remove or modify
*    any copyright notices included in this code.
*    
*    This code is provided "as is" without warranty of any kind,
*    expressed or implied. The author assumes no liability for any
*    damages or issues arising from the use of this code.
* 
*************************************************************************/

#hud {position: absolute;top: 10px;left: 0;padding-left: 20px;color: white;}#data-inputs {position:absolute;bottom:0;right:0;color:white;}#mov {display:inline-block;margin-right:10px }#alg {color:cyan;}:root {--cubeBorder: 2px;--cubeColor: black;--negCubeBorder: calc(var(--cubeBorder)*-1);}body {background-color: rgb(68, 68, 68);display: flex;align-items: center;justify-content: center;height: 100vh;margin: 0;-webkit-user-select: none;-ms-user-select: none;user-select: none;font-family: roboto;}table {border-collapse: collapse;table-layout: fixed;width:100%;height:100%;}* {transition: .12s all;}#cube-container table td {text-align: center;line-height: var(--size);box-shadow: inset var(--cubeBorder) var(--cubeBorder) 0 var(--cubeColor), inset var(--negCubeBorder) var(--negCubeBorder) 0 var(--cubeColor);}#cube-perspective {perspective: 50000px;}:root {--cubeDimension: 400px;}#cube-container {width: var(--cubeDimension);height: var(--cubeDimension);position: relative;top: calc(50% - calc(var(--cubeDimension)/2));left: calc(50% - calc(var(--cubeDimension)/2));transform-style: preserve-3d;}.face {position: absolute;width: 100%;height: 100%;background-color: transparent;border: 1px solid #999;box-sizing: border-box;transform-origin: center center;}.front {transform: translateZ(calc(var(--cubeDimension)/2));}.back {transform: rotateY(180deg) translateZ(calc(var(--cubeDimension)/2));}.top {transform: rotateX(90deg) translateZ(calc(var(--cubeDimension)/2));}.bottom {transform: rotateX(-90deg) translateZ(calc(var(--cubeDimension)/2));}.left {transform: rotateY(-90deg) translateZ(calc(var(--cubeDimension)/2));}.right {transform: rotateY(90deg) translateZ(calc(var(--cubeDimension)/2));}