body {
  background-color: #deceb8;
  padding:0px;
  margin:0px;
  text-align:center;
  user-select: none;
}
.bigDiv {
  display: inline-block;
  text-align: center;
  /* height: 100vh; */
  background-color: antiquewhite;
  padding: 30px;
}
.letterName {
  font-size:30px
}

.letter {
  cursor:move;
  padding:2px;
  margin:1px;
  border:1px solid rgba(0,0,0,0.1);
  text-align:center;
  font-weight:200;
  font-size:24px;
}
@media (min-height:450px) {
  .letter {
    font-size:12px;
  }
}
@media (min-height:500px) {
  .letter {
    font-size:16px;
  }
}
@media (min-height:600px) {
  .letter {
    font-size:20px;
  }
}
@media (min-height:650px) {
  .letter {
    font-size:26px;
  }
}
@media (min-height:700px) {
  .letter {
    font-size:28px;
  }
}
@media (min-height:800px) {
  .letter {
    font-size:32px;
  }
}
@media (min-height:900px) {
  .letter {
    font-size:34px;
  }
}

.spacer {
  margin-top:30px;
}
.writeHere.empty:before {
  content: 'גרור לכאן את האותיות';
  color: #555;
  position: absolute;
  left: 50%;
  top:5px;
  transform: translateX(-50%);
}

.answer {

  margin-top:5px;  
  background-color: white;
  border:1px solid gray;
  text-align:left;
  padding:5px 0px 10px 10px;
  position: relative;
  width: 100%;
  /* text-align:right; */
}
.writeHere {

  margin-top:5px;  
  background-color: white;
  border:1px solid gray;
  position: relative;
  height:40px;
  width: 100%;
  /* text-align:right; */
}

#trash {
  background-color:#ff7777;
  padding:5px 10px;
  font-size:16px;
  font-weight: 100;
  font-family: Alef;
  border:1px solid red;
}

@media print {
  .noprint {
    display:none!important
  }
  body {
    background-color: transparent!important;
  }
  .bigDiv {
    background-color: transparent!important;
    padding:0px;
    height: unset;
  }
  .letter {
    font-size: 16px;
  }
}