/*Variables*/
:root {
  --main-text-color: #fff;
  --main-special-color: #04d939;
  --main-background-color: #1e2749;
  --main-background-card-color: #273469;
  --main-border-radius: 20px;
  --main-transition-duration: 0.7s;
}
/*Font*/
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap");

/*Selection*/
::-moz-selection {
  background-color: var(--main-background-card-color);
  color: var(--main-text-color);
}
::selection {
  background-color: var(--main-background-card-color);
  color: var(--main-text-color);
}
/*Scrollbar*/
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background-color: var(--main-background-card-color);
}
::-webkit-scrollbar-thumb {
  background-color: var(--main-special-color);
  border-radius: var(--main-border-radius);
}
::-webkit-scrollbar-corner {
  background-color: var(--main-background-card-color);
}
/*HTML*/
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
/*All*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/*Body*/
body {
  font-family: "Work Sans", sans-serif;
  background-color: var(--main-background-color);
  height: 100vh;
}
body::before {
  position: absolute;
  content: url("images/back7.png");
  z-index: -3;
  padding-top: -20px;
}
main h1 {
  text-align: center;
  text-transform: capitalize;
  color: var(--main-special-color);
  margin: 20px 0;
  font-size: 1.6rem;
}
main .content-start {
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: #273469a3;
  position: absolute;
  z-index: 3;
}
main .content-start button {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: none;
  outline: none;
  padding: 25px 40px;
  z-index: 2;
  border-radius: var(--main-border-radius);
  background-color: var(--main-special-color);
  color: var(--main-text-color);
  font-size: 1.5rem;
  cursor: pointer;
  text-transform: capitalize;
  -webkit-transition: all var(--main-transition-duration);
  -o-transition: all var(--main-transition-duration);
  transition: all var(--main-transition-duration);
  z-index: 5;
}
main .content-start button:hover {
  -webkit-box-shadow: var(--main-text-color) 0px 0px 5px,
    var(--main-text-color) 0px 0px 10px, var(--main-text-color) 0px 0px 15px,
    var(--main-special-color) 0px 0px 20px,
    var(--main-special-color) 0px 0px 30px,
    var(--main-special-color) 0px 0px 40px,
    var(--main-special-color) 0px 0px 50px,
    var(--main-special-color) 0px 0px 75px;
  box-shadow: var(--main-text-color) 0px 0px 5px,
    var(--main-text-color) 0px 0px 10px, var(--main-text-color) 0px 0px 15px,
    var(--main-special-color) 0px 0px 20px,
    var(--main-special-color) 0px 0px 30px,
    var(--main-special-color) 0px 0px 40px,
    var(--main-special-color) 0px 0px 50px,
    var(--main-special-color) 0px 0px 75px;
}
main .memory-game {
  width: 700px;
  height: 550px;
  margin: 40px auto;
  border-radius: var(--main-border-radius);
}
main .memory-game .info-memory-game {
  width: 100%;
  height: 7%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
main .memory-game .info-memory-game .restart {
  width: 50px;
}
main .memory-game .info-memory-game .player {
  max-width: 300px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
main .memory-game .info-memory-game .player,
main .memory-game .info-memory-game .timer,
main .memory-game .info-memory-game .tries {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
main .memory-game .info-memory-game .player,
main .memory-game .info-memory-game .timer,
main .memory-game .info-memory-game .tries,
main .memory-game .info-memory-game .restart {
  background-color: var(--main-special-color);
  color: var(--main-text-color);
  padding: 15px;
  border-radius: var(--main-border-radius);
}

main .memory-game .info-memory-game .restart {
  border-radius: 50%;
  -webkit-transition: all var(--main-transition-duration);
  -o-transition: all var(--main-transition-duration);
  transition: all var(--main-transition-duration);
}
main .memory-game .info-memory-game .restart:hover {
  -webkit-box-shadow: var(--main-text-color) 0px 0px 5px,
    var(--main-text-color) 0px 0px 10px, var(--main-text-color) 0px 0px 15px,
    var(--main-special-color) 0px 0px 20px,
    var(--main-special-color) 0px 0px 30px,
    var(--main-special-color) 0px 0px 40px,
    var(--main-special-color) 0px 0px 50px,
    var(--main-special-color) 0px 0px 75px;
  box-shadow: var(--main-text-color) 0px 0px 5px,
    var(--main-text-color) 0px 0px 10px, var(--main-text-color) 0px 0px 15px,
    var(--main-special-color) 0px 0px 20px,
    var(--main-special-color) 0px 0px 30px,
    var(--main-special-color) 0px 0px 40px,
    var(--main-special-color) 0px 0px 50px,
    var(--main-special-color) 0px 0px 75px;
  cursor: pointer;
}
main .memory-game .info-memory-game .player i,
main .memory-game .info-memory-game .timer i,
main .memory-game .info-memory-game .tries i,
main .memory-game .info-memory-game .restart i {
  margin-right: 5px;
  font-size: 1.3rem;
}
main .memory-game .content-memory-game .cards {
  margin: 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
main .memory-game .content-memory-game .cards .card {
  width: 130px;
  height: 130px;
  background-color: var(--main-background-card-color);
  margin: 10px;
  border-radius: var(--main-border-radius);
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all var(--main-transition-duration);
  -o-transition: all var(--main-transition-duration);
  transition: all var(--main-transition-duration);
}
.flippedCard,
.done {
  /*Rotate Y 180deg*/
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.noClick {
  pointer-events: none;
}
main .memory-game .content-memory-game .cards .card .face,
main .memory-game .content-memory-game .cards .card .back {
  position: absolute;
  border-radius: var(--main-border-radius);
  width: 100%;
  height: 100%;
  /*Back Face Hidden*/
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
main .memory-game .content-memory-game .cards .card .face {
  background-size: cover;
  background-position: center;
  /*Rotate Y 180deg*/
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
main .memory-game .content-memory-game .cards .card .face.im1 {
  background-image: url("images/pic11.jpg");
}
main .memory-game .content-memory-game .cards .card .face.im2 {
  background-image: url("images/pic3.jpg");
}
main .memory-game .content-memory-game .cards .card .face.im3 {
  background-image: url("images/pic10.jpg");
}
main .memory-game .content-memory-game .cards .card .face.im4 {
  background-image: url("images/pic13.jpg");
}
main .memory-game .content-memory-game .cards .card .face.im5 {
  background-image: url("images/pic14.jpg");
}
main .memory-game .content-memory-game .cards .card .face.im6 {
  background-image: url("images/pic7.jpg");
}
main .memory-game .content-memory-game .cards .card .back {
  background-color: var(--main-background-card-color);
}
main .memory-game .content-memory-game .cards .card .back i {
  margin: 20px 27px;
  color: var(--main-special-color);
  opacity: 0.7;
  -webkit-transition: all var(--main-transition-duration);
  -o-transition: all var(--main-transition-duration);
  transition: all var(--main-transition-duration);
}
main .memory-game .content-memory-game .cards .card:hover i {
  -webkit-animation: move-rotation 0.5s ease-in-out alternate backwards;
  animation: move-rotation 0.5s ease-in-out alternate backwards;
}
.box-sha {
  -webkit-animation: move-box-sha 0.6s ease-in-out alternate backwards;
  animation: move-box-sha 0.6s ease-in-out alternate backwards;
}

/*Animation*/
@-webkit-keyframes move-box-sha {
  from {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  to {
    -webkit-box-shadow: var(--main-text-color) 0px 0px 5px,
      var(--main-text-color) 0px 0px 10px, var(--main-text-color) 0px 0px 15px,
      var(--main-special-color) 0px 0px 20px,
      var(--main-special-color) 0px 0px 30px,
      var(--main-special-color) 0px 0px 40px,
      var(--main-special-color) 0px 0px 50px,
      var(--main-special-color) 0px 0px 75px;
    box-shadow: var(--main-text-color) 0px 0px 5px,
      var(--main-text-color) 0px 0px 10px, var(--main-text-color) 0px 0px 15px,
      var(--main-special-color) 0px 0px 20px,
      var(--main-special-color) 0px 0px 30px,
      var(--main-special-color) 0px 0px 40px,
      var(--main-special-color) 0px 0px 50px,
      var(--main-special-color) 0px 0px 75px;
  }
}
@keyframes move-box-sha {
  from {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  to {
    -webkit-box-shadow: var(--main-text-color) 0px 0px 5px,
      var(--main-text-color) 0px 0px 10px, var(--main-text-color) 0px 0px 15px,
      var(--main-special-color) 0px 0px 20px,
      var(--main-special-color) 0px 0px 30px,
      var(--main-special-color) 0px 0px 40px,
      var(--main-special-color) 0px 0px 50px,
      var(--main-special-color) 0px 0px 75px;
    box-shadow: var(--main-text-color) 0px 0px 5px,
      var(--main-text-color) 0px 0px 10px, var(--main-text-color) 0px 0px 15px,
      var(--main-special-color) 0px 0px 20px,
      var(--main-special-color) 0px 0px 30px,
      var(--main-special-color) 0px 0px 40px,
      var(--main-special-color) 0px 0px 50px,
      var(--main-special-color) 0px 0px 75px;
  }
}
@-webkit-keyframes move-rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    text-shadow: none;
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
    text-shadow: var(--main-text-color) 0px 0px 5px,
      var(--main-text-color) 0px 0px 10px, var(--main-text-color) 0px 0px 15px,
      var(--main-special-color) 0px 0px 20px,
      var(--main-special-color) 0px 0px 30px,
      var(--main-special-color) 0px 0px 40px,
      var(--main-special-color) 0px 0px 50px,
      var(--main-special-color) 0px 0px 75px;
  }
}
@keyframes move-rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    text-shadow: none;
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
    text-shadow: var(--main-text-color) 0px 0px 5px,
      var(--main-text-color) 0px 0px 10px, var(--main-text-color) 0px 0px 15px,
      var(--main-special-color) 0px 0px 20px,
      var(--main-special-color) 0px 0px 30px,
      var(--main-special-color) 0px 0px 40px,
      var(--main-special-color) 0px 0px 50px,
      var(--main-special-color) 0px 0px 75px;
  }
}