@import"https://fonts.googleapis.com/css?family=Press+Start+2P";body{margin:0;font-family:"Press Start 2P",cursive;font-size:2em;color:#fff}button{outline:none;cursor:pointer;border:none;box-shadow:3px 5px 0px 0px rgba(0,0,0,.75)}#counter{position:absolute;top:20px;right:20px}#end{position:absolute;min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;visibility:hidden}#end button{background-color:red;padding:20px 50px 20px 50px;font-family:inherit;font-size:inherit}#controlls{position:absolute;min-width:100%;min-height:100%;display:flex;align-items:flex-end;justify-content:center}#controlls div#directions{display:grid;grid-template-columns:50px 50px 50px;grid-template-rows:auto auto;grid-column-gap:10px;grid-row-gap:10px;margin-bottom:20px;margin-right:20px}#controlls div#actions{font-family:"Press Start 2P",cursive;display:grid;grid-template-columns:50px;grid-template-rows:auto auto;grid-column-gap:10px;grid-row-gap:10px;margin-bottom:20px;margin-right:20px}#controlls button{width:100%;background-color:#fff;border:1px solid #d3d3d3}#controlls button:first-of-type{grid-column:1/-1}#dialog{position:absolute;min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;visibility:hidden}#dialog button{background-color:orange;padding:20px 50px 20px 50px;font-family:inherit;font-size:1rem}.dialog{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);max-width:400px;padding:40px;filter:drop-shadow(5px 5px 0 rgba(52, 70, 69, 0.567));color:#fff;font-weight:bold;border-image:url("../images/background-sprite.png");border-image-slice:34 fill;border-image-width:40px;border-image-repeat:repeat}.dialog p#text_dialog{font-weight:normal;font-size:medium}.dialog::backdrop{background:rgba(52,70,69,.567)}.dialog[open]{animation:show .5s ease normal}.dialog:not([open]){animation:show .5s ease normal;animation-direction:reverse}.dialog.modal-backdrop{animation:show .5s ease normal;animation-direction:reverse}@keyframes show{from{transform:translateY(110%)}to{transform:translateY(0%)}}.dialog button{background-color:#2d4341;outline:3px solid #000;border-top:2px solid rgba(85,151,148,.567);line-height:24px;color:#ffde4c;cursor:pointer;font-weight:bold;border:rgba(0,0,0,0)}.splash{cursor:pointer;position:fixed;top:50%;left:50%;height:95%;width:95%;transform:translate(-50%, -50%);background-color:#000;transition:all ease-in-out 600ms;border-image:url("../images/background-sprite.png");border-image-slice:34 fill;border-image-width:40px;border-image-repeat:repeat}.hide-splash{transition:.5s;display:none}.splash-header{height:90%;color:#fff;font-size:30px;display:grid;justify-content:center;align-items:center;text-align:center;padding:20px;grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr;gap:0px 0px;grid-auto-flow:row;grid-template-areas:"welcome" "presentation" "start-button"}.splash-header .welcome{grid-area:welcome;font-size:large;margin-bottom:10px}.splash-header .presentation{grid-area:presentation;font-size:medium;margin-bottom:10px}.splash-header .press-start{grid-area:start-button;display:inline-block;padding:10px 20px;background:#fc0;color:#000;border-radius:5px;text-decoration:none;font-size:14px;animation:blink 1s infinite}@keyframes blink{50%{opacity:0}}@media(max-width: 600px){.splash-screen{width:80%}}