@font-face {
  font-family: 'Fonseca';
  src: url('fonts/Fonseca-Regular.otf') format("opentype");
}

html {
  height: -webkit-fill-available;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  background-image: url('images/redwoods.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom;
  font-family: 'Fonseca';
  min-height: 100vh;
  min-height: -webkit-fill-available;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

#game-over {
  z-index: 1;
  position: fixed;
  padding: 0;
  height: 100vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

#game-over-text {
  text-align: center;
  -webkit-text-stroke: 0.3vh rgb(34, 1, 2);
  /* text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); */
  font-size: 10vh;

  background: #FCCC2B;
  background: linear-gradient(to top, #FCCC2B 0%, #FE6A4D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#tree {
  height: 80vh;
  position: fixed;
  bottom: -1.5vh;
  left: 50%;
  transform: translateX(-50%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}

#puzzle-word {
  z-index: 1;
  position: fixed;
  bottom: 15vh;
  height: 10vh;
  padding: 0;
  display: flex;
  align-items: center;
  left: 50%;
  transform: translateX(-50%) scale(80%);
}

.puzzle-word-letter {
  font-size: 5.5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7vh;
  width: 7vh;
  margin: 3vw;
  background-image: url('images/word_token.png');
  background-size: cover;
  color: #FFFCC7;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

#puzzle-letters {
  z-index: 1;
  position: fixed;
  bottom: 55vh;
  height: 10vh;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
  color: #3B3B3B;
}

#menu {
  position: fixed;
  bottom: 0.5vh;
  height: 10vh;
  width: 80%;
  padding: 0;
  left: 50%;
  transform: translateX(-50%);
}

#error {
  font-size: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7vh;
  bottom: 25vh;
  width: 100%;
  color: #FFFCC7;
  position: fixed;
  color: rgb(227, 92, 96);
  -webkit-text-stroke: 0.1vh rgb(108, 0, 0);
  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

#undo {
  background-image: url('images/undo.png');
  background-size: cover;
  width: 5rem;
  height: 5rem;
  cursor: pointer;
  background-color: transparent;
  border: transparent;
  padding: 0;

  font-size: .8rem;
  font-weight: bold;
  color: #3B3B3B;

  transition: all 0.2s;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-tap-highlight-color: transparent;

}

#undo:active {
  transform: scale(0.9);
  transition: all 0.1s;
}

.puzzle-free-letter-wrapper {
  height: 9vh;
  width: 9vh;
  margin: 1vw;
}

.puzzle-free-letter {
  z-index: 10;
  font-size: 5vh;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 9vh;
  width: 9vh;
  background-image: url('images/letter_token.png');
  background-size: cover;
  cursor: pointer;
}

.puzzle-free-letter-nudge {
  position: relative;
  bottom: 0.5vh;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#info {
  font-size: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7vh;
  top: 3vh;
  width: 100%;
  color: #FFFCC7;
  position: fixed;
  color: rgb(255, 245, 207);
  -webkit-text-stroke: 0.05vh rgb(155, 145, 107);
  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

#howto {
  font-size: 0.8rem;
  display: flex;
  text-align: center;
  justify-content: center;
  top: 9vh;
  width: 90vw;
  color: #FFFCC7;
  position: fixed;
  color: rgb(255, 245, 207);

  border-radius: 25px;
  background: #0003;
  padding: 2vw;

  left: 50%;
  transform: translateX(-50%);
}