/* HSNFT MEMORY GAME STYLESHEET*/

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: black;
  min-height: 100%;
  font-family: CustomFont;
  background-image: url(HSNFT_BG.jpg);
  background-size: cover;
  text-align: center;
  margin: 0px;
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
}

@font-face {
  font-family: CustomFont;
  src: url(04b_11.ttf);
}
* {
  font-family: CustomFont;
}

.wrap {
  position: relative;
  height: 100%;
  width: 100vw;
  margin: auto;
  display: block;
  min-width: 1366px;
}
@media (min-width: 1025px) {
  .wrap {
    position: relative;
    height: 100vh;
    width: 100vw;
    margin: auto;
    display: block;
    min-width: 1366px;
    overflow-x: hidden; 
  }
}
  
.game {
  /* transform-style: preserve-3d; */
  perspective: 500px;
  /* min-height: 100%; */
  height: 100%;
  padding: 50px;
  margin: auto;
  display: block;
  min-height: 900px;
  max-height: 1000px;
  max-width: 1395px;
}
.card {
  float: right;
  width: 12.5%;
  height: 25%;
  padding: 7px;
  text-align: center;
  display: block;
  perspective: 500px;
  position: relative;
  cursor: pointer;
  z-index: 50;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.card .inside {
  width: 100%;
  height: 100%;
  display: block;
  transform-style: preserve-3d;
  transition: 0.4s ease-in-out;
  background: rgb(52 52 52);
  border-radius: 6px;
  box-shadow: 0px 5px 10px #000000bf;
  border: .19rem solid #2c2c2c;
}
/* .card .inside:hover {
  border:3px solid #3d3351;
} */
.card .inside.picked, .card .inside.matched {
  transform: rotateY(180deg);
}
.card .inside.matched {
  -webkit-animation: 1s matchAnim ease-in-out;
          animation: 1s matchAnim ease-in-out;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
          border: 3px solid black;
}
.card .front, .card .back {
  border: 0px solid black;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0px;
}
.card .front img, .card .back img {
  width: auto;
  min-width: 100%;
  display: block;
  margin: 0px;
  max-height: 100%;
  border-radius: 4px;
  height: auto;
}
.card .front {
  transform: rotateY(-180deg);
}
.modal-lose{
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; 
}

.modal-overlay {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal-intro {
  display: block;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow-x: hidden; 
}

.modal {
  /* display: none; */
  position: relative;
  width: 500px;
  height: 400px;
  max-height: 90%;
  max-width: 90%;
  min-height: 380px;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px 0px;
}
.modal-lose .modal {
  /* display: none; */
  top: 29%;
  display: block !important;
}
.modal.card-intro {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 90%;
  max-width: 90%;
  min-height: 380px;
  margin: 0 auto;
  top: 55%;
  transform: translateY(-50%);
  padding: 0px 0px;
}
.modal .winner{
  font-size: 2.2rem;
  padding: 20px 10px 20px 10px;
  text-align: center;
  font-family: CustomFont;
  color: white;
  text-shadow: 0px 3px 0 black;
}
.modal.modal-winner{
  /* top: 16%; */
  display: block !important;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}
.modal .loser{
  font-size: 1.8rem;
  padding: 20px 10px 20px 10px;
  text-align: center;
  font-family: CustomFont;
  color: white;
  text-shadow: 0px 3px 0 black;
}
.modal .loser-p{
  font-size: 21px;
  padding: 12px 10px;
  text-align: center;
  font-family: CustomFont;
  color: white;
  text-shadow: 0px 3px 0 black;
}
.modal .intro-msg {
  font-size: 1rem;
  padding: 16px 10px 16px 10px;
  text-align: center;
  font-family: CustomFont;
  color: white;
  text-shadow: 0px 3px 0 black;
}
.img-size{
  width: 350px;
}
.img-winner{
  width: 350px;
}
.quote{
  color: #bab8bb;
  background-color: #0000002b;
  padding: 16px 36px 16px 36px;
  font-size: .85rem;
  line-height: 20pt;
  width: 100%;
  margin: auto;
  transform: scale(.65, 1);
}
@media (max-width: 480px) {
  .modal .winner {
    font-size: 42px;
  }
  .modal .intro-msg {
    font-size: 21px;
  }
}
.modal .restart, .modal-lose .restart{
  font-family: CustomFont;
  margin: 16px auto;
  padding: 28px 30px;
  display: block;
  font-size: 16px;
  border: none;
  background: #00000033;
  border: 1px solid #4c4642;
  border-radius: 5px;
  color: white;
  text-shadow: 0px 1px 0 black;
  cursor: pointer;
  min-width: 300px;
}
.modal .restart.easy, .modal-lose .restart.easy{
  font-family: CustomFont;
  margin: 16px auto;
  padding: 16px 30px;
  display: block;
  font-size: 14px;
  border: none;
  background: transparent;
  background: #00000033;
  border: 1px solid #4c4642;
  border-radius: 5px;
  color: white;
  text-shadow: 0px 1px 0 black;
  cursor: pointer;
}
.modal .restart:hover, .modal-lose .restart:hover {
  background: #000;
  border: 1px solid #844cf1;
}

/* AJUSTES HEN */
.card .front img, .card .back img {
  width: 100%;
  min-width: 100%;
  display: block;
  margin: 0px;
  max-height: 100%;
  border-radius: 4px;
  height: 100%;
}
/* FIM AJUSTES HEN */

.timer{
  position: fixed;
  top: 22px;
  left: 48.5%;
}
#timer{
  color: #FFF;
}
.quit-button{
  position: fixed;
  top: 22px;
  right: 16px;
}
.quit-button button{
  color:#FFF;
  background-color: transparent;
  border:0px; 
  cursor: pointer;
}
.quit-button button:hover{
  color: #c69a4a;
}

.blink-me {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* ---------- Fog ---------- */
.fogwrapper {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  /* position: absolute; */
  width: 200%;
  position: fixed;
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
  bottom: 0px;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 15s linear infinite, foglayer_moveme 30s linear infinite;
  -moz-animation: foglayer_01_opacity 15s linear infinite, foglayer_moveme 30s linear infinite;
  animation: foglayer_01_opacity 15s linear infinite, foglayer_moveme 30s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 25s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 25s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 25s linear infinite;
}

/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/ 
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("CLOUDS.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("CLOUDS_2.png") center center/cover no-repeat transparent;
}
/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }