body {
  user-select: none;
  margin: 0;
  font-family: "Poppins", sans-serif;
  overflow-y: hidden;
    background-image: url("../images/bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;

}
#container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 550px;
  margin: auto;
}



.background-upload{
  right: 20px; display: flex;
    flex-direction: column;
    width: 13%;
    position: absolute;
    right: 18px;
    top: 10px !important;
}


/*.d-flex.background-upload.w-100.position-absolute.gap-5{
  right: 144px !important;
  width: 108px !important;

}*/
 
#startgame-section{
      height: 100% !important;
    justify-content: flex-start !important;
}
.header-gameSection {
  gap: 10px;
}

@media only screen and (max-width: 600px) {
  #app{
    width: 0px !important;
  }
  .game-header{
    padding: 0px !important;
  }
  .moves.font-x-large {
    display: flex !important;
    padding: 6px !important;
}
  .d-flex.background-upload.w-100.position-absolute.gap-5 {
    display: flex !important;
    position: absolute !important;
    top: 108px !important;
    right: 5px !important;
    height: 35px !important;
  }
  .game {
    width: 100% !important;
  }
  .game-header.d-flex.gap-5.mt-1{
    margin-top: 4rem !important;
        width: 261px !important;

  }
  .level2 {
    width: 93% !important;
  }
  .level2 .card {
    width: 49px !important;
    height: 83px !important;
  }
  .level2 .card .inside {
    width: 49px !important;
    height: 83px !important;
  }
  .level2 .card .inside .back ,
  .level2 .card .inside .front{
 
    width: 39px !important;
    height: 83px !important;
  }
  .level2 .card .inside .front img,
  .level2 .card .inside .back img {
       width: 39px !important;
    height: 83px !important;
  }
  .level4 {
    width: 100% !important;
  }
  .level5 .game {
    width: 100% !important;
  }
  .level5 .card {
    width: 40px !important;
    height: 70px !important;
  }
  .level5 .card .inside {
    width: 40px !important;
    height: 70px !important;
  }
  .level5 .card .inside .front,
  .level5 .card .inside .back {
    width: 31px !important;
    height: 70px !important;
  }
  .level5 .card .inside .front img,
  .level5 .card .inside .back img {
    width: 31px !important;
    height: 70px !important;
  }
  button {
    padding: 0.7rem 1rem 0.7rem 1rem !important;
  }
   #background-btn {
    padding: 0px 0px 0px 0px !important;
    font-size: small !important;
    width: 71px !important;
    top: 107% !important;
    position: absolute !important;
  }
  #background-btn span{
    font-size: 9px !important;
  }
  #backCard-btn {
    padding: 0px 0px 0px 0px !important;
    font-size: small !important;
    width: 71px !important;
  }
  #backCard-btn span{
    font-size: 10px !important;

  }
  section#gameStarted-section {
    row-gap: 20px !important;
  }
  .stats {
    gap: 5px !important;
  }
  .moves.font-x-large img {
    width: 15px !important;
  }
  .d-flex.gap-10.level-count {
    font-size: medium !important;
    gap: 3px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .timer.font-x-large.d-flex.gap-5.align-items-center {
    gap: 2px !important;
  }
  .timer.font-x-large.d-flex.gap-5.align-items-center img {
    width: 14px !important;
  }
  span#soundOn-btn img {
    width: 20px !important;
  }
  span#soundOff-btn img {
    width: 20px !important;
  }
  button.printLevel-Btn.normal.home {
    font-size: xx-small;
    width: 55px !important;
    right: 15px !important;
    top: 32px !important;
  }
  button.printLevel-Btn.normal.home img {
    width: 10px !important;
  }
  button.backToHome-btn.normal.home {
    position: absolute !important;
    right: 3% !important;
    /*    top: 112% !important;*/
    padding: 0px 0px 0px 0px !important;
  }
  button.backToHome-btn.normal.home img {
    width: 22px !important;
  }
  .font-x-large {
    font-size: large !important;
  }
  div#wrap {
    /*    margin-top: 80% ;*/
  }
  .card,
  .inside {
    width: 70px !important;
    height: 110px !important;
  }
  .front,
  .back {
    width: 62px !important;
    height: 110px !important;
  }
  .home {
  }
  .front img,
  .back img {
    width: 62px !important;
    height: 110px !important;
  }
  #printgame-section {
    padding: 20px !important;
  }
  #playgame-section {
    padding: 20px !important;
  }
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .d-flex.background-upload.w-100.position-absolute.gap-5 {
    display: flex;
    flex-direction: column;
    width: 13%;
    position: absolute;

    right: 18px;

    top: 10px !important;
  }
}

.game-header {
  background: white;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid black;
}
.level-count {
  font-size: x-large;
  background: black;
  color: white;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
button {
  padding: 0.9rem 3rem 0.9rem 3rem;
  font-weight: 800;
  border-radius: 8px;
  align-items: center;
  transition: 0.2s ease-in-out;
  cursor: pointer;
  color: #183153;
}

button.invert {
  background: black;
  color: white;
}
@keyframes flipBack {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-180deg);
  }
}

button.invert:hover {
  border-top: 2px solid #183153;
  border-right: 2px solid #183153;
  border-left: 2px solid #183153;
  border-bottom: 7px solid #183153;
}

button.normal {
  background: white;
  border-top: 2px solid black;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 7px solid black;
  border-color: black;
  cursor: pointer;
}
button.normal:hover {
  background: rgb(195 198 209);
  border-top: 2px solid #183153;
  border-right: 2px solid #183153;
  border-left: 2px solid #183153;
  border-bottom: 7px solid #183153;
  cursor: pointer;
}

.w-25px {
  width: 25px;
}
.h-40px {
  height: 40px;
}
#soundOff-btn {
  display: none;
}
.wrap {
  position: relative;
  height: 100%;
  min-height: 500px;
}
.game {
  transform-style: preserve-3d;
  perspective: 500px;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 60%;
  margin: auto;
  gap: 5px;
}
.background-upload {
  justify-content: flex-end;
  top: 9% !important;
  margin-right: 2%;
}
.level2 {
  width: 72%;
}
.level3 {
  width: 60%;
}
.level3 .card {
  width: 105px;
  height: 140px;
}
.level3 .card .inside {
  width: 105px;
  height: 140px;
}
.level3 .card .inside .front,
.level3 .card .inside .back {
  width: 100px;
  height: 140px;
}
.level3 .card .inside .front img,
.level3 .card .inside .back img {
  width: 100px;
  height: 140px;
}
.level4 {
  width: 50%;
}
.level4 .card {
  width: 80px;
  height: 98px;
}
.level4 .card .inside {
  width: 80px;
  height: 98px;
}
.level4 .card .inside .front,
.level4 .card .inside .back {
  width: 71px;
  height: 98px;
}
.level4 .card .inside .front img,
.level4 .card .inside .back img {
  width: 71px;
  height: 98px;
}
.level5 {
  width: 60%;
}
.printLevel-Btn {
  padding: 4px 9px 2px 6px !important;
}
.printlevel-btn: hover {
  opacity: 0.9 !important;
  background: black !important;
}

@keyframes matchAnim {
  0% {
    background: #bcffcc;
  }
  100% {
    background: white;
  }
}
.card {
  margin: 5px;
  object-fit: fill;
  border-radius: 5px;
  float: left;
  width: 120px;
  height: 165px;
  text-align: center;
  display: block;
  perspective: 500px;
  position: relative;
  cursor: pointer;
  z-index: 50;
}
.image-counter {
  margin-top: 7px;
    direction: rtl; 
}
button.normal.home {
  padding: 5px 8px 4px 8px;
  position: absolute;
  padding: 5px 8px 4px 8px;
  right: 20px;
  top: 20px;
}
.image-url-input {
  border-radius: 10px;
  border: 2px solid black;
  padding: 5px;
  width: 185px;
  border-bottom: 7px solid black;
  resize: none;
  padding-left: 8px;
  font-weight: bold;
}
.inside {
  width: 107px;
  height: 140px;
  display: block;
  transform-style: preserve-3d;
  transition: 0.5s ease-in-out;
  &.picked,
  &.matched {
    transform: rotateY(180deg);
  }
  &.matched {
    animation: 2s matchAnim ease-in-out;
    animation-delay: 0.4s;
  }
}
.front,
.back {
  border: 4px solid white;
  backface-visibility: hidden;
  position: absolute;
  width: 100px;
  height: 165px;
  img {
    width: 100px;
    height: 165px;
    display: block;
    margin: 0 auto;
  }
}
.front {
  transform: rotateY(-180deg);
  object-fit: cover;
}
.back {
  transform: rotateX(0);
  object-fit: cover;
}
.modal-overlay {
  display: block;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal {
  display: block;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 500px;
  height: 400px;
  max-height: 90%;
  max-width: 90%;
  min-height: 380px;
  margin: 0 auto;
  background: white;
  top: 50%;
  transform: translateY(-50%);
  padding: 30px 10px;
}
.winner {
  font-size: 80px;
  text-align: center;
  font-family: "Anton", sans-serif;
  color: #4d4d4d;
  text-shadow: 0px 3px 0 black;
  @include width(480px) {
    font-size: 60px;
  }
}
.message {
  text-align: center;
  a {
    text-decoration: none;
    color: #28afe6;
    font-weight: bold;
    &:hover {
      $c: lighten(#28afe6, 10%);
      color: $c;
      border-bottom: 1px dotted $c;
    }
  }
}
.share-text {
  text-align: center;
  margin: 10px auto;
}

.padding-x-2xl {
  padding-right: calc(1em * 2) !important;
  padding-right: var(--spacing-2xl) !important;
  padding-left: calc(1em * 2) !important;
  padding-left: var(--spacing-2xl) !important;
}

.display-block {
  display: block;
}