*, *::after, *::before {

  box-sizing: border-box;

  font-family: Arial;

}

.help{
	position: absolute;
	right:1em;
	top:1em;
}

body {

  background-color: hsl(240, 100%, 100%);

  display: flex;

  flex-direction: column;

  min-height: 100vh;

  margin: 0;

  padding: 1em;

  font-size: clamp(.5rem, 2.0vmin, 1.5rem);

}

#logo{

	width:20em;

	margin: auto;
	text-align: center;
}

.keyboard {

  display: grid;

  grid-template-columns: repeat(20, minmax(auto, 1.25em));

  grid-auto-rows: 3em;

  gap: .25em;

  justify-content: center;

}



.key {

  font-size: inherit;

  grid-column: span 2;

  border: none;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: hsl(

    var(--hue, 200),

    var(--saturation, 1%),

    calc(var(--lightness-offset, 0%) + var(--lightness, 51%))

  );

  color: white;

  fill: white;

  text-transform: uppercase;

  border-radius: .25em;

  cursor: pointer;

  user-select: none;

}



.key.large {

  grid-column: span 3;

}



.key > svg {

  width: 1.75em;

  height: 1.75em;

}



.key:hover, .key:focus {

  --lightness-offset: 10%;

}



.key.wrong {

  --hue: 208;

  --saturation: 18%;

  --lightness: 27%;

}



.key.wrong-location {

  --hue: 65;

  --saturation: 70%;

  --lightness: 55%;

}



.key.correct {

  --hue: 120;

  --saturation: 75%;

  --lightness: 50%;

}

#contentHolder{

	width:30em;

	margin: auto;

}

.guess-grid {

  display: grid;

  justify-content: center;

  align-content: center;

  flex-grow: 1;

  grid-template-columns: repeat(5, 4em);

  grid-template-rows: repeat(6, 4em);

  gap: .25em;

  margin-bottom: 1em;

}

.guess-grid1 {

  display: grid;

  justify-content: center;

  align-content: center;

  flex-grow: 1;

  grid-template-columns: repeat(5, 4em);

  /*grid-template-rows: repeat(6, 4em);*/

  gap: .25em;

  margin-bottom: 1em;

}



.tile {

  font-size: 2em;

  color: black;

  border: .05em solid hsl(240, 2%, 23%);

  text-transform: uppercase;

  font-weight: bold;

  display: flex;

  justify-content: center;

  align-items: center;

  user-select: none;

  transition: transform 250ms linear;

}



.tile[data-state="active"] {

  border-color: hsl(200, 1%, 34%);

}



.tile[data-state="wrong"] {

  border: none;

  background-color: hsl(208, 18%, 27%);

}



.tile[data-state="wrong-location"] {

  border: none;

  background-color: hsl(65, 70%, 55%);

}



.tile[data-state="correct"] {

  border: none;

  background-color: hsl(120, 75%, 50%);

}



.tile.shake {

  animation: shake 250ms ease-in-out;

}



.tile.dance {

  animation: dance 500ms ease-in-out;

}



.tile.flip {

  transform: rotateX(90deg);

}



@keyframes shake {

  10% {

    transform: translateX(-5%);

  }



  30% {

    transform: translateX(5%);

  }



  50% {

    transform: translateX(-7.5%);

  }



  70% {

    transform: translateX(7.5%);

  }



  90% {

    transform: translateX(-5%);

  }



  100% {

    transform: translateX(0);

  }

}



@keyframes dance {

  20% {

    transform: translateY(-50%);

  }  



  40% {

    transform: translateY(5%);

  }  



  60% {

    transform: translateY(-25%);

  }  



  80% {

    transform: translateY(2.5%);

  }  



  90% {

    transform: translateY(-5%);

  }  



  100% {

    transform: translateY(0);

  }

}



.alert-container {

  position: fixed;

  top: 15vh;

  left: 50vw;

  transform: translateX(-50%);

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.alert {

  pointer-events: none;

  background-color: hsl(204, 7%, 85%);

  padding: .75em;

  border-radius: .25em;

  opacity: 1;

  transition: opacity 500ms ease-in-out;

  margin-bottom: .5em;

}



.alert:last-child {

  margin-bottom: 0;

}



.alert.hide {

  opacity: 0;

}