.editor{
  border-radius: 1rem;
  background-color: #1d1e22;
  box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.75);
  -webkit-box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.75);
    width: 30vw;
}

@media (max-width: 768px) {
    .editor{
     width: 80vw;
    }
}
@media (min-width: 1441px) {
    .editor{
        width: 20vw;
    }
}

.editor header{
  border-radius: 1rem 1rem 0 0 ;
  background-color: var(--gray-dark);
  padding: 0 1rem;

}

.editor header span{
  float: left;
  width: 1rem;
  height:1rem;
  border-radius: 50%;
  margin: 1rem 0.25rem;
}
.cntrl-1{
  background-color: red;
}
.cntrl-2{
  background-color: yellow;
}
.cntrl-3{
  background-color: greenyellow;
}
 pre{
  overflow: hidden!important;
  max-height: 300px;
  margin: 0;
  border-radius: 0 0 1rem 1rem;
}

 code{
     display: block;
     font-size: 1rem;
     overflow-x: auto!important;
     width: fit-content;
 }
 code > *{
     font-size: 1rem;
 }
code[class*=language-], pre[class*=language-]{
  line-height: 0.5rem;

}
pre[class*=language-]{
  margin: 0!important;
}