body {
  background: #222;
  color: #fff;
  position: relative;
  text-align: center;
  font-size: 1rem;
  font-family: 'Tajawal';
  padding-bottom: 3em;
}

.page-wrap {
  display: inline-block;
  margin: 2em auto;
}

.controls__input {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  font-size: 1em;
  padding-bottom: .5em;
  border-bottom: 2px solid #ccc;
  text-align: center;
  outline: none;
  color: #fff;
}

.controls__btn {
  background: dodgerblue;
  color: #fff;
  border: none;
  font-size: 1em;
}

.controls__label {
  display: block;
  font-size: .8em;
  padding-top: .3em;
  margin-bottom: 2em;
}

canvas {
  background-color: #eee;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

canvas.show {
  opacity: 1;
}

.canvas-wrap {
  margin-top: 50px;
  position: relative;
}

#canvasID {
  z-index: 9999;
}

#logo {
  height: 200;
}

#imageCanvas {
  display: block;
  border: solid 1.5px #6c757d;
  max-height: 600px;
}

#small-input {
  display: none;
}

@media only screen and (max-width: 750px) {

  #imageCanvas {
    max-height: 350px;
  }

  #logo {
    height: 120px;
  }

  #header-text {
    font-size: 20px;
  }

}

@media only screen and (max-width: 350px) {

  #imageCanvas {
    display: none;
  }

  #header-text {
    font-size: medium;
  }

  #small-input {
    display: block;
  }

  #main-input {
    display: none;
  }

}

/*# sourceMappingURL=style.css.map */