*, *::after, *::before {
  box-sizing: border-box;
}

html, body{ 
  height: 100%;
}

body { 
  margin: 0;
  font-family: Arial;
}

header { 
  width: 100%;
  display: flex;
  color: #fff;
  font-size: 2em;
  padding: 0.25em 1em;
  border-bottom: 0.05em solid hsl(200, 2%, 23%);
  box-shadow: 1px 0px 5px 1px hsl(250, 2%, 23%);
  align-items: center;
}

button { 
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
}

.help, .close { 
  color: hsl(200, 1%, 51%);
  font-size: 0.6em;
}

.close { 
  font-size: 1.4em;
  float: right;
}

:is(.help, .close):hover { 
  color: #fff;
}

.instructions {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 0.25em;
  background-color: hsl(240, 3%, 13%);
  border: 0.05em solid hsl(200, 1%, 51%);
  padding:1em;
  transition: top 1s ease-in-out;
  color: #fff;
  font-size: 0.8em;
}

.instructions.open { 
  top: 50%;
}

.instructions h4 { 
  text-align: center;
}

.example {
  display: grid;
  grid-template-columns: repeat(5, 3em);
  grid-auto-rows: 3em;
  grid-gap: 0.25em;
}

.help, .title { 
  margin-left: auto;
}

.title span:nth-child(2) {
  color:hsl(115, 29%, 43%);
}

.title span:nth-child(4) {
  color: hsl(49, 51%, 47%)
}

.result { 
  opacity: 0;
  position: absolute;
  padding: .5em 1em;
  border-radius: 0.25em;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 2em;
  color: #fff;
  transition: opacity ease-in 500ms;
  user-select: none;
  box-shadow: 0 0 8px 8px rgb(0 0 0 / 20%)
}

.container { 
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: hsl(240, 3%, 7%);
  font-size: clamp(.5rem, 2.5vmin, 1.5rem);
  align-items: center;
}

.keyboard { 
  display: grid;
  grid-template-columns: repeat(20,minmax(auto, 1.5em));
  grid-auto-rows: 3em;
  grid-gap: 0.25em;
  margin: 0 1em 3em 1em;
}

.key { 
  font-size: inherit;
  grid-column: span 2;
  color: #fff;
  border: none;
  user-select: none;
  border-radius: 0.25em;
  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%))
  );
}

.key.wrong { 
  --lightness: 23%;
}

.key.wrong-location { 
  --hue: 49;
  --saturation: 51%;
  --lightness: 47%; 
}

.key.correct { 
  --hue: 115;
  --saturation: 29%;
  --lightness: 43%; 
}

.key:hover, .key:focus { 
  --lightness-offset: 10%;
}

.key svg { 
  fill: #fff;
  width: 1.2em;
  height: 1.2em;
}

.key[data-key="A"] { 
  grid-column: 2 / 4 ;
}

.key[data-enter] { 
  grid-column: 1 / 5; 
}

.guess-grid {
  display: grid;
  grid-template-columns: repeat(5, 4em);
  grid-auto-rows: 4em;
  grid-gap: 0.25em;
  justify-content: center;
  align-content: center;
  flex-grow: 1;
  margin: 2em 0;
 }

 .tile { 
  border: 0.05em solid hsl(240, 2%, 23%);
  color: #fff;
  font-size: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
  user-select: none;
  transition: transform 250ms linear;
 }

 .tile[data-state='active'] { 
  border-color: hsl(200, 1%, 34%);
 }
 
.tile[data-state='wrong'] { 
 background-color: hsl(200, 2%, 23%);
 border: none;
}

.tile[data-state='wrong-location']{ 
  background-color: hsl(49, 51%, 47%);
  border: none;
}

 .tile[data-state='correct'] { 
  background-color: hsl(115, 29%, 43%);
  border: none;
 }

 .tile.shake { 
   animation: shake 500ms ease-in-out;
 }

 .tile.flip { 
    transform: rotateX(90deg);
 }

 .tile.dance { 
   animation: dance 500ms ease-in-out;
 }

 @keyframes shake { 
   10% { 
     transform: translateX(-5%)
   }

   30% { 
    transform: translateX(5%)
  }

  50% { 
    transform: translateX(-7.5%)
  }

  70% { 
    transform: translateX(7.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)
 }
}

@media only screen and (max-width: 480px) { 
  .guess-grid { 
    grid-auto-rows: 6em;
    grid-template-columns: repeat(5, 6em);
  }

  .instructions { 
    width: 80vw;
    font-size: 1.2em;
  }
}