@keyframes hero-gradient-animation {
    0% {
        --x-0: 11%;
        --y-0: 96%;
        --s-start-0: 37%;
        --s-end-0: 90%;
        --c-0: hsla(181, 79%, 51%, 1);
        --y-1: 89%;
        --c-1: hsla(258, 100%, 64%, 1);
        --x-1: 92%;
        --s-start-1: 31%;
        --s-end-1: 84%;
        --c-2: hsla(202.00000000000003, 81%, 44%, 1);
        --s-start-2: 41%;
        --s-end-2: 61%;
        --x-2: 58%;
        --y-2: 7%;
        --s-start-3: 22%;
        --s-end-3: 59%;
        --c-3: hsla(225, 76%, 52%, 1);
        --x-3: 62%;
        --y-3: 35%;
        --s-start-4: 19%;
        --s-end-4: 70%;
        --x-4: 2%;
        --c-4: hsla(218, 81%, 92%, 1);
        --y-4: 63%;
    }

    100% {
        --x-0: 6%;
        --y-0: 12%;
        --s-start-0: 29%;
        --s-end-0: 73%;
        --c-0: hsla(299, 78%, 76%, 1);
        --y-1: 6%;
        --c-1: hsla(221, 87%, 56%, 1);
        --x-1: 61%;
        --s-start-1: 8%;
        --s-end-1: 80%;
        --c-2: hsla(206, 51%, 96%, 1);
        --s-start-2: 29%;
        --s-end-2: 80%;
        --x-2: 75%;
        --y-2: 23%;
        --s-start-3: 2%;
        --s-end-3: 81%;
        --c-3: hsla(204, 76%, 75%, 1);
        --x-3: 76%;
        --y-3: 64%;
        --s-start-4: 24%;
        --s-end-4: 81%;
        --x-4: 41%;
        --c-4: hsla(301, 89%, 98%, 1);
        --y-4: 86%;
    }
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 11%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 96%
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 37%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 90%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(181, 79%, 51%, 1)
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 89%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(258, 100%, 64%, 1)
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 92%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 84%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(202.00000000000003, 81%, 44%, 1)
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 41%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 61%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 59%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(225, 76%, 52%, 1)
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 62%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 35%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 19%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 70%
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(218, 81%, 92%, 1)
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63%
}

body {
    --x-0: 11%;
    --y-0: 96%;
    --c-0: hsla(181, 79%, 51%, 1);
    --y-1: 89%;
    --c-1: hsla(258, 100%, 64%, 1);
    --x-1: 92%;
    --c-2: hsla(202.00000000000003, 81%, 44%, 1);
    --x-2: 58%;
    --y-2: 7%;
    --c-3: hsla(225, 76%, 52%, 1);
    --x-3: 62%;
    --y-3: 35%;
    --x-4: 2%;
    --c-4: hsla(218, 81%, 92%, 1);
    --y-4: 63%;
    ;
    background-color: hsla(258, 82%, 70%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal, normal;
}

.wrapper {
    background-color: hsla(197, 92%, 60%, 1);
    background-image: radial-gradient(circle at 96% 96%, hsla(55.36363636363636, 93%, 54%, 0.85) 5%, transparent 86%), radial-gradient(circle at 5% 90%, hsla(229, 71%, 68%, 1) 13%, transparent 65%), radial-gradient(circle at 57% 73%, hsla(308, 93%, 51%, 1) 3%, transparent 89%), radial-gradient(circle at 20% 4%, hsla(318, 60%, 76%, 1) 22%, transparent 56%), radial-gradient(circle at 74% 15%, hsla(324, 92%, 59%, 1) 13%, transparent 57%);
    background-blend-mode: normal, normal, normal, normal, normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

  #logo {
  aspect-ratio: 1/3;
  object-fit: contain;
 max-height: 120px;
  margin: 0 auto;
  position: absolute;
  top: -4px;
  margin-top: 15px;

}
 
 img {
  aspect-ratio: 2/3;
  width: 100%;
  object-fit: fill;
}  

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  
}

.score-panel {
  margin-bottom: 540px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  max-width: 600px;
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 3px 15px rgba(58, 58, 60, 0.7);
  z-index: 1; /* Ensure it's above the cards */
  border: 1px solid #030303;
  margin-top: 140px;
}

.restart {
  cursor: pointer;
  border: 1px solid #6563ff;
  border-radius: 13px;
  border-width: 2px;
  padding: 0 20px;
}

.restart:hover {
  background-color: #6563ff;
  color: #fff;
}


/* .cards, .card, .view {
  display: flex;
  align-items: center;
  justify-content: center;
} */

.cards {
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* .cards .card {
  cursor: pointer;
  position: relative;
  perspective: 800px;
 backface-visibility: visible; 
  transform-style:preserve-3d;
  height: calc(100% / 4 - 10px);
  width: calc(100% / 4 - 10px);
} */

.front-view span {
  display: flex;
  align-items: center;
  justify-content: center;
}



.card .front-view span{
  color:#6563ff ;
  font-size: 60px;
  
  
}
.card .back-view {
  transform: rotateY(-180deg);
}



/* 
.card:hover .front-view {
   transform: rotateY(180deg);
}


.card:hover .back-view {
   transform: rotateY(0);
} */



 .cards .card .view {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
  border-radius: 7px;
  transition: transform 0.25s linear;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
 
.card .back-view img{
  max-width: 50%;
 
}

 body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.wrapper{
  position:absolute;
  padding: 25px;
  border: 1px solid #030303;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  margin-top: 130px;
}
.cards, .card, .view{
  display: flex;
  align-items: center;
  justify-content: center;
}
.cards{
  height: 400px;
  width: 400px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cards .card{
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  height: calc(100% / 4 - 10px);
  width: calc(100% / 4 - 10px);
}
.card.shake{
  animation: shake 0.35s ease-in-out;
}
@keyframes shake {
  0%, 100%{
    transform: translateX(0);
  }
  20%{
    transform: translateX(-13px);
  }
  40%{
    transform: translateX(13px);
  }
  60%{
    transform: translateX(-8px);
  }
  80%{
    transform: translateX(8px);
  }
}
.card .view{
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 7px;
  background: #fff;
  pointer-events: none;
  backface-visibility: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: transform 0.25s linear;
}
.card .front-view span{
  width: 19px;
}
.card .back-view img{
  max-width: 45px;
}
.card .back-view{
  transform: rotateY(-180deg);
}
.card.flip .back-view{
  transform: rotateY(0);
}
.card.flip .front-view{
  transform: rotateY(180deg);
}



@media screen and (max-width: 700px) {
  .cards{
    height: 350px;
    width: 350px;
  }
  .card .front-view img{
    width: 17px;
  }
  .card .back-view img{
    max-width: 40px;
  }
}
@media screen and (max-width: 530px) {
  .cards{
    height: 300px;
    width: 300px;
  }
  .card .front-view img{
    width: 15px;
  }
  .card .back-view img{
    max-width: 35px;
  }
}

@media screen and (max-width: 420px){
  .score-panel {
    padding: 10px 10px;
  }
}


@media screen and (max-width:1027px){
  .wrapper {
    display: flex;
    justify-content: center;
    margin-right: 2px;
    
  }

  #logo {
   height: 400px;
 
  }
}