/* @import url('https://fonts.googleapis.com/css?family=Roboto'); */

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
  overflow: hidden;
  white-space: nowrap;
  font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
}

#scratch {
  opacity: 0;
  z-index: -1;
  position: absolute;
}

body > img {
  opacity: .01;
}

.running .ace_line {
  transition: background-color 200ms ease;
}
.runner .ace_line .ace_comment {
  transition: color 200ms ease;
}

.started .ace_line.morph_flash {
  background-color: transparent;
}
.started .ace_line.morph_flash .ace_comment {
  color: #75715E;
}


.morph_error {
  background-color: #902020;
}
.morph_error .ace_comment {
  font-weight: bold;
  color: #B0B080;
}
.morph_status {
  background-color: #000000;
}
.morph_status .ace_comment {
  color: #D0F0C0;
}
.morph_cursor {
  background-color: #206020;
}
.morph_cursor .ace_comment {
  color: #D0A0D0;
}
.morph_assign {
  background-color: #C0A020;
}
.morph_assign .ace_comment {
  color: #202040;
}
.morph_pause {
  background-color: #202040;
}
.morph_pause .ace_comment {
  color: #B0B080;
}

.ace_editor > .ace_line {
  position: relative;
  z-index: 1000;
  width:100%;
  white-space: pre;
}


.run-button {
  outline: none;

  position: absolute;
  z-index: 1000;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  left: 40em;
  top: 10px;
  margin-left: 250px;
  width: 0;
  height: 74px;

}

body.no-gl .run-button { 
  left: 100%;
}

/* PLAY BUTTON */

body.started.paused .run-button.small:hover,
.run-button.small {
  border-width: 12px 0 12px 20px;
  height: 25px;
  left: 10px;
  margin-left: 0px;
}

/* by stacking these qualifiers I can make it appear
as though the button is circling when mouse over and
a pause button when the script can be paused */
body.started.paused .run-button:hover,
body.stopped .run-button:hover,
body.stopped .run-button:active,
body.stopped .run-button:focus,
.run-button {
  border-color: transparent transparent transparent #208020;
  transition: border 200ms ease, color 200ms ease;
  cursor: pointer;
  animation: none;
  border-style: solid;
  border-width: 37px 0 37px 60px;
}

/* RUNNING BUTTON */


body:not(.frontend) .run-button,
body.running .run-button:active:hover,
body.running .run-button:focus:hover,
body.running .run-button:active,
body.running .run-button:focus,
body.running .run-button,
body.starting .run-button:hover,
body.starting .run-button:active,
body.starting .run-button:focus,
body.starting .run-button
{
  width: 74px;
  border-radius: 100%;
  border-width: 15px;
  border-color: #808080;
  border-style: solid;
  border-top-color: #FFFFFF;
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
}


body:not(.frontend) .run-button.small,
body.running .run-button.small:active:hover,
body.running .run-button.small:focus:hover,
body.running .run-button.small:active,
body.running .run-button.small:focus,
body.running .run-button.small,
body.starting .run-button.small:hover,
body.starting .run-button.small:active,
body.starting .run-button.small:focus,
body.starting .run-button.small
{
  width: 25px;
  margin-left: 0px;
  border-width: 5px;
}

/* PAUSE BUTTON */

body.started.paused .run-button,
body.started.running .run-button:hover {
  border-color: transparent transparent transparent #808080;
  border-style: double;
  border-width: 0px 0 0px 60px;
  animation: none;
  border-radius: 0;
  width: 0;
}

body.started.paused .run-button.small,
body.started.running .run-button.small:hover {
  border-width: 0px 0 0px 20px;
  width: 0;
}


#run-accessor {
  height: 1px;
  width: 1px;
  visibility: hidden;
  position: absolute;
  top:100%;
  left:100%;
}


@media (max-aspect-ratio: 4/5) {
  .run-button {
    left: 100%;
  }

  .run-button.small {
    left: 10px;
  }
}

#run-script {
  display: none;
  visibility: hidden;
  height: 1px;
  width: 1px;
}


@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#viewport-frame {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24em;
  z-index: 1;
  display: flex;
  /* padding-top:22px; */
  flex-direction: row;
}

#editor {
  width:40em;
  flex-shrink: 0;
}

#viewport-frame canvas {
  background-color: rgba(0, 0, 0, 0.0);
  width: 0;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  display:inline-block;
}

body.no-gl #viewport-frame canvas {
  width:0;
}

body.no-gl #editor {
  width:100%;
}

@media (max-aspect-ratio: 4/5) {
  #viewport-frame {
    flex-direction: column;
  }

  #editor {
    width: 100%;
    height: 50%;
  }

  #viewport-frame canvas {
    height: 50%;
    width: 100%;
  }

  body.no-gl #editor {
    height:100%;
  }

  body.no-gl #viewport-frame canvas {
    height:0;
  }

}


#viewport-frame:focus {
  outline: none;
}

.done-loading #viewport-frame canvas {
  background-color: rgba(0, 0, 0, 1.0);
}

#viewport-frame:-moz-full-screen,
#viewport-frame canvas:-moz-full-screen {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

#viewport-frame:-webkit-full-screen,
#viewport-frame canvas:-webkit-full-screen {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

#loading {
  display: none; 
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.viewport-frame {
  perspective: 1000px;
}


.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg);
}

.nipple {
  pointer-events: none;
}

@-webkit-keyframes rotatequake {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

#right-joystick, #left-joystick {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  max-width:50%;
  height:100%;
  width:100%;
  display:none;
  z-index:1000;
}

#right-joystick {
  left:50%;
}

.joysticks #right-joystick, .joysticks #left-joystick {
  display:block;
}