/*
	Typography mixin
 */
/* CSS Document */
#container {
  background-color: #afdff9;
  font-family: twinkl, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  user-select: none;
}

.foreground-container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 103;
  position: absolute;
  pointer-events: none;
}

:focus {
  outline: none;
}

.border-radius {
  border-radius: 8px;
}

.text-button.play {
  width: 40%;
  line-height: 1.15;
  padding: 2.5% 1.5% 2.5% 1.5%;
  font-size: 2vw;
  border: none;
}

#lets-go-button {
  width: 20%;
  font-size: 3vw;
  height: 12%;
  padding: 0.6%;
}

.fit-me-button {
  height: 100%;
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title-text {
  font-size: 14vw;
  width: 50%;
  left: 25%;
  height: 40%;
  margin-top: 5%;
  top: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
}

#titlePage {
  width: 100%;
  height: 100%;
}

#subContainer {
  position: absolute;
  height: auto;
  top: 55%;
  width: 100%;
  color: white;
  padding: 1%;
  font-weight: 600;
  font-size: 3vw;
  user-select: none;
}

.jodal .jodal-title {
  font-size: 5vw;
  margin: 0 auto;
}
.jodal .jodal-text {
  font-size: 2.6vw;
}
.jodal .answer-text {
  text-align: center;
  z-index: 100;
  width: 90%;
  height: 15%;
  margin: 0 auto;
  margin-bottom: 5%;
}
.jodal .jodal-sub-text {
  font-size: 2.6vw;
}

.crosswordDisplay {
  top: 5rem;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.clueBlock {
  position: relative;
  margin-bottom: 5em;
}

.clueDirection {
  text-align: left;
  margin: 1em 0 0.25em 122px;
  font-size: 1.5em;
  font-weight: bold;
  color: #000;
}

.word, .clue, .lineNum {
  display: inline-block;
  height: 1.4em;
  padding: 0 5px;
}

.word {
  text-align: right;
  width: 100px;
  margin: 0 20px 0 0;
}

.clue {
  width: 500px;
  margin: 0 0 4px 0;
}

.lineNum {
  font: 1em calibri;
  line-height: 1.8em;
}

.clueReadOnly {
  border-color: rgba(0, 0, 0, 0);
  margin: 0;
  outline: 0;
  color: #303030;
  background: none;
}

.crossword {
  display: block;
  height: auto;
  width: max-content;
  position: absolute;
}

.square {
  margin: 0 4px 4px 0;
  display: inline-block;
  position: relative;
  font-size: 24px;
  min-width: 3em;
  width: 3em;
  height: 3em;
  line-height: 3em;
  vertical-align: top;
  font-family: twinkl, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

.char:focus {
  -webkit-box-shadow: 0 0 0 2px rgb(0, 133, 180);
  -moz-box-shadow: 0 0 0 2px rgb(0, 133, 180);
  box-shadow: inset 0 0 0 2px rgb(0, 133, 180);
}

.char {
  border: 4px solid #5F283B;
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  outline: 0;
  padding: 0;
  width: 3em;
  height: 3em;
  text-align: center;
  background-color: white;
  font-family: twinkl, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif" !important;
}

.charReadOnly:focus {
  -webkit-box-shadow: 0 !important;
  -moz-box-shadow: 0 !important;
  box-shadow: 0 !important;
  border-color: rgba(0, 0, 0, 0);
  margin: 0;
  outline: 0;
  color: #303030;
}

.num {
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  color: rgb(0, 0, 0);
  font-size: 0.5em;
  line-height: 1em;
  pointer-events: none;
}

.hide {
  visibility: hidden;
}

.disabled {
  display: none !important;
}

.btn:hover {
  cursor: pointer;
  background-color: rgb(150, 150, 150);
}

#btnCheck {
  position: absolute;
  right: 2rem;
  cursor: pointer;
}

#btnReset {
  position: absolute;
  left: 2rem;
  top: 1rem;
  cursor: pointer;
}

.row {
  display: flex;
  flex-direction: row;
}

#keyboard .row {
  margin: 1% auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#keyboard .row div:last-of-type {
  margin: unset;
}

.containment-restrain {
  pointer-events: none;
}

.mystyle {
  border: 4px solid #e94e14;
  background-color: white !important;
  opacity: 1 !important;
}

.temp-hide {
  opacity: 0.6;
}

.clue-box {
  width: 35%;
  height: 35%;
  background-color: white;
  position: absolute;
  z-index: 10000;
  border-radius: 12px;
  padding: 1.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.33);
  z-index: 10000000001;
}

.text-clue-text {
  font-size: x-large;
  margin: 4% 0;
}

.text-only {
  height: auto;
  width: auto;
  max-width: 30%;
}

.image-only {
  width: 25%;
}

#mainPanel {
  transition: transform 0.5s ease 0s;
}

.main-content {
  justify-content: center !important;
}

.long-button-out {
  outline: 4px solid #E4DBCF !important;
}

.clue-box-text-only {
  height: 20%;
}

#keyBoard {
  backdrop-filter: blur(20px);
  position: absolute;
  z-index: 10000;
  bottom: 1rem;
  align-self: center;
  background: #5F283B !important;
}
#keyBoard svg {
  fill: white;
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.29)) !important;
}

.close-con-small {
  transition: transform 0.3s ease-in-out;
  color: #5F283B;
  font-size: xx-large;
  outline: 4px solid #E4DBCF !important;
  position: absolute;
  top: -80px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
  background: #FAFAF8 !important;
  text-align: center;
  line-height: 0;
  font-weight: bolder;
}
.close-con-small:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.check-button-cont {
  position: absolute !important;
  bottom: 0;
  right: 0;
}

.button-panel-left {
  width: 10% !important;
  left: 0;
}

.check-button {
  box-shadow: 3px 4px 11px -3px rgba(0, 0, 0, 0.78);
}
.check-button .long-button {
  top: 0;
  position: absolute;
}

#btnCheck {
  position: absolute;
  z-index: 1000;
  bottom: 1rem;
}

.clue-image-box {
  width: 100%;
  height: 70%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#keyboard {
  background: #FAFAF8 !important;
  height: 44%;
  outline: 4px solid #E4DBCF;
  width: 100%;
  margin: auto;
  border-radius: 12px 12px 0 0;
  z-index: 30000;
  font-size: 1.5rem;
  bottom: 0;
}

.keyboard-cont {
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 45%;
}

:host {
  height: var(--keyboard-height);
}

#keyboard {
  position: absolute;
  user-select: none;
  padding: 1%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#keyboard .long-button-out {
  scale: 0.9;
}
#keyboard .row {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 30%;
  max-height: 33%;
  justify-content: center;
  width: 100%;
  margin: 1% 0;
  flex-wrap: nowrap !important;
  /* https://stackoverflow.com/questions/46167604/ios-html-disable-double-tap-to-zoom */
}

#keyboard .row .key-item {
  font-family: inherit;
  font-weight: bold;
  font-size: larger;
  border: 0;
  padding: 1%;
  margin: 0.7%;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  background: #5F283B !important;
  height: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
  position: relative;
  outline: 5px solid #E4DBCF;
}
#keyboard .row .key-item .inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.key-item {
  transition: transform 0.3s ease-in-out;
}
.key-item:hover {
  transform: scale(1.05);
}

.zoom-icon {
  margin: 15% 6% 15% 15%;
}

.unlock-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.3s all ease-in-out;
  border: unset !important;
  outline: 4px solid #E4DBCF !important;
  box-shadow: 3px 3px 8px -3px rgba(0, 0, 0, 0.78);
  margin: 9% auto 4% auto !important;
}

.back-button {
  font-size: xxx-large !important;
  font-weight: 600;
  margin: 0.5%;
}

#keyboard .row div:focus {
  outline: none;
}

#keyboard .row div.fade {
  transition: background-color 0.1s ease, color 0.1s ease;
}

#keyboard .row div:last-of-type {
  margin: 0;
}

.half {
  flex: 0.5;
}

.one {
  flex: 1;
}

.one-and-a-half {
  flex: 1.5;
  font-size: 12px;
}

.two {
  flex: 2;
}

.green-correct {
  border-color: #7BC143;
}

#answerWasText {
  margin-top: 2%;
}

.bring-forward {
  z-index: 10000000000 !important;
}

.cork-image {
  pointer-events: none;
}

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