@import url("https://fonts.googleapis.com/css2?family=Italianno&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Caudex:ital@0;1&display=swap');

body,html{
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.drawingPad {
  width: 100%;
  height: 100%;
  font-family: Roboto;
  position: relative;
  
}
.drawingPad > * {
  z-index: 2;
  position: relative;
}
.drawingPad canvas {
  width: 100%;
  height: 100%;
  min-height: 370px;
}
.drawingPad canvas:hover {
  cursor: url("https://thegildedstory.com/drawpad/pen-nob-hover.png"), auto;
}
.drawingPad.isErasing canvas:hover {
  cursor: url("https://thegildedstory.com/drawpad/eraser.svg"), auto;
}
.entered_name_wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.display_name {
  font-family: "Italianno", cursive;
  font-weight: 500;
  font-size: calc(20px + 20vw);
  letter-spacing: calc(0.2rem + 1vw);
  text-align: center;
  line-height: 1;
  opacity: 0.1;
}
.drawingPad > .drawingPad_cta {
  position: absolute;
  left: 0;
  top: inherit;
  bottom: 0;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 24px 0.75rem;
}
.drawingPad > .drawingPad_cta .drawingPad_cta_col {
  padding: 0 6px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}
.drawingPad > .drawingPad_cta .icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 15px;
  vertical-align: top;
  margin-right: 0.3rem;
  cursor: pointer;
}
.drawingPad > .drawingPad_cta .text {
  display: inline-block;
  height: 18px;
  line-height: 18px;
  cursor: pointer;
}
.drawingPad > .drawingPad_cta .icon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.drawingPad_title {
  font-size: 36px;
  text-align: center;
  color: #9fc3cd;
  padding: 1rem 0;
  text-align: center;
  font-family: 'Caudex', serif;
}
.drawingPad_input {
  text-align: center;
}
.drawingPad_input > input {
  width: 100%;
  max-width: 200px;
  height: 40px;
  padding: 0 1rem;
  border: 1px solid #b3d1d9;
  background-color: #b3d1d9;
  text-align: center;
}
.slidecontainer {
  width: 100%;
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 6px;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #9fc3cd;
  cursor: pointer;
  border-radius: 50%;
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #9fc3cd;
  cursor: pointer;
  border-radius: 50%;
}
.drawingPad.isErasing > .drawingPad_cta .drawingPad_cta_col > * {
  opacity: 0.5;
  pointer-events: none;
}
.drawingPad.isErasing
  > .drawingPad_cta
  .drawingPad_cta_col
  > #eraserButton {
  opacity: 1;
  pointer-events: all;
}


@media (max-width: 620px) {

.drawingPad > .drawingPad_cta .text{
  display:none !important
}

}