.editor, iframe, .spot-container, .image-container{
  padding-bottom: 20px;
  padding-top: 20px;
}

iframe{
  max-width: 100%;
}
.image-container img{
  width: 100%;
}

.editor{
  display: inline-block;
  width: 100%;
}

.editor .chart-container{
  background: #000;
  width: 50%;
  display: inline-block;
  height: 320px;
}

.CodeMirror{
  background: #fff;
  width: 50%;
  display: inline-block;
  font-size: 15px;
}

.CodeMirror pre{
  font-family: 'Roboto Mono', monospace;
  line-height: 22px;
}

@media (max-width: 760px){
  .CodeMirror{
    width: 100%;
  }

  .editor .chart-container{
    width: 100%;
    height: 220px;

  }
}


canvas{
  pointer-events: none;
}
.target{
  animation-timing-function: ease-in-out;
}

.base-target{
  transition: fill 1s;
}

.hit .base-target{
  fill: #f0f;
  animation: strokeIn .4s infinite alternate ease-in-out;
}

@keyframes strokeIn { 
  from { fill: #fff; } 
}



.reload .chart-container {
  background: #f5f5f5;
}
.reload canvas, .reload .target{
  opacity: 0 !important;
}


.spot-full{
  width: 100%;
}


pre{
  overflow-x: scroll;
}