*, ::after, ::before {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   user-select: none;
}

body {
   display: grid;
   width: 100%;
   min-height: 100vh;
   font-family: 'Hind Madurai', sans-serif;
   font-size: 18px;
   grid-template-rows: 50px 1fr;
   background-color: #eee;
}

#tutorial_controls { 
   padding: 10px; 
}
#tutorial_controls > button { padding: 5px 10px; cursor: pointer; }
#btn_resume_tutorial { display: none; }

.container { 
   display: grid;
   grid-template-areas: 
      ". . . . ."
      ". . . . ."
      ". . . . ."
      ". . . . ."
      ". . . . .";
   gap: 25px;
   place-items: center;
   padding: 15px;
   position: relative;
   width: 100%;
   height: 100%;
}
.content {
   /* max-width: 300px; */
   /* position: absolute; */
   background-color: #fff;
   padding: 10px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.bg-tutorial {
   position: absolute;
   width: 100%;
   height: 100%;
   user-select: none;
   display: none;
}

.box {
   display: flex;
   position: absolute;
   box-sizing: border-box;
   box-shadow: 0 0 0 2000px rgb(0 0 0 / 40%);
   padding: 5px;
   border: 2px solid rgba(119, 255, 51, 0.6);
   border-radius: 4px;
}

.instructions {
   background-color:  #ddffcc;
   font-family: 'Indie Flower', cursive;
   font-size: 25px;
   font-weight: 800;
   padding: 10px;
   position: absolute;
   place-self: center;
   box-shadow: 
      0 0 0 0.5px rgba(0,0,0,0.3),
      0 0 0 2px #ddffcc, 
      0 0 0 2.5px rgba(0,0,0,0.3),
      0 0 0 6px #ddffcc;
   max-width: 350px;
   display: grid;
   grid-template-columns: 1fr 30px;
}

.instructions > :is(.title, .close) { font-size: 30px; }
.instructions > .text { grid-column: -1/1; }

.instructions > .close { text-align: center; }
.instructions > .next { justify-self: end; grid-column: -1/1; }

.instructions > :is(.close:hover, .next:hover) { color: grey; cursor: pointer; }

.instructions > span { position: absolute; }
.instructions > span::after {
   content: '';
   clip-path: polygon(100% 100%, 100% 0, 0 50%);
   height: 25px;
   width: 25px;
   background: #ddffcc;
   position: absolute;
}


.instructions > span.up { 
   filter: 
      drop-shadow(0 -1px 0px rgba(0,0,0,0.3)) 
      drop-shadow(0 -6px 0px #ddffcc);
}
.instructions > span.up::after {
   transform: rotateZ(90deg);
   /* margin-top: -34.5px; */
   margin-top: -24.5px;
}


.instructions > span.down { 
   top: 100%;
   filter: 
      drop-shadow(0 1px 0px rgba(0,0,0,0.3)) 
      drop-shadow(0 6px 0px #ddffcc);
}
.instructions > span.down::after {
   transform: rotateZ(270deg);
}


.instructions > span.left { 
   filter: 
      drop-shadow(-1px 0 0px rgba(0,0,0,0.3)) 
      drop-shadow(-6px 0 0px #ddffcc);
}
.instructions > span.left::after {
   /* margin-left: -34.5px; */
   margin-left: -24.5px;
}


.instructions > span.right { 
   left: 100%;
   filter: 
      drop-shadow(1px 0 0px rgba(0,0,0,0.3)) 
      drop-shadow(5.5px 0 0px #ddffcc);
}
.instructions > span.right::after {
   transform: rotateZ(180deg);
}

.instructions[data-dir_y="up"][data-dir_x="right"] > span { right: 30px; }
.instructions[data-dir_y="up"][data-dir_x="left"] > span.left { top: 10px; }
.instructions[data-dir_y="down"][data-dir_x="right"] > span { bottom: 30px; }
.instructions[data-dir_y="down"][data-dir_x="right"] > span.down { right: 30px; }
.instructions[data-dir_y="down"][data-dir_x="left"] > span { bottom: 30px; } 

/* 
.instructions[data-dir_x="right"][data-dir_y="down"] > span { bottom: 10px; }
.instructions[data-dir_x="right"][data-dir_y="up"] > span { bottom: 10px; }

.instructions[data-dir_x="left"][data-dir_y="down"] > span { bottom: 10px; }
.instructions[data-dir_x="left"][data-dir_y="up"] > span { bottom: 10px; }
*/