@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi+Fun:wght@400..700&display=swap');


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

.parentflex {
   font-size: 20px;
   color: #44372D;
   font-family: "Reem Kufi Fun", sans-serif;
   font-weight: 700;
   font-style: normal;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
}

.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 - 70px);
}

.parentflex+.parentcontainer {
   margin-top: 40px;
}


.child {
   vertical-align: text-top;
   text-align: center;
   color: #F0E2C5;
   font-family: "Reem Kufi Fun", sans-serif;
   font-weight: 700;
   font-style: normal;
   background-color: #212021;
}

.start {
   transform: scale(-1, 1);
   grid-row: 1/11;
   grid-column: 5/11;
   font-size: 60vh;
   
}

.Y {
   transform: scale(-1, 1);
   grid-row: 1/5;
   grid-column: 1/5;
  font-size: 25vh;
   
}

.P1 {
   transform: scale(-1, 1);
   grid-row: 5/8;
   grid-column: 3/5;
  font-size: 15vh;
}

.O {
   transform: scale(-1, 1);
   grid-row: 5/8;
   grid-column: 1/3;
   font-size: 15vh;
}

.G {
   transform: scale(-1, 1);
   grid-column: 4/5;
   grid-row: 8/10;
   font-size: 10vh;
}

.R {
   transform: scale(-1, 1);
   grid-column: 2/4;
   grid-row: 8/10;
   font-size: 10vh;
}

.A {
   transform: scale(-1, 1);
   grid-column: 1;
   grid-row: 8/10;
   font-size: 10vh;
}

.P {
   transform: scale(-1, 1);
   grid-column: 4;
   grid-row: 10;
   font-size: 5vh;
}

.H {
   transform: scale(-1, 1);
   grid-column: 3;
   grid-row: 10;
   font-size: 5vh;
}

.I {
   transform: scale(-1, 1);
   grid-column: 2;
   grid-row: 10;
   font-size: 5vh;
}

.E {
   transform: scale(-1, 1);
   grid-column: 1;
   grid-row: 10;
   font-size: 5vh;
}



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

   .parentflex {
      font-size: 20px;
      color: #44372D;
      font-family: "Reem Kufi Fun", sans-serif;
      font-weight: 700;
      font-style: normal;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
   }

   .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 - 70px);
   }

   .parentflex+.parentcontainer {
      margin-top: 40px; 
   }


   .child {
      vertical-align: text-top;
      text-align: center;
      color: #F0E2C5;
      font-family: "Reem Kufi Fun", sans-serif;
      font-weight: 700;
      font-style: normal;
      background-color: #212021; 
   }

   .start {
      transform: scale(-1, 1);
      grid-row: 1/6;
      grid-column: 2/5;
      font-size: 40vh;
   }

   .Y {
      transform: scale(-1, 1);
      grid-row: 6/8;
      grid-column: 3/5;
      font-size: 20vh;
   }

   .P1 {
      transform: scale(-1, 1);
      grid-row: 6;
      grid-column: 2;
      font-size: 5vh;
   }

   .O {
      transform: scale(-1, 1);
      grid-row: 7;
      grid-column: 2;
      font-size: 5vh;
   }

   .G {
      transform: scale(-1, 1);
      grid-column: 1;
      grid-row: 1;
      font-size: 5vh;
   }

   .R {
      transform: scale(-1, 1);
      grid-column: 1;
      grid-row: 2;
      font-size: 5vh;
   }

   .A {
      transform: scale(-1, 1);
      grid-column: 1;
      grid-row: 3;
      font-size: 5vh;
   }

   .P {
      transform: scale(-1, 1);
      grid-column: 1;
      grid-row: 4;
      font-size: 5vh;
   }

   .H {
      transform: scale(-1, 1);
      grid-column: 1;
      grid-row: 5;
      font-size: 5vh;
   }

   .I {
      transform: scale(-1, 1);
      grid-column: 1;
      grid-row: 6;
      font-size: 5vh;
   }

   .E {
      transform: scale(-1, 1);
      grid-column: 1;
      grid-row: 7;
      font-size: 5vh;
   }
}

@media (max-width: 640px) {
   body {
      background-color: #F0E2C5;
      margin: 0;
      padding: 0;
      overflow: hidden;
   }
   
   .parentflex {
      font-size: 20px;
      color: #44372D;
      font-family: "Reem Kufi Fun", sans-serif;
      font-weight: 700;
      font-style: normal;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
   }
   
   .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 - 70px);
   }
   
   .parentflex+.parentcontainer {
      margin-top: 40px;
   }
   
   .child {
      vertical-align: text-top;
      text-align: center;
      color: #F0E2C5;
      font-family: "Reem Kufi Fun", sans-serif;
      font-weight: 700;
      font-style: normal;
      background-color: #212021;
   }

   .start {
      transform: scale(-1, 1);
      grid-row: 1/4;
      grid-column: 1/6;
      font-size: 40vh;
   }

   .Y {
      transform: scale(-1, 1);
      grid-row: 4;
      grid-column: 5;
      font-size: 5vh;
   }

   .P1 {
      transform: scale(-1, 1);
      grid-row: 4;
      grid-column: 4;
      font-size: 5vh;
      }

   .O {
      transform: scale(-1, 1);
      grid-row: 4;
      grid-column: 3;
      font-size: 5vh;
   }

   .G {
      transform: scale(-1, 1);
      grid-row: 4;
      grid-column: 2;
      font-size: 5vh;
   }

   .R {
      transform: scale(-1, 1);
      grid-row: 4;
      grid-column: 1;
      font-size: 5vh;
   }

   .A {
      transform: scale(-1, 1);
      grid-row: 5/7;
      grid-column: 5;
      font-size: 10vh;
   }

   .P {
      transform: scale(-1, 1);
      grid-row: 5/7;
      grid-column: 4;
      font-size: 10vh;
   }

   .H {
      transform: scale(-1, 1);
      grid-row: 5/7;
      grid-column: 3;
      font-size: 10vh;
   }

   .I {
      transform: scale(-1, 1);
      grid-row: 5/7;
      grid-column: 2;
      font-size: 10vh;
   }

   .E {
      transform: scale(-1, 1);
      grid-row: 5/7;
      grid-column: 1;
      font-size: 10vh;
   }
}