body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  color:#444;
  font-size:15px;
  margin:0;
  padding:0;
  background: #CBEEFF;
  background: linear-gradient(180deg,rgba(203, 238, 255, 1) 50%, rgba(245,   253, 255, 1) 100%);
  background-attachment:fixed;
}

#gameContainer {
  position:relative;
  width:380px;
  margin:10px auto 0 auto;
}

#menu-container {
  position:relative;
  z-index:450;
}

#menu-title-container {
  position:absolute;
  top:0;
  width:380px;
}

.title {
  position:absolute;
  z-index:500;
  text-align:center;
  width:380px;
  font-family: "Fredoka", sans-serif;
  font-weight: 400;
  paint-order: stroke fill;
  font-size:40px;
  font-weight:900;
  text-transform:uppercase;
  color:white;
  background: linear-gradient(180deg,#0096EB 50%, #00B5F3 100%);
  text-align:center;
  -webkit-background-clip: text;
  -webkit-text-stroke: 12px transparent;  
  margin:0 0 0 0;
  padding:0;
}

h1 {
  font-size: 50px;
  font-family: "Bungee", system-ui;
  text-transform: uppercase;
  color:white; 
  font-weight:400;
  background: linear-gradient(180deg,#0096EB 50%, #00B5F3 100%);
  text-align:center;
  -webkit-background-clip: text;
  -webkit-text-stroke: 12px transparent;
}

#menu {
  padding:24px 14px 14px 14px;
  border-radius:8px;
  box-shadow:2px 2px 20px rgba(0,0,0,0.1);
  background:white;
  margin:28px 10px 10px 10px;
}

.menu-box {
  padding:12px 14px 14px 14px;
  border-radius:8px;
  box-shadow:2px 2px 20px rgba(0,0,0,0.1);
  background:white;
  margin-top:18px;
  margin:0 10px 20px 10px;
}

.copyright {
  text-align:center;
  margin-top: -12px;
  margin-bottom:4px;
  opacity:0.33 !important;
}

.copyright a {
  color:black;
  text-decoration:none;
}

.copyright a:hover {
  text-decoration: underline;
}

#matchbox {  
  width: 341px;
  clear:both;
  margin:12px 0 20px 10px;
  display: flex;
  align-items:center;
  font-size:20px;
}

#matchbox img {
  margin:0 5px;
  padding:4px;
  border-radius:6px;
}

#matchbox span {
  display:inline-block;
  font-weight:bold;
  margin-left:12px;
}

#matchbox img {
  height:48px;
  width:48px;
}

.small {font-size:90%}

p.menupad {margin-top:20px; margin-bottom:-6px}

.example img {
  width: 50px;
  height: 50px;
  background: radial-gradient(ellipse at center,  #ffffff 40%,#e5e5ea 100%);
  box-shadow:none;
  padding:8px;
  border-radius:8px;
  vertical-align:middle;
  display:block;
  border:2px solid transparent;
  margin-bottom:4px;
}

.example img:hover {
  border:2px solid dodgerblue;
  cursor:pointer;
}

.example .rainbow img:hover {
  border: 2px solid goldenrod;
  cursor: grab;
}

table.example {
  margin-top:8px;
}

.example td {
  text-align:center;
}

.example span, td.example {
  padding:8px;
  text-align:center;
  display:block;
  margin:0 auto;
  font-size:40px; 
  
}

.example span i {
  font-style:normal;
  font-size:24px;
  vertical-align:middle;
  display:inline-block;
  margin-top:-4px;
}

.answer {
  font-style:normal;
  font-weight:bold;
  font-size:23px !important;   
}

.tag {
  opacity:0.5;
  font-style:normal;
  display:block;
  text-transform:uppercase; 
  font-size:10.5px; 
  text-align:center;
}

#menu button {
  width:300px;
  font-family: "Fredoka", sans-serif;
  font-weight:600;
  font-size:28px;
  color:white;
  border-radius:30px;
  transition:all linear 0.2s;
  display:block;
  margin:18px auto 8px auto;
}

#game-one {
  background: linear-gradient(180deg,#0096EB 50%, #00B5F3 100%);
  border:2px solid #0096EB;
  box-shadow:2px 2px 10px rgba(0,0,100,0.25);
}

#game-two {
  background: linear-gradient(180deg,#ff6914 50%, #ffb41c 100%);
  border:2px solid #ff6914;
  box-shadow:2px 2px 10px rgba(200,100,0,0.25);
}

#game-three {
  background: linear-gradient(180deg,#333 50%, #888 100%);
  border:2px solid #222;
  box-shadow:2px 2px 10px rgba(200,100,0,0.25);
}

.record {
  font-family:"Inter";
  font-weight:200;
  font-size:13px;
  margin:0 0 4px 0;
}

#menu button:hover {
  cursor:pointer;
  transition:all linear 0.1s;
  /*transform: translate(1px, 1px);*/
  text-shadow:1px 1px 4px rgba(0,0,0,0.5);
  border:2px solid white;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
}

#successful-matches {
  position:absolute;
  top:20px;
  right:100px;
  display:none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0px;
  max-width: 380px;
  margin: 0 auto;
  justify-items: center;
}

#grid {
  padding-top:70px;
}

#audio-controls {
  height:1px;
  width:1px;
  overflow:hidden;
}

.unpaired {
  background:#fff;
  border-color:transparent;
  box-shadow:2px 2px 8px rgba(0,0,0,0.1)
}

.paired-once {
  background:rgba(255,255,255,0.33);
}

.grid span {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border: 2px solid transparent;
  padding:4px;
  border-radius:8px;
  transition: border-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .grid span:hover {
    border-color:#a3d1ff
  }
}

.grid img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: auto;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.selected {
  border: 2px solid dodgerblue !important;
}

.matched {
  border: 2px solid goldenrod !important;
  animation: matchedanim 1s 1;
  animation-fill-mode: forwards;
}

@keyframes matchedanim {
  100% {transform:rotate(360deg); opacity:0; border-color:rgba(255,255,255,0); }
}

.failed {
  border: 2px solid red;
  animation: redfade 1.5s 1;
}

@keyframes redfade {
  from {border-color:red; box-shadow:inset 0 0 50px rgba(255,0,0,0.5)}
  to {border-color:transparent; box-shadow:none}
}

.game-info {
  text-align: left;
  margin-top: 20px;
}

#successful-matches {
  margin-bottom: 20px;
  text-align: left;
}

#game-over {
  text-align: center;
  color: red;
  font-size: 2em;
  display: none;
}

#match-list {padding-left:18px}

#game-two.w1s {
  display:none;
}

.w1s, .w2s {display:none}
small.w1s, small.w2s, small.w3s {margin: 14px 0 -14px 0px;}

#gameContainer.w1 .w1s {display:block}
#gameContainer.w1 .w1h {display:none}
#gameContainer.w2 .w2s {display:block}
#gameContainer.w2 .w2h {display:none}
#gameContainer.w3 .w3s {display:block}
#gameContainer.w3 .w3h {display:none}

#foundwords {
  font-size:12px;
}

#foundwords h3 {
  font-size:20px;
  font-family: "Fredoka", sans-serif;
  font-weight:500;
  margin:0; padding:0;
  margin:0 0 2px 0; padding:0 0 2px 0;
  margin:-4px -6px 2px -6px;
  padding:4px 6px 2px 6px;  
  color:#0294E9;
}

#foundwords h3 span {
  font-size:14px; 
  font-weight:normal;
  float:right;
}

#timer {
  background:white;
  width:355px;
  margin:0 10px;
  height:20px;
  border-radius:20px;
  overflow:hidden;
  box-shadow: inset 1px 1px 12px #bbb, 1px 1px 7px #ddd;
  border:3px solid white;
  transition: opacity 3s ease;
  opacity: 1;
}

#timer.fade-out {
  opacity: 0;
}


#timerbar {
  background: linear-gradient(180deg, #00B5F3 50%, #0096EB 100%);
  width:100%;
  height:20px;
  border-radius:20px;
  transition:width 1s linear;
}

.no-mousey {
  pointer-events: none;
}

/* win dlg */
#game-over-dlg {
  text-align:center;
  font-size:16px;
  opacity: 0;
  position:absolute;
  top:30px;
  width:330px;
}

#game-over-dlg small {
  color:#999;
  display:block;
  margin-top:6px;
}

#game-over-dlg button {
  display:block;
  margin:12px auto 0;
}

#game-over-dlg.w1  span, #game-over-dlg.w2  span, #game-over-dlg.w3  span {
  font-size:28px;
  text-transform:uppercase;
  display:block;
  text-align:center;
  font-family: "Fredoka", sans-serif;
  color:white;
  padding:4px;
  border-radius:4px;
  margin-bottom:8px;
}

#game-over-dlg.w1 span {
  background:#0096EB;
}

#game-over-dlg.w2 span {
  background:#FF6914;
}

#game-over-dlg.w3 span {
  background:#323232;
}

.new-record {
  display:block;
  font-style:italic;
  margin-top:6px;
  font-weight:bold;
  animation:best-text 2s linear infinite;
}

.new-record img {
  display:inline-block;
  width:12px;
  height:12px;
  animation:best-rotate 5s linear infinite;
}

@keyframes best-rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

@keyframes best-text {
  0% {color:black}
  50% {color:goldenrod}
  100% {color:black}
}

#btn-continue {
  background: linear-gradient(180deg,white 50%, #eeeeee 100%);
  border:2px solid #cccccc;
  box-shadow:2px 2px 10px rgba(0,0,0,0.25);
  width: 300px;
  font-family: "Fredoka", sans-serif; 
  font-size: 20px;
  color: #555555;
  border-radius: 30px;
  transition: all linear 0.2s;
  display: block;
  margin: 18px auto 8px auto;  
  padding:4px 0 6px 0;
}

#btn-continue:hover {
  cursor:pointer;
  background: linear-gradient(180deg,white 50%, #eeeeee 100%);
  color:black;
  transform: translate(1px, 2px);
  box-shadow:1px 1px 7px rgba(0,0,0,0.3);
}

#game-over-dlg.w1 #btn-continue:hover {
  border-color:#0096EB;
}

#game-over-dlg.w2 #btn-continue:hover {
  border-color:#FF6914;
}

#game-over-dlg.w3 #btn-continue:hover {
  border-color:#323232;
}

.shrinky {
  animation:shrinky-dink 10s ease-in;
  animation-fill-mode: forwards;
}

@keyframes shrinky-dink {
  0% {}
  50% {filter: grayscale(100%);}
  100% {opacity:0.25; filter: grayscale(100%); transform:scale(0.8);}
}

.foldy {
  animation: foldyout 1.5s forwards;
  animation-fill-mode: forwards;
}

@keyframes foldyout {
  0% {}
  100% {transform: rotateY(45deg); opacity:0; filter: blur(2px) grayscale(100%);}
}

.foldy:nth-child(2) {animation-delay:0.1s;}
.foldy:nth-child(3) {animation-delay:0.2s;}
.foldy:nth-child(4) {animation-delay:0.3s;}
.foldy:nth-child(5) {animation-delay:0.4s;}
.foldy:nth-child(6) {animation-delay:0.5s;}
.foldy:nth-child(7) {animation-delay:0.6s;}
.foldy:nth-child(8) {animation-delay:0.7s;}
.foldy:nth-child(9) {animation-delay:0.8s;}
.foldy:nth-child(10) {animation-delay:0.9s;}
.foldy:nth-child(11) {animation-delay:1s;}
.foldy:nth-child(12) {animation-delay:1.1s;}
.foldy:nth-child(13) {animation-delay:1.2s;}
.foldy:nth-child(14) {animation-delay:1.3s;}
.foldy:nth-child(15) {animation-delay:1.4s;}
.foldy:nth-child(16) {animation-delay:1.5s;}
.foldy:nth-child(17) {animation-delay:1.6s;}
.foldy:nth-child(18) {animation-delay:1.7s;}
.foldy:nth-child(19) {animation-delay:1.8s;}
.foldy:nth-child(20) {animation-delay:1.9s;}

#totalfoundwords, #allpairs {
  font-style:normal;
}

.found-word-image {
  width: 32px;
  height: auto;
  margin: 1px 0px;
  border:1px solid white;
  border-radius:4px;
  transition:border 0.5s;
  vertical-align:middle;
}

.found-word-image:hover {
  border-color:dodgerblue;
  transition:border 0.2s;
}

.unfound {
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  width: 4px;
  color:#ccc;
}

.newly-discovered {
  border: 1px solid gold;
  box-shadow: 0 0 8px gold;
  border-radius: 4px;
  animation: new-border 2s infinite;
}

@keyframes new-border {
  0% {border-color:orange; box-shadow: 0 0 12px gold;}
  50% {border-color:gold; box-shadow: 0 0 0 transparent;}
  100% {border-color:orange; box-shadow: 0 0 12px gold;}
}

.newly-discovered:hover {
  border: 1px solid #d98c00 !important;
}

@keyframes hintSlideIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hint-animated {
  animation: hintSlideIn 0.5s ease-out;
}

@media (max-width: 767px) {
  #grid {overflow:hidden;}
}

#footer { /* hide cogsgames footer */
  display:none;
}