@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi+Fun:wght@400..700&display=swap');

:root{
   --ziit: 1s;
   --delay: 0.5s;
   }

body {
   background-color:  #F0E2C5;
   margin: 0;
   padding: 0;
   overflow: hidden;
}

.cursor{
   z-index: 999;
   position: fixed;
   background: #f6a4d4;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   pointer-events: none;
   box-shadow: 0 0 20px #f6a4d4,
               0 0 60px   #f6a4d4,
               0 0 100px #f6a4d4;
   animation: colors 5s infinite;
   transform: translate(-50%,-50%);
   display: none;
}

@keyframes colors{
0%{
   filter: hue-rotate(0deg);
}
100%{
   filter: hue-rotate(360deg);
}
}

.cursor:before{
   content:"" ;
   position: absolute;
   background: #f6a4d4;
   width: 50px;
   height: 50px;
   opacity: 0.2;
   transform: translate(-30%, -30%);
   border-radius: 50%;
}

.parentcontainer {
   display: grid;
   box-sizing: border-box;
   gap: 5px;
   grid-template-columns: repeat(10, auto);
   grid-template-rows: repeat(9, auto);
   min-height:calc(100vh);
   background-color: transparent;
}

.flip-card {
   vertical-align: text-top;
   text-align: center;
   font-family: "Reem Kufi Fun", sans-serif;
   font-weight: 700;
   font-style: normal;  
   background-color: transparent;
   perspective: 1000px;
   animation-duration: var(--ziit);
}

.flip-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   text-align: center;
   vertical-align: middle;
   transition: transform 0.8s;
   transform-style: preserve-3d;
   transition-delay: 8s;
}

.flip-card:hover .flip-card-inner {
   transform: rotateY(180deg);
   transition-delay: 0s;
}

.flip-card-front,
.flip-card-back {
   position: absolute;
   width: 100%;
   height: 100%;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.flip-card-front {
   background-color:  #212021;
   color: #212021;
}

.flip-card-back {
   background-color: #212021;
   color: #F0E2C5;
   transform: rotateY(180deg);
}

  
.start {
   background-color: transparent;
   transform: scale(-1, 1) translateY(-500vh);
   grid-row: 1/11;
   grid-column: 5/11;
   font-size: 60vh;
   animation-name: one; 
   animation-delay: calc(var(--delay) * 0);
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
   
@keyframes one {
from{
   transform:scale(-1, 1) translateX(-500vh);
}
to{
   transform:scale(-1, 1) translateX(0);
}
}

.Y {
   background-color: transparent;
   transform: scale(-1, 1) translateY(-500vh);
   grid-row: 1/5;
   grid-column: 1/5;
  font-size: 25vh;
  animation-name: two;
  animation-delay: calc(var(--delay) * 1);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
  
@keyframes two {
from{
   transform:scale(-1, 1) translateY(-500vh);
}
to{
   transform:scale(-1, 1) translateY(0);
}
}

.P1 {
   background-color: transparent;
   transform: scale(-1, 1)  translateX(500vh);
   grid-row: 5/8;
   grid-column: 3/5;
   font-size: 15vh;
   animation-name: third;
   animation-delay: calc(var(--delay) * 2); 
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
  
@keyframes third {
from{
   transform: scale(-1, 1) translateX(500vh);
}
to{
   transform: scale(-1, 1) translateX(0);
}
}

.O {
   transform: scale(-1, 1)  translateX(500vh);
   grid-row: 5/8;
   grid-column: 1/3;
   font-size: 15vh;
   animation-name: four;
   animation-delay: calc(var(--delay) * 3);
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
   
@keyframes four {
from{
   transform: scale(-1, 1) translateX(500vh);
}
to{
   transform: scale(-1, 1) translateX(0);
}
}
 
   
.G {
   transform: scale(-1, 1)  translateX(500vh);
   grid-column: 4/5;
   grid-row: 8/10;
   font-size: 10vh;
   animation-name: five;
   animation-delay: calc(var(--delay) * 4);
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
   
@keyframes five {
from{
   transform: scale(-1, 1) translateX(500vh);
}
to{
   transform: scale(-1, 1) translateX(0);
}
}

.R {
   transform: scale(-1, 1) translateY(500vh);
   grid-column: 2/4;
   grid-row: 8/10;
   font-size: 10vh;
   animation-name: six;
   animation-delay: calc(var(--delay) * 5);
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
   
@keyframes six {
from{
   transform: scale(-1, 1) translateY(500vh);
}
to{
   transform: scale(-1, 1) translateY(0);
}
}

.A {
   transform: scale(-1, 1) translateY(500vh);
   grid-column: 1;
   grid-row: 8/10;
   font-size: 10vh;
   animation-name: seven;
   animation-delay: calc(var(--delay) * 6);
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
   
@keyframes seven {
from{
   transform: scale(-1, 1) translateY(500vh);
}
to{
   transform: translateY(0);
}
}

.P {
   transform: scale(-1, 1) translateY(500vh);
   grid-column: 4;
   grid-row: 10;
   font-size: 5vh;
   animation-name: eight;
   animation-delay: calc(var(--delay) * 7);
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
   
@keyframes eight {
from{
   transform: scale(-1, 1) translateY(500vh);
}
   to{
   transform: scale(-1, 1) translateY(0);
}
}

.H {
   transform: scale(-1, 1) translateY(500vh);
   grid-column: 3;
   grid-row: 10;
   font-size: 5vh;
   animation-name: nine;
   animation-delay: calc(var(--delay) * 8);
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
   
@keyframes nine {
from{
   transform: scale(-1, 1) translateY(500vh);
}
to{
   transform: scale(-1, 1) translateY(0);
}
}

.I {
   transform: scale(-1, 1) translateY(500vh);
   grid-column: 2;
   grid-row: 10;
   font-size: 5vh;
   animation-name: ten;
   animation-delay: calc(var(--delay) * 9);
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
   
@keyframes ten {
from{
   transform: scale(-1, 1) translateY(500vh);
}
to{
   transform: scale(-1, 1) translateY(0);
}
}

.E {
   transform: scale(-1, 1) translateY(500vh);
   grid-column: 1;
   grid-row: 10;
   font-size: 5vh;
   animation-name: eleven;
   animation-delay: calc(var(--delay) * 10);
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
   
@keyframes eleven {
from{
   transform: scale(-1, 1) translateY(500vh);
}
to{
   transform: scale(-1, 1) translateY(0);
}
}

@media (max-width: 768px) {
   body {
      background-color:#F0E2C5;
      margin: 0;
      padding: 0;
      overflow: hidden;
   }

   .parentcontainer {
      display: grid;
      box-sizing: border-box;
      gap: 5px;
      grid-template-columns: repeat(4, auto);
      grid-template-rows: repeat(7, auto);
      min-height:calc(100vh);
      background-color: transparent;

   }  

   .flip-card {
      vertical-align: text-top;
      text-align: center;
      font-family: "Reem Kufi Fun", sans-serif;
      font-weight: 700;
      font-style: normal;  
      background-color: transparent;
      perspective: 1000px;
      animation-duration: var(--ziit);
   }

   .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      vertical-align: middle;
      transition: transform 0.8s;
      transform-style: preserve-3d;
      transition-delay: 6s;
   }

   .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
      transition-delay: 0s;
  }

  .flip-card-front,
  .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

   .flip-card-front {
      background-color:  #212021;
      color: #212021;
   }

   .flip-card-back {
      background-color: #212021;
      color: #F0E2C5;
      transform: rotateY(180deg);
  }

   .start {
      transform: scale(-1, 1) translateY(-500vh);
      grid-row: 1/6;
      grid-column: 2/5;
      font-size: 40vh;
      animation-name: one; 
      animation-delay: calc(var(--delay) * 0);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes one {
   from{
      transform:scale(-1, 1) translateY(-500vh);
   }
   to{
      transform:scale(-1, 1) translateX(0);
   }
   }

   .Y {
      transform: scale(-1, 1) translateY(-500vh);
      grid-row: 6/8;
      grid-column: 3/5;
      font-size: 20vh;
      animation-name: two; 
      animation-delay: calc(var(--delay) * 1);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
      }
      
   @keyframes two {
   from{
      transform:scale(-1, 1) translateY(500vh);
   }
   to{
      transform:scale(-1, 1) translateX(0);
   }
   }


   .P1 {
      transform: scale(-1, 1) translateX(500vh); 
      grid-row: 6;
      grid-column: 2;
      font-size: 5vh;
      animation-name: three; 
      animation-delay: calc(var(--delay) * 2);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes three {
   from{
      transform:scale(-1, 1) translateY(500vh);
   }
   to{
      transform:scale(-1, 1) translateX(0);
   }
   }

   .O {
      transform: scale(-1, 1)  translateX(500vh);
      grid-row: 7;
      grid-column: 2;
      font-size: 5vh;
      animation-name: four; 
      animation-delay: calc(var(--delay) * 3);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes four {
   from{
      transform:scale(-1, 1) translateY(500vh);
   }
   to{
      transform:scale(-1, 1) translateX(0);
   }
   }

   .G {
      transform: scale(-1, 1)  translateX(500vh);
      grid-column: 1;
      grid-row: 1;
      font-size: 5vh;
      animation-name: five; 
      animation-delay: calc(var(--delay) * 4);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes five {
   from{
      transform:scale(-1, 1) translateX(500vh);
   }
   to{
      transform:scale(-1, 1) translateX(0);
   }
   }


   .R {
      transform: scale(-1, 1) translateY(500vh);
      grid-column: 1;
      grid-row: 2;
      font-size: 5vh;
      animation-name: six; 
      animation-delay: calc(var(--delay) * 5);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes six {
   from{
      transform:scale(-1, 1) translateX(500vh);
   }
   to{
      transform:scale(-1, 1) translateX(0);
   }
   }


   .A {
      transform:  scale(-1, 1) translateY(500vh);
      grid-column: 1;
      grid-row: 3;
      font-size: 5vh;
      animation-name: seven; 
      animation-delay: calc(var(--delay) * 6);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes seven {
   from{
      transform:scale(-1, 1) translateX(500vh);
   }
   to{
      transform:scale(-1, 1) translateX(0);
   }
   }

   .P {
      transform:  scale(-1, 1) translateY(500vh);
      grid-column: 1;
      grid-row: 4;
      font-size: 5vh;
      animation-name: eight; 
      animation-delay: calc(var(--delay) * 7);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes eight {
   from{
      transform:scale(-1, 1) translateX(500vh);
   }
   to{
      transform:scale(-1, 1) translateX(0);
   }
   }

   .H {
      transform: scale(-1, 1) translateY(500vh);
      grid-column: 1;
      grid-row: 5;
      font-size: 5vh;
      animation-name: nine; 
      animation-delay: calc(var(--delay) * 8);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes nine {
   from{
      transform:scale(-1, 1) translateX(500vh);
   }
   to{
      transform:scale(-1, 1) translateX(0);
   }
   }

   .I {
      transform:  scale(-1, 1) translateY(500vh);
      grid-column: 1;
      grid-row: 6;
      font-size: 5vh;
      animation-name: ten; 
      animation-delay: calc(var(--delay) * 9);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes ten {
   from{
      transform:scale(-1, 1) translateY(500vh);
   }
   to{
      transform:scale(-1, 1) translateY(0);
   }
   }

   .E {
      transform: scale(-1, 1) translateY(500vh);
      grid-column: 1;
      grid-row: 7;
      font-size: 5vh;
      animation-name: eleven; 
      animation-delay: calc(var(--delay) * 10);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes eleven {
   from{
      transform:scale(-1, 1) translateY(500vh);
   }
   to{
      transform:scale(-1, 1) translateY(0);
   }
   }
}

@media (max-width: 640px) {
   body {
      background-color: #F0E2C5;
      margin: 0;
      padding: 0;
      overflow: hidden;
   }

   .parentcontainer {
      display: grid;
      box-sizing: border-box;
      gap: 5px;
      grid-template-columns: repeat(5, auto);
      grid-template-rows: repeat(6, auto);
      min-height:calc(100vh);
   }

   .flip-card {
      vertical-align: text-top;
      text-align: center;
      font-family: "Reem Kufi Fun", sans-serif;
      font-weight: 700;
      font-style: normal;  
      background-color: transparent;
      perspective: 1000px;
      animation-duration: var(--ziit);
   }

   .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      vertical-align: middle;
      transition: transform 0.8s;
      transform-style: preserve-3d;
      transition-delay: 6s;
   }

   .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
      transition-delay: 0s;
  }

  .flip-card-front,
  .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

   .flip-card-front {
      background-color:  #212021;
      color: #212021;
   }

   .flip-card-back {
      background-color: #212021;
      color: #F0E2C5;
      transform: rotateY(180deg);
  }
   .start {
      transform: scale(-1, 1) translateY(-500vh);
      grid-row: 1/4;
      grid-column: 1/6;
      font-size: 40vh;
      animation-name: one; 
      animation-delay: calc(var(--delay) * 0);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes one {
   from{
      transform:scale(-1, 1) translateY(-500vh);
   }
   to{
      transform:scale(-1, 1) translateY(0);
   }
   }

   .Y {
      transform: scale(-1, 1) translateY(500vh);
      grid-row: 4;
      grid-column: 5;
      font-size: 5vh;
      animation-name: two;
      animation-delay: calc(var(--delay) * 1);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes two {
   from{
      transform:scale(-1, 1) translateY(500vh);
   }
   to{
      transform:scale(-1, 1) translateY(0);
   }
   }

   .P1 {
      transform:  scale(-1, 1) translateX(500vh); 
      grid-row: 4;
      grid-column: 4;
      font-size: 5vh;
      animation-name: third;
      animation-delay: calc(var(--delay) * 2); 
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes third {
   from{
      transform: scale(-1, 1) translateX(500vh);
   }
   to{
      transform: scale(-1, 1) translateX(0);
   }
   }


   .O {
      transform: scale(-1, 1)  translateX(500vh);
      grid-row: 4;
      grid-column: 3;
      font-size: 5vh;
      animation-name: four;
      animation-delay: calc(var(--delay) * 3);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes four {
   from{
      transform: scale(-1, 1) translateX(500vh);
   }
   to{
      transform: scale(-1, 1) translateX(0);
   }
   }
    

   .G {
      transform:  scale(-1, 1)  translateX(500vh);
      grid-row: 4;
      grid-column: 2;
      font-size: 5vh;
      animation-name: five;
      animation-delay: calc(var(--delay) * 4);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes five {
   from{
      transform: scale(-1, 1) translateX(500vh);
   }
   to{
      transform: scale(-1, 1) translateX(0);
   }
   }

   .R {
      transform: scale(-1, 1) translateY(500vh);
      grid-row: 4;
      grid-column: 1;
      font-size: 5vh;
      animation-name: six;
      animation-delay: calc(var(--delay) * 5);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes six {
   from{
      transform: scale(-1, 1) translateY(500vh);
   }
   to{
      transform: scale(-1, 1) translateY(0);
   }
   }

   .A {
      transform: scale(-1, 1) translateY(500vh);
      grid-row: 5/7;
      grid-column: 5;
      font-size: 10vh;
      animation-name: seven;
      animation-delay: calc(var(--delay) * 6);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes seven {
   from{
      transform: scale(-1, 1) translateY(500vh);
   }
   to{
      transform: translateY(0);
   }
   }
   

   .P {
      transform: scale(-1, 1) translateY(500vh);
      grid-row: 5/7;
      grid-column: 4;
      font-size: 10vh;
      animation-name: eight;
      animation-delay: calc(var(--delay) * 7);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes eight {
   from{
      transform: scale(-1, 1) translateY(500vh);
   }
   to{
      transform: scale(-1, 1) translateY(0);
   }
   }

   .H {
      transform: scale(-1, 1) translateY(500vh);
      grid-row: 5/7;
      grid-column: 3;
      font-size: 10vh;
      animation-name: nine;
      animation-delay: calc(var(--delay) * 8);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes nine {
   from{
      transform: scale(-1, 1) translateY(500vh);
   }
   to{
      transform: scale(-1, 1) translateY(0);
   }
   }
   

   .I {
      transform: scale(-1, 1) translateY(500vh);
      grid-row: 5/7;
      grid-column: 2;
      font-size: 10vh;
      animation-name: ten;
      animation-delay: calc(var(--delay) * 9);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes ten {
   from{
      transform: scale(-1, 1) translateY(500vh);
   }
   to{
      transform: scale(-1, 1) translateY(0);
   }
   }
   

   .E {
      transform: scale(-1, 1) translateY(500vh);
      grid-row: 5/7;
      grid-column: 1;
      font-size: 10vh;
      animation-name: eleven;
      animation-delay: calc(var(--delay) * 10);
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
      
   @keyframes eleven {
   from{
      transform: scale(-1, 1) translateY(500vh);
   }
   to{
      transform: scale(-1, 1) translateY(0);
   }
   }
   
}