* {
  font-family: 'Lexend', sans-serif; }

html {
  width: 100%;
  height: 100%; }

body {
  background: url(../img/img-background.png);
  background-size: cover;
  background-position: 50% 85%;
  margin: auto;
  /* ------------- Div Icone Selezionate ------------ */ }
  body .container {
    padding: 10px;
    margin: auto; }
  body #griglia > div {
    color: #e9e9e9;
    background: linear-gradient(135deg, rgba(129, 128, 128, 0.8) 0%, rgba(1, 0, 0, 0.8) 50%, rgba(129, 128, 128, 0.8) 100%);
    border-radius: 5px;
    text-shadow: 0 2px 2px #000;
    border: 2px solid #3889c4;
    background: url(../img/img-backcard.png);
    background-size: cover;
    width: 115px;
    height: 115px;
    margin: 10px;
    padding: 0; }
  body #griglia > div img {
    border-radius: 5px;
    width: 115px;
    height: 115px; }
  body .icon-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
    margin-top: 5px;
    color: #e9e9e9;
    background: linear-gradient(135deg, rgba(129, 128, 128, 0.8) 0%, rgba(1, 0, 0, 0.8) 50%, rgba(129, 128, 128, 0.8) 100%);
    border-radius: 5px;
    text-shadow: 0 2px 2px #000;
    border: 2px solid #3889c4;
    border-bottom: 1px solid #3889c4; }
  body .text-center {
    text-align: center;
    color: #e9e9e9;
    background: linear-gradient(135deg, rgba(129, 128, 128, 0.8) 0%, rgba(1, 0, 0, 0.8) 50%, rgba(129, 128, 128, 0.8) 100%);
    border-radius: 5px;
    text-shadow: 0 2px 2px #000;
    border: 2px solid #3889c4;
    border-top: 1px solid #3889c4; }
  body .score-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center; }
  body .memorize, body .timer, body .moves {
    display: block;
    padding: 5px 35px;
    margin: 0 5px;
    font-size: 1.4em;
    cursor: default;
    color: #e9e9e9;
    background: linear-gradient(135deg, rgba(129, 128, 128, 0.8) 0%, rgba(1, 0, 0, 0.8) 50%, rgba(129, 128, 128, 0.8) 100%);
    border-radius: 5px;
    text-shadow: 0 2px 2px #000;
    border: 2px solid #3889c4; }
  body #btnEasy, body #btnNormal, body #btnHard, body #btnMenu, body #btnMute, body #btnUnmute {
    animation: touch 0.5 linear;
    cursor: pointer;
    font-size: 1.4em;
    text-align: center;
    padding: 8px 40px;
    margin: 10px 5px 0 5px;
    color: #e9e9e9;
    background: linear-gradient(135deg, rgba(129, 128, 128, 0.8) 0%, rgba(1, 0, 0, 0.8) 50%, rgba(129, 128, 128, 0.8) 100%);
    border-radius: 5px;
    text-shadow: 0 2px 2px #000;
    border: 2px solid #3889c4; }
  body #btnEasy:hover, body #btnNormal:hover, body #btnHard:hover, body #btnMenu:hover, body #btnMute:hover, body #btnUnmute:hover {
    background-color: blue; }

@keyframes strike {
  /* animazione quando si indovina */
  0% {
    transform: rotate(0deg) scale(100%); }
  20% {
    transform: rotate(45deg) scale(110%); }
  40% {
    transform: rotate(90deg) scale(120%); }
  60% {
    transform: rotate(135deg) scale(140%); }
  80% {
    transform: rotate(180deg) scale(115%); }
  100% {
    transform: rotate(270deg) scale(105%); } }

@keyframes touch {
  /* animazione al tocco delle card */
  0% {
    box-shadow: 0 0 0 5px rgba(0, 251, 255, 0.6); }
  10% {
    box-shadow: 0 0 0 10px rgba(0, 251, 255, 0.1); }
  50% {
    box-shadow: 0 0 0 10px rgba(0, 251, 255, 0); }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 251, 255, 0); } }
  body .icon {
    text-align: center;
    visibility: visible !important;
    cursor: pointer;
    border: none;
    width: 115px;
    height: 115px; }
  body .show {
    animation: touch 4s linear;
    animation-duration: .5s;
    border-radius: 5px;
    width: 115px;
    height: 115px; }
  body .find {
    animation: strike 0.3s linear;
    border: none; }
  body .disabled {
    pointer-events: none;
    width: 115px;
    height: 115px; }

/* ------------- Media Queries ------------ */
@media (max-width: 1280px) {
  /* Tablet */
  body #griglia > div {
    margin: 10px;
    padding: 0;
    width: 90px;
    height: 90px; }
  body #griglia > div img, body .icon, body .show, body .find, body .disabled {
    width: 90px;
    height: 90px; }
  body .icon-grid {
    row-gap: 0;
    column-gap: 0;
    padding: 10px;
    margin-top: 50px; }
  body .score-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center; }
  body .memorize, body .timer, body .moves {
    font-size: 1.3em;
    padding: 5px 20px; }
  body #btnEasy, body #btnNormal, body #btnHard, body #btnMenu, body #btnMute, body #btnUnmute {
    font-size: 1.3em;
    padding: 5px 9px;
    margin: 10px 5px 3px 5px; } }

@media (max-width: 480px) {
  /* Mobile */
  body {
    margin: 0;
    padding: 0;
    background-color: #07161f; }
    body #griglia > div {
      margin: 5px 5px;
      padding: 0;
      width: 70px;
      height: 70px; }
    body #griglia > div img, body .icon, body .show, body .find, body .disabled {
      width: 70px;
      height: 70px; }
    body .icon-grid {
      row-gap: 0;
      column-gap: 0;
      padding: 5px;
      margin-top: 0; }
    body .text-center {
      padding: 5px; }
    body .memorize, body .timer, body .moves {
      font-size: 0.9em;
      padding: 5px; }
    body #btnEasy, body #btnNormal, body #btnHard, body #btnMenu, body #btnMute, body #btnUnmute {
      font-size: 0.9em;
      padding: 2px 8px;
      margin: 8px 3px 3px 3px; } }