@import url('https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap');

body{
  margin: 0;
  background: #f1f1f1;
}

a{
  text-decoration: none;
  color: #4967ff;
}
a:hover{
  color: #3951ca;
}

.editor{
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: inherit;
}

.usage{
  position: absolute;
  list-style: none;
  max-width: 300px;
  height: 100%;
  background: inherit;
}
.usage__text{
  color: #686868;
  font-weight: normal;
  font-family: Rubik;
  padding: 8px 0;
  font-size: 13px;
}
.usage__text--hide{
  cursor: pointer;
  font-weight: bold;
}
.usage__text--hide:hover{color: #ccc;}

.output{
  width: 100%;
  height: 100%;
}

.flex-grow{
  flex-grow: 1;
}

.input{
  position: absolute;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 32px;
  box-sizing: border-box;
}
.input__group{
  display: flex;
  flex-direction: column;
  padding: 16px 8px;
}
.input__field,
.input__button{
  border: 1.5px solid transparent;
}
.input__field:focus,
.input__button:focus{
  border-color: #4967ff;
}
.input__label{
  color: #5e5e5e;
  padding: 4px 0;
  font-family: Rubik;
  user-select: none;
}
.input__field,
.input__button{
  background: #fff;
  outline: #ccc;
  border-radius: 8px;
  box-shadow: 0 0 13px #e6e6e6;
  padding: 8px 16px;
  box-sizing: border-box;
  margin: auto 0;
  font-family: Rubik;
}
#input-node{
  flex-grow: 1;
}
.input__button{
  cursor: pointer;
  font-weight: bold;
  color: #5e5e5e;
}
.input__button.active{
  background: #000;
  color: #fff;
}

@media (max-width: 600px){
  .input{
    flex-direction: column;
  }
  .input__group{
    padding: 8px 8px;
  }
  .usage{
    z-index: 100;
  }
}