:root {
  /* Design de la page */
  --background-color: rgb(210, 238, 220);

  /* Design de la grille */
  --grid-background-color-pair: rgb(255, 255, 255);
  --grid-background-color-odd: rgb(255, 255, 255);
  --grid-border-color: rgb(41, 41, 41);
  --grid-tile-background-color: rgb(81, 223, 105);
  --grid-tile-hover-background-color: rgb(138, 210, 150);
  --grid-tile-revealed-background-color: rgb(222, 195, 145);
  --grid-border-radius: 5px;

  --grid-one-color: #0001fd;
  --grid-two-color: #017e00;
  --grid-three-color: #fe0000;
  --grid-four-color: #010180;
  --grid-five-color: #810201;
  --grid-six-color: #008080;

  /* Design du score board */
  --scoreboard-background-color: rgba(135, 149, 176, 0.725);

  /* Design des drapeaux */
  --flag-background-color: rgb(210, 71, 71);
  --flag-triangle-color: rgb(255, 255, 255);

  /* Design du timer */
  --timer-background-color: rgb(71, 106, 210);
}

@font-face {
  font-family: MOOD;
  src: url("./fonts/MOOD.ttf");
}

@font-face {
  font-family: MOOD_ct;
  src: url("./fonts/MOOD_ct.ttf");
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  padding-bottom: 200px;
  background-color: #ededed;
  opacity: 0.8;
  background-image:  linear-gradient(#dee4f0 3.4000000000000004px, transparent 3.4000000000000004px), linear-gradient(90deg, #dee4f0 3.4000000000000004px, transparent 3.4000000000000004px), linear-gradient(#dee4f0 1.7000000000000002px, transparent 1.7000000000000002px), linear-gradient(90deg, #dee4f0 1.7000000000000002px, #ededed 1.7000000000000002px);
  background-size: 85px 85px, 85px 85px, 17px 17px, 17px 17px;
  background-position: -3.4000000000000004px -3.4000000000000004px, -3.4000000000000004px -3.4000000000000004px, -1.7000000000000002px -1.7000000000000002px, -1.7000000000000002px -1.7000000000000002px;
  cursor: url('img/shovel.png'),auto;
  animation: rumble 1s 1;
  overflow-x: hidden;
}

@keyframes rumble {
  /* First cycle */
  0% {
    transform: translate(0, 0);
  }
  12.5% {
    transform: translate(13px, -13px);
  }
  25% {
    transform: translate(-13px, 13px);
  }
  37.5% {
    transform: translate(13px, 13px);
  }

  /* Second cycle */
  50% {
    transform: translate(0, 0);
  }
  62.5% {
    transform: translate(-13px, -13px);
  }
  75% {
    transform: translate(13px, -13px);
  }
  87.5% {
    transform: translate(-13px, 13px);
  }
  
  /* End */
  100% {
    transform: translate(0, 0);
  }
}

#logo {
  margin-top: 25px;
  width: 15rem;
  pointer-events: none;
  animation: initial-boom 2s cubic-bezier(.09,1.03,.53,1.33) 1;
}

@keyframes initial-boom {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

#mute-button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 15px;
  width: 30px;
  height: 30px;
  background-color: #b0b8c8;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#mute-button:hover {
  background-color: rgb(210, 71, 71, 0.8);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  animation: reset-button-anim 1s infinite;
}

#visual-board {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 25px;
  background-color: var(--scoreboard-background-color);
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  border-radius: 5px;
  padding: 5px;
  padding-right: 8px;
  padding-left: 8px;
  transition: all 0.3s ease-in-out;
}

#time-counter, #flag-counter {
  font-family: MOOD_ct;
  font-size: 2.5rem;
}

#flag-counter {
  grid-area: flag-counter;
}

#time-counter {
  grid-area: time;
}

#time-counter {
  color: var(--timer-background-color);
}

#reset-button {
  font-family: MOOD;
  font-size: 1.5rem;
  padding: 5px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  background-color: var(--flag-background-color);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
#reset-button:hover {
  background-color: rgb(210, 71, 71, 0.8);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  animation: reset-button-anim 1s infinite;
}
@keyframes reset-button-anim {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.05) rotate(-5deg);
  }
  50% {
    transform: scale(1.05) rotate(5deg);
  }
  75% {
    transform: scale(1.05) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
  
}

#reset-button>img {
  vertical-align: middle;
  margin-right: 5px;
  filter: brightness(1000%);
}

#difficulty-menu {
  grid-area: difficulty;
  font-family: MOOD;
  font-size: 1.5rem;
  padding: 8px;
  border-radius: 5px;
  text-align: center;
  background-color: rgb(245, 239, 239);
  color: var(--timer-background-color);
  border: none;
  cursor: pointer;
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

#score-flag {
  grid-area: flag;
  position: relative;
  z-index: 10;
  width: 5px;
  height: 28px;
  border-radius: 5px;
  background-color: var(--flag-background-color);
  pointer-events: none;
}
#score-flag::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 0;
  border-left: 20px solid var(--flag-triangle-color, var(--flag-triangle-color)); 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-radius: 2px;
}

@media screen and (max-width: 900px) {
  #visual-board {
    gap: 20px;
  }

  #score-flag {
    width: 3px;
    height: 20px;
  }
  #score-flag::after {
    border-left: 15px solid var(--flag-triangle-color, var(--flag-triangle-color)); 
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
  }

  #time-counter, #flag-counter {
    font-size: 1.7rem;
  }

  #reset-button {
    grid-area: reset;
    font-size: 1.2rem;
    padding: 1px;
  }

  #difficulty-menu {
    font-size: 1.2rem;
    padding: 7px;
  }

  #logo {
    width: 12rem;
  }
}

@media screen and (max-width: 500px) {
  #visual-board {
    display: grid;
    grid-template-areas:
    ". difficulty information reset"
    " flag flag-counter time .";
    place-items: center;
    gap: 0px;
  }
}

#game-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#grid-container {
  display: flex;
  flex: 1;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  min-width: 70%;
}

#aside-high-scores {
  position: absolute;
  right: 1%;
  text-align: right;
  flex-shrink: 0;
  font-family: MOOD;
  color: rgb(47, 47, 47);
  font-size: 1.3rem;
  animation: slideIn .5s forwards cubic-bezier(.09,1.03,.53,1.33);
}

@keyframes slideIn {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

#aside-high-scores h2 {
  font-family: MOOD;
  font-size: 1.8rem;
  font-style: italic;
  color: black;
}

#high-scores {
  text-align: center;
  width: 100%;
}

#high-scores tbody tr {
  padding-bottom: 20px;
}

#high-scores tbody tr:nth-child(1)::after {
  content: '🥇';
  position: absolute;
  top: 50%;
  left: -1rem;
  transform: translateY(-50%);
}

#high-scores tbody tr:nth-child(2)::after {
  content: '🥈';
  position: absolute;
  top: 50%;
  left: -1rem;
  transform: translateY(-50%);
}

#high-scores tbody tr:nth-child(3)::after {
  content: '🥉';
  position: absolute;
  top: 50%;
  left: -1rem;
  transform: translateY(-50%);
}

@media screen and (max-width: 900px) {
  #aside-high-scores h2 {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 750px) {
  #aside-high-scores {
    position: relative;
    text-align: center;
    min-width: 200px;
  }
}

#grid {
  box-shadow: rgb(113, 255, 85) 0px 0px 0px 3px, rgb(159, 208, 158) 0px 0px 0px 6px, rgb(193, 215, 192) 0px 0px 0px 9px;
}

table {
  border-radius: var(--grid-border-radius);
}

table#grid, tr, td {
  position: relative;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
}

#grid td {
  width: clamp(20px, 5vw, 50px);
  height: clamp(20px, 5vw, 50px);
}


.cell-button {
  z-index: 5;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--grid-tile-background-color);
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  margin: 2px;
  border: none;
  cursor: url('img/shovel.png'),auto;
  border-radius: var(--grid-border-radius);
}

.cell-button:hover {
  background-color: var(--grid-tile-hover-background-color);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.cell-button.revealed {
  background-color: var(--grid-tile-revealed-background-color);
  font-family: MOOD;
  font-size: 2.2rem;
}

.zero {
  color: transparent;
}
.one {
  color: var(--grid-one-color);
}
.two {
  color: var(--grid-two-color);
}
.three {
  color: var(--grid-three-color);
}
.four {
  color: var(--grid-four-color);
}
.five {
  color: var(--grid-five-color);
}
.six {
  color: var(--grid-six-color);
}

.mine {
  filter: drop-shadow(0 0 5px red) drop-shadow(0 0 5px red) drop-shadow(0 0 5px red) saturate(200%);
}

.flag {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: clamp(40%, 80%, 90%);
  border-radius: 5px;
  background-color: var(--flag-background-color);
  pointer-events: none;
}

.flag::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 0;
  border-left: 20px solid var(--flag-triangle-color, var(--flag-triangle-color)); 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-radius: 2px;
}

@media screen and (max-width: 730px) {
  .flag::after {
    border-left: 15px solid var(--flag-triangle-color, var(--flag-triangle-color)); 
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }
  .cell-button.revealed {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 530px) {
  .flag::after {
    border-left: 10px solid var(--flag-triangle-color, var(--flag-triangle-color)); 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  .cell-button.revealed {
    font-size: 1rem;
  }
}

#information {
  grid-area: information;
  position: relative;
  display: flex;
  font-family: MOOD;
  font-size: 2rem;
  background-color: var(--timer-background-color);
  color: white;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  border: none;
  padding: 5px;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  cursor: pointer;
}
#information:hover {
  background-color: rgb(32, 64, 160);
}
#information:hover::after {
  content: 'Aide';
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -25px;
  left: -50%;
  background-color: rgb(137, 150, 165);
  width: 50px;
  height: 20px;
  padding: 2px;
  border-radius: var(--grid-border-radius);
  font-family: MOOD;
  font-size: 1.5rem;
}

.invisible-container {
  z-index: 15;
  position: fixed;
  display: none;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(230, 224, 224, 0.951);
  transition: all 0.3s ease-in-out;
  opacity: 0;
  scale: 0;
}

.fenButtonOn {
  animation: fenBoutonApparition .6s forwards;
  animation-iteration-count: 1;
}
.fenButtonOff {
  animation: fenBoutonDisparition .6s forwards;
  animation-iteration-count: 1;
}

@keyframes fenBoutonApparition {
  0% {
      clip-path: circle(0vh at center);
      opacity: 0;
      scale: 0;
  }
  75% {
      scale: 1.05;
  }
  100% {
      clip-path: circle(100% at center);
      width: 100%;
      height: 100%;
      opacity: 1;
      scale: 1;
  }
}
@keyframes fenBoutonDisparition {
  0% {
      clip-path: circle(100% at center);
      width: 100%;
      height: 100%;
      opacity: 1;
      scale: 1;
  }
  100% {
      clip-path: circle(0vh at center);
      width: 0%;
      height: 0%;
      opacity: 0;
      scale: 0;
  }
}

#close-container {
  position: absolute;
  top: 0;
  right: 0;
  margin: 15px;
  width: 30px;
  height: 30px;
  background-color: var(--flag-background-color);
  font-weight: bold;
  color: white;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#close-container:hover {
  background-color: rgb(210, 71, 71, 0.8);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  animation: reset-button-anim 1s infinite;
}

#help-text h2 {
  font-family: MOOD;
  font-size: 2.5rem;
  color: var(--timer-background-color)
}
#help-text {
  display: grid;
  place-items: center;
  font-family: MOOD;
  padding: 20px;
  font-size: 1.5rem;
}

#defeat-text {
  display: grid;
  place-items: center;
  font-family: MOOD_ct;
  padding: 20px;
  font-size: 5rem;
  color: var(--flag-background-color);
  z-index: 5;
}

#victory-text {
  display: grid;
  place-items: center;
  font-family: MOOD_ct;
  padding: 20px;
  font-size: 5rem;
  color: var(--grid-tile-background-color);
}

#victory-container {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='100' height='100' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23dfdfe9ff'/><path d='M100.16 24.75a2.93 2.93 0 11.04 5.86 2.93 2.93 0 01-2.95-2.91 2.92 2.92 0 012.9-2.95zm-100 0a2.93 2.93 0 11.04 5.86 2.93 2.93 0 01-2.95-2.91 2.92 2.92 0 012.9-2.95zm9.57 53.18c1.6 0 2.9 1.3 2.9 2.9a2.95 2.95 0 01-2.95 2.96 2.9 2.9 0 01-2.9-2.9 2.95 2.95 0 012.95-2.96zm58.57-2.51a2.93 2.93 0 11.04 5.86 2.93 2.93 0 11-.04-5.86zM49.45 4.4a2.93 2.93 0 11.04 5.86 2.93 2.93 0 01-.04-5.86zM21.66 49.6l2.95 2.91-2.9 2.95-2.95-2.9zm43.55-12.85s2.9 1.3 2.9 2.9v.05c0 1.6-1.3 2.9-2.9 2.9h-.04c-1.6 0-2.9-2.9-2.9-2.9z'  stroke-width='1' stroke='none' fill='%23ede0b7ff'/><path d='M89.93 57.48a1.08 1.08 0 01.39-1.38c2.44-1.53 5.04-1.81 7.15-.8 2.1 1.03 3.47 3.26 3.77 6.13.22 2.14 1.14 3.71 2.58 4.42 1.44.7 3.24.45 5.07-.69a1.07 1.07 0 011.13 1.8c-2.44 1.54-5.04 1.83-7.14.81-2.1-1.02-3.48-3.25-3.77-6.12-.23-2.15-1.15-3.72-2.59-4.42-1.44-.7-3.24-.46-5.07.68-.5.32-1.16.16-1.47-.33l-.05-.1zm10.06 31.11a.87.87 0 011.07.46c.99 2.14.95 4.28-.1 5.88-1.05 1.6-3 2.48-5.36 2.42-1.76-.04-3.13.54-3.85 1.63-.72 1.1-.71 2.59.03 4.18a.87.87 0 11-1.59.73c-.99-2.13-.95-4.27.1-5.87 1.05-1.6 3-2.48 5.36-2.42 1.76.04 3.13-.54 3.85-1.63.72-1.1.71-2.59-.03-4.18a.87.87 0 01.52-1.2zm0-100a.87.87 0 011.07.46c.99 2.14.95 4.28-.1 5.88-1.05 1.6-3 2.48-5.36 2.42-1.76-.04-3.13.54-3.85 1.63-.72 1.1-.71 2.59.03 4.18a.87.87 0 11-1.59.73c-.99-2.13-.95-4.27.1-5.87 1.05-1.6 3-2.48 5.36-2.42 1.76.04 3.13-.54 3.85-1.63.72-1.1.71-2.59-.03-4.18a.87.87 0 01.52-1.2zM9.44 9.9c.15-.3.54-.39.9-.24 1.88.82 3.16 2.12 3.53 3.58.38 1.47-.21 2.93-1.6 4.02-1.04.8-1.47 1.81-1.22 2.81.26 1 1.17 1.9 2.57 2.5.39.18.6.58.47.9-.13.34-.55.47-.93.3-1.88-.82-3.16-2.12-3.54-3.58-.37-1.46.22-2.93 1.6-4.01 1.05-.81 1.48-1.82 1.23-2.82-.26-1-1.17-1.89-2.58-2.5-.38-.17-.59-.57-.46-.9l.03-.07zm-19.51 47.59a1.08 1.08 0 01.39-1.38c2.44-1.53 5.04-1.81 7.15-.8 2.1 1.03 3.47 3.26 3.77 6.13.22 2.14 1.14 3.71 2.58 4.42 1.44.7 3.24.45 5.07-.69a1.07 1.07 0 011.13 1.8c-2.44 1.54-5.04 1.83-7.14.81C.78 66.75-.6 64.52-.9 61.65c-.23-2.15-1.15-3.72-2.59-4.42-1.44-.7-3.24-.46-5.07.68-.5.32-1.16.16-1.47-.33l-.05-.1zM-.01 88.59a.87.87 0 011.07.46c.99 2.14.95 4.28-.1 5.88-1.05 1.6-3 2.48-5.36 2.42-1.76-.04-3.13.54-3.85 1.63-.72 1.1-.71 2.59.03 4.18a.87.87 0 11-1.59.73c-.99-2.13-.95-4.27.1-5.87 1.05-1.6 3-2.48 5.36-2.42 1.76.04 3.13-.54 3.85-1.63.72-1.1.71-2.59-.03-4.18a.87.87 0 01.52-1.2zm43.92-4.85c-.24-.48-.1-1.08.36-1.38 2.41-1.59 5-1.93 7.13-.96s3.55 3.17 3.92 6.03c.27 2.14 1.23 3.7 2.68 4.36 1.46.67 3.25.38 5.05-.8a1.07 1.07 0 011.48.3c.32.5.19 1.16-.3 1.48-2.4 1.59-5 1.94-7.13.96-2.12-.97-3.55-3.17-3.91-6.03-.28-2.14-1.23-3.69-2.69-4.36-1.46-.67-3.25-.38-5.05.8-.49.32-1.16.2-1.48-.3l-.06-.1zM41 45.67c-.47.25-1.07.1-1.38-.35-1.61-2.39-2-4.98-1.05-7.11.94-2.14 3.13-3.6 5.98-4 2.14-.3 3.67-1.27 4.32-2.73.65-1.47.34-3.26-.87-5.05-.33-.49-.2-1.15.28-1.48.5-.33 1.15-.2 1.5.28 1.6 2.39 2 4.98 1.04 7.11-.94 2.14-3.12 3.6-5.98 4-2.13.3-3.67 1.27-4.32 2.73-.65 1.47-.34 3.26.87 5.05.33.49.21 1.15-.28 1.49-.04.01-.07.04-.1.06z'  stroke-width='1' stroke='none' fill='%23f0b5b0ff'/><path d='M101 9.76l.75 1.71-9.97 4.34-.74-1.72zM87.35 9.7l-.66 1.75L59.14 1.12l.65-1.76zM41.4-6.21l1.62.93L34.2 10l-1.62-.94zM87.35 109.7l-.66 1.76-27.55-10.35.65-1.75zM50.58 56.03l1.85-.3 1.83 11.32-1.85.3zm-6.22 13.79l-.5 1.8-17-4.66.5-1.8zM41.4 93.79l1.62.93L34.2 110l-1.62-.94zM87.35 9.7l-.66 1.75L59.14 1.12l.65-1.76zm-7.77 42.56l.77 1.76-16.34 7.11-.77-1.75zM1 9.76l.75 1.71-9.96 4.34-.75-1.72zm100 0l.75 1.71-9.97 4.34-.74-1.72zM31.04 27.68l.6 1.86-23.13 7.48-.6-1.86zm48.1 46.45l.73-1.72 10 4.28-.74 1.72zM41.4-6.2l1.62.93L34.2 10l-1.62-.94zM67.54 11.2l1.62.94-7.26 12.57-1.62-.94zM21.22 90.35l-.6-1.4 9.58-4.16.6 1.39zm69.3-49.79l-1.5 1.12L78.5 27.55l1.5-1.12zm-3.17 69.14l-.66 1.76-27.55-10.35.65-1.75zM41.4 93.8l1.62.93L34.2 110l-1.62-.94zM1 9.76l.74 1.71-9.96 4.34-.75-1.72z'  stroke-width='1' stroke='none' fill='%23addde5ff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")
}

#victory-img {
  margin: 0 auto;
  width: 200px; 
}

#game-over-container {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23d8d8d8ff'/><path d='m25.57 20.66 13.77 13.77-4.91 4.91-13.77-13.77zm13.77 4.91L25.57 39.11l-4.91-4.91 13.77-13.54zm-20-11.14-4.91 4.91L.66 5.57 5.57.66zM5.57 19.34.66 14.43 14.43.66l4.91 4.91z'  stroke-width='1' stroke='none' fill='%23d9d9d9ff'/><path d='M34.43 19.34 20.66 5.57 25.57.66l13.77 13.77zm-13.77-4.91L34.43.66l4.91 4.91-13.77 13.77zm-1.32 20-4.91 4.91L.66 25.57l4.91-4.91zM5.57 39.34.66 34.43l13.77-13.77 4.91 4.91z'  stroke-width='1' stroke='none' fill='%23f7bfbbff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.reset-button {
  font-family: MOOD;
  font-size: 1.5rem;
  padding: 5px;
  border-radius: 5px;
  background-color: var(--flag-background-color);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.reset-button:hover {
  background-color: rgb(210, 71, 71, 0.8);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.reset-button>img {
  vertical-align: middle;
  margin-right: 5px;
  filter: brightness(1000%);
}

.add-button {
  font-family: MOOD;
  font-size: 1.5rem;
  padding: 5px;
  border-radius: 5px;
  background-color: var(--grid-tile-background-color);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  width: 100%;
  height: 100%;
}
.add-button:hover {
  background-color: var(--grid-tile-hover-background-color);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.add-button>img {
  vertical-align: middle;
  margin-right: 5px;
}

#victory-time, #victory-score {
  font-family: MOOD_ct;
  font-size: 2.5rem;
  color: rgb(24, 24, 24);
  text-align: center;
}

#high-score-form {
  display: grid;
  place-items: center;
  font-family: MOOD;
  font-size: 1.5rem;
}

#high-score-form input {
  font-family: MOOD;
  font-size: 1.5rem;
  padding: 5px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}