* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background-color: rgb(67, 65, 88);
}

.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

.map {
  height: 400px;
  width: 800px;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.map_tile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 10px;
  color: transparent;
  transition:0.5s;
  cursor: pointer;
}

.map_cover {
  margin-top: -400px;
  height: 400px;
  width: 800px;
  z-index: 1;
  pointer-events: none;
}

.sprite_container {
  position: relative;
  width: 40px;
  height: 40px;
  transition: 0.3s;
  overflow: hidden;
}

.sprite  {
  position: absolute;
  height: 40px;
  width: 420px;
}

.bone {
  position: relative;
  height: 100%;
  width: 100%;
  animation: throw forwards 0.3s;
}

@keyframes throw {
  0% { top: 100vh; transform: rotate(-200deg);}
  60% { top: -20vh; transform: rotate(0);}
  80% {transform: rotate(500deg); }
  90% {top: -10px; transform: rotate(255deg); }
  100% {top: 0; transform: rotate(360deg);}
}

.start { background-color: rgb(91, 248, 156); }

.wall { 
  background-color: rgb(17, 2, 83); 
  cursor: auto;
}

.node { background-color: rgb(196, 245, 250); }

.path { background-color: rgb(33, 233, 139); }


/* used for debugging and refining algorithm */
/* .sub_node { background-color: rgb(196, 255, 247); }

.sub_node.node{ background-color: rgb(156, 253, 240); }

.sub_node.node.path{ background-color: rgb(33, 233, 139); } */

.sign {
  position: absolute;
  color: white;
  bottom: 10px;
  right: 10px;
  font-size: 10px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.instruction {
  width: 100%;
  max-width: 800px;
  margin: 10px 0 0 0;
  font-size: 15px;
  color: white;
  opacity: 1;
  transition: 1s;
}

.instruction.hide {
  opacity: 0;
}