.landing{
width: 100vw;
height: 100vh;
}
.landing section{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
 }
.landing section .text{
width: 90%;
height: 60%;
display: grid;
grid-auto-flow: column;
justify-content: center;
align-content: center;
align-items: center;
/* text-shadow:  0 0 0.4vw currentColor; */
margin-top: 16vh ;
}
.landing section .text
.landing section p{
/* backdrop-filter:  blur(10px); */
} 
.landing section .text span{
font-size: 6.8vw;
font-family: 'neontubes';
letter-spacing: 0.7vw;
background: #050505b2;
color: #00efff;
 animation: hue_roatate  5s linear infinite;
 height: fit-content;
 text-align: center;
}
.landing section  p{
font-size: 2vw;
font-family: 'neontubes';
letter-spacing: 0.2vw;
background: #050505b2;
color: #d4eaff;
text-shadow: 0 0 0 transparent, 0 0 0.5vw #ff003c, 0 0 1.1vw rgba(255, 0, 60, 0.5), 0 0 2.1vw #ff003c ;     
 animation: hue_roatate  5s linear infinite;
padding: 0.2vw;
box-shadow: 0 0 0.55vw 0.15vw, inset 0 0 0.35vw 0.2vw #ff003c;
}
.landing section .text span:nth-child(1){border-radius: 32% 0 0 32%; }
.landing section .text span:nth-last-child(1){border-radius: 0 32% 32% 0; }
@media only screen and (max-width: 990px) {
     .landing section p{
     font-size: 3vh;
     padding: 0.2vh;
     margin-left:  2.8vh;
     margin-right:  2.8vh;
     text-align: center;
     }}
@media only screen and (max-width: 768px) {
          .landing section .text {
               grid-gap: 1vw 0;
          }
          .landing section .text span{
               font-size: 12vw;
               padding: 0 1.2vw 0 0vw;
               letter-spacing: 0;
          }

.landing section .text span:nth-child(1){
     grid-column: 5;
      grid-row: 1;
}
.landing section .text span:nth-child(2){
     grid-column: 6;
      grid-row: 1;
}
.landing section .text span:nth-child(3){
     grid-column: 1;
      grid-row: 2;
}
.landing section .text span:nth-child(4){
     grid-column: 2;
      grid-row: 2;
}
.landing section .text span:nth-child(5){
     grid-column: 3;
      grid-row: 2;
}
.landing section .text span:nth-child(6){
     grid-column: 4;
      grid-row: 2;
}
.landing section .text span:nth-child(7){
     grid-column: 5;
      grid-row: 2;
}
.landing section .text span:nth-child(8){
     grid-column: 6;
      grid-row: 2;
}
.landing section .text span:nth-child(9){
     grid-column: 7;
      grid-row: 2;
}
.landing section .text span:nth-child(10){
     grid-column: 8;
      grid-row: 2;
}
.landing section .text span:nth-child(11){
     grid-column: 9;
      grid-row: 2;
}

.landing section .text span:nth-child(12){
     grid-column: 10;
      grid-row: 2;
}
.landing section .text span:nth-child(13){
     grid-column: 11;
      grid-row: 2;
}
.landing section .text span:nth-child(14){
     grid-column: 3;
      grid-row: 3;
}
.landing section .text span:nth-child(15){
     grid-column: 4;
      grid-row: 3;
}
.landing section .text span:nth-child(16){
     grid-column: 5;
      grid-row: 3;
}
.landing section .text span:nth-child(17){
     grid-column: 6;
      grid-row: 3;
}
.landing section .text span:nth-child(18){
     grid-column: 7;
      grid-row: 3;
}
.landing section .text span:nth-child(19){
     grid-column: 8;
      grid-row: 3;
}
.landing section .text span:nth-child(20){
     grid-column: 9;
      grid-row: 3;
}
.landing section .text span:nth-child(2){border-radius: 0 32% 32% 0; }
.landing section .text span:nth-child(13){border-radius: 0 32% 32% 0; }
.landing section .text span:nth-child(20){border-radius: 0 32% 32% 0; }

.landing section .text span:nth-child(3){border-radius: 32% 0 0 32%; }
.landing section .text span:nth-child(14){border-radius: 32% 0 0 32%; }
  }