::selection {
   background: transparent;
}
* {
    -webkit-tap-highlight-color: transparent;
}
body {
   background-color: rgb(25, 34, 44);
   overflow-x: hidden;
   font-family: "Lato", serif;
}
.grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(5, 1fr);
   max-width: 70vh;
   margin: 6px auto;
   cursor: pointer;
   background-color: white;
   transition:0.3s;
}
.grid-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   pointer-events: none;
   background-color: white;
   box-shadow: 0 0 64px rgba(255,255,255,0.1);
   transition:0.3s;
}
dialog {
   box-shadow: 0 0 32px rgba(0,0,0,0.5);
   border-radius: 1em;
   border: none;
   padding: 24px;
   width: 85%;
   max-width: 640px;

}
dialog h2 {
   color: black;
}
::backdrop {
   background-image: linear-gradient(
     0deg,
     red,
     yellow,
     green,
     blue
   );
   opacity: 0.75;
}
button {
   padding: 16px 18px;
   margin: 0 6px;
   border-radius: 2px;
   border: none;
   cursor: pointer;
   background-color: rgb(168, 179, 190);  
   font-family: "Lato", serif;
}
button:hover {
   background-color: rgb(192, 207, 207);
}
button:active {
   background-color: white;
}
dialog>button {
   width: 100%;
}
.hl>img {
   animation-name: clickflash;
   animation-duration: 0.5s;
}
@keyframes clickflash {
   from {opacity: 75%;}
   to {opacity: 100%;}
}
h1,h2 {
   color: white;
   font-family: "Geo", sans-serif;
   margin: 4px;
   text-align: center;
}
h1 {
   font-size:48px;   
}
#puzzle-list {
   padding: 10px 18px;
   font-family: "Lato",serif;
   font-size: 16px;
   border-radius: 2px;
}

.heading-section {
   display:inline-flex;
   margin: auto;
   justify-content: center;
   width: 100%;
   color:white;
}
.heading-section img {
   width: 42px;
   height: 42px;
}
.clickBox {
   position:fixed;
   top:4px;
   left:4px;
   text-align: center;
   background-color: rgb(85, 83, 102);
   color: lightgrey;
   font-size: 12px;
   padding: 6px;
   border-radius: 6px;
}
.clickBox p {
   margin: 2px
}
#click-count {
   font-size:18px;
}
span p {
   margin: 0.25em;
}
.scores {
   color: white;
}
.winAnimate {
   animation-name: winGrow;
   animation-duration: 0.75s;
   animation-timing-function: ease-in-out;
}
.hide-background {
   transition:0.3s;
   background-color: transparent;
}
@keyframes winGrow {
   0% {
       transform: scale(1);
   }
   40% {
       transform: scale(0.85);
   }
   100% {
      transform: scale(1);
  }
}
#ios-wont-prefetch img {
 width:1px;
 height:1px;
 opacity: 0.1;
}