@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
.css-element {
}
}

html,
button,
input,
select,

html {
    font-size: 1.6em;
    font-family: monospace;
    line-height: 1.6;
    margin-left: 1em;
}

#math-typesetting { 
    margin: 0 0 2em; 
    text-indent: 1.5em; 
}

body {
  background-color: #006882;
  color: #93a1a1;
  text-rendering: optimizeLegibility;
}

/*
#002b36
*/

* { box-sizing: border-box; }



/*
#CCC
*/

.scene {
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  width: 200px;
  height: 200px;
  border: 1px solid #006882;
  perspective: 400px;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
}

.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
  user-select: none;
}

.cube__face--front  { background: hsla(  0, 100%, 50%, 0.7); }
.cube__face--right  { background: hsla( 60, 100%, 50%, 0.7); }
.cube__face--back   { background: hsla(120, 100%, 50%, 0.7); }
.cube__face--left   { background: hsla(180, 100%, 50%, 0.7); }
.cube__face--top    { background: hsla(240, 100%, 50%, 0.7); }
.cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }

.cube__face--front  { transform: rotateY(  0deg) translateZ(100px); }
.cube__face--right  { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back   { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }

.cube.is-backface-hidden .cube__face {
  backface-visibility: hidden;
}

#cubetext {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  transform-style: preserve-3d;
  animation: spin 20s linear infinite;
}

#cubetext > div {
  position: absolute;
  transform-style: preserve-3d;
}

#cubetext > div > div {
  animation: un-spin 20s linear infinite;
}

@keyframes un-spin {
  from { transform: rotateY(0turn); }
  to { transform: rotateY(-1turn); }
}

@keyframes spin {
  from { transform: rotateX(-0.1turn) rotateY(0turn); }
  to { transform: rotateX(-0.1turn) rotateY(1turn); }
}