@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
  body{background-color: #ffffff;display: flex;justify-content: center;
    overflow-x: hidden;  }

  div{border: none;}
 .container1{background-color: #F6F5F0;

             width: 100vw;
              display: grid;
              grid-template-rows: 100px 100px 300px 100px 100px;
              grid-template-columns:10vw 80vw 10vw;


              gap: 0px;
             }
  .baner1{background-color:#ffffff; grid-area:1/1/2/2;}
  .baner2{background-color:#ffffff; grid-area:1/2/2/3; display: flex; align-items: center; }
  .baner3{background-color:#ffffff; grid-area:1/3/2/4;border-radius: 0% 0% 100% 0%;}
  .baner4{background-color:#Ffffff; grid-area:2/1/3/2;}
  #baner4{background-color:#F6F5F0; border-radius: 100% 0% 0% 0%;width: 100%;height: 100%;}
  .baner5{ grid-area:2/2/3/3;z-index: 1;}
  .baner6{ grid-area:2/3/3/4;}
  .baner7{ grid-area:3/1/4/2;}
  .baner8{ grid-area:2/2/5/3;display: flex; align-items: center;z-index: 0;}
  .baner9{ grid-area:3/3/4/4;}
  .baner10{ grid-area:4/1/5/2;}
  .baner11{ grid-area:4/2/5/3;}
  .baner12{background-color:#ffffff; grid-area:4/3/5/4;}
  #baner12{background-color:#F6F5F0; border-radius: 0% 0% 100% 0%;width: 100%;height: 100%;}
  .baner13{background-color:#ffffff; grid-area:5/1/6/2;border-radius: 100% 0%  0 0;}
  .baner14{background-color:#ffffff; grid-area:5/2/6/3;display: flex; align-items: flex-end;;justify-content: center;}
  .baner15{background-color:#ffffff; grid-area:5/3/6/4;}



.leftimg{width: 350px;}

  .center{display: flex;justify-content: center;}

  .container{background-color: #ffff;
             width: 80vw;
              display: grid;
              grid-template-rows:10px 200px 200px auto auto 50px;
             /* grid-template-columns:repeat(12,minmax(8px, 1fr)); */
              grid-template-columns:repeat(12,1fr);
              gap: 10px;
             }
  .red{background-color:#ffffff; grid-area:1/1/2/13;}
  .w1{background-color:#ffffff; grid-area:2/1/3/13; display: flex; gap:0px; justify-content:center;}
  .w2{background-color:#ffffff;grid-area:3/1/4/5;display: flex; gap:0px;  flex-direction: column;align-items: center;}
  .w3{background-color:#fff; grid-area:3/5/4/9; display: flex; gap:0px;  flex-direction: column;align-items: center;}
  .blue{background-color:#fff; grid-area:3/9/4/13;display: flex; gap:0px;  flex-direction: column;align-items: center;}
  .w4{background-color:#F6F5F0; grid-area:4/1/5/13; border-radius: 20px;display: flex; justify-content: center;}
  .Yellow{background-color:#EFFCF6; grid-area:5/1/6/7;border-radius: 20px; display: flex; gap:0px;  flex-direction:column; align-items: center;}
  .black{background-color:#EEF2FE; grid-area:5/7/6/13;border-radius: 20px;display: flex; gap:0px; flex-direction:column; align-items: flex-start;}
  .w5{background-color:#fff;grid-area:6/1/7/13; display: flex; justify-content: space-between;}


  .tech{display: flex; gap:0px; justify-content:center;align-items: center;background-color:#ADD4DC; border-radius: 50%;width: 60px;height:60px;  font-family: 'Bebas Neu e', sans-serif; color: #002D68;}
 .tech1{background-color: #FB8C74;}
.txttech{padding:0;margin: 0;font-size: 25px; text-align: center;font-family: 'Bebas Neu e', sans-serif;color: #002D68; }
.tettech{font-size: 30px;}
.txttech1{padding:0;margin: 0;font-size: 15px; text-align: center;font-family: 'Bebas Neu e', sans-serif;color: #002D68;}
.techtech{ display: flex; gap:7px; justify-content:center; margin-top: 10px;}
.sizeimage{width: 50px;}

.howpiano{display: flex; gap:0px; justify-content:center;align-items: center;background-color:#ADD4DC; border-radius: 50%;width: 60px;height:60px;  font-family: 'Bebas Neu e', sans-serif; color: #002D68;}
.playgame{background-color: #EEC87F;}
.txtpp{padding:0;margin: 0;font-size: 25px; text-align: center;font-family: 'Bebas Neu e', sans-serif;color: #002D68; }
.tetgame{font-size: 30px;}
.txtpp1{padding:0;margin: 0;font-size: 15px; text-align: center;font-family: 'Bebas Neu e', sans-serif;color: #002D68;}
.lin{display: flex; gap:0px; justify-content:center;align-items: center;line-height:9px; margin-top: 5px;}
.lin2{display: flex; gap:0px; justify-content:center;align-items: center;line-height:9px; margin-top: 5px;}
.start{cursor: pointer;background-color: #1A808B; border-radius:10px; margin: 0px; height: 30px; width: 80px; display: flex; align-items: center;justify-content: center; color: #fff; font-weight: bold;font-family: 'Bebas Neu e', sans-serif; margin-top: 10px;}
.start1{background-color: #FA483B; border-radius:10px; margin: 0px; height: 27px; width: 70px; display: flex; align-items: center;justify-content: center; color: #fff; font-weight: bold;font-family: 'Bebas Neu e', sans-serif; margin-top: 13px;}

.hide{display: none;}


.w11{ display: flex; gap:0px; width: 100%;}
.whitekey{-webkit-tap-highlight-color: transparent; cursor: pointer;flex: 1;background-color: white;border: 1px solid #002D68; border-radius: 0px 0px 10px 10px; box-shadow: 0px 5px 1px lightgray;height:180px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;}
.blackkey{cursor: pointer;background-color: #002D68;border: 1px solid #002D68;width:80% ;height:100px; position: relative;left: 50%; border-radius: 0px 0px 10px 10px; box-shadow: 0px 5px 1px lightgray; z-index: 2;color: white;display: flex;flex-direction: column;justify-content: end;align-items: center;}
.whitekey1{flex: 1;background-color: white;border: 1px solid #002D68; border-radius: 0px 0px 10px 10px; box-shadow: none ;height:190px;}
.blackkey1{background-color: #002D68;border: 1px solid #002D68;width:80% ;height:110px; position: relative;left: 50%; border-radius: 0px 0px 10px 10px; box-shadow: none; z-index: 2;}
.txtwhite1{font-family: 'Bebas Neu e', sans-serif;}
.txtwhite{padding: 0;margin: 0; font-family: 'Bebas Neu e', sans-serif; color:#002D68;text-align: center;}
 .txtblack{padding: 0;margin: 0; font-family: 'Bebas Neu e', sans-serif; color:#fff;text-align: center; }
 .uptxt{padding:0 ;margin-bottom: 2px;margin-top: 2px;font-size: 12px;line-height:9px;     border: 1px solid #FA483B; border-radius: 5px;padding: 5px 5px;}
/*.border{border: 1px solid #FA483B; border-radius: 5px;margin-bottom: 2px;padding: 1px 5px;}*/
 .uptx1t{padding:0 ;margin-bottom: 2px;margin-top: 2px;font-size: 15px;line-height:12px;     border: 1px solid #FA483B; border-radius: 5px;padding: 5px 5px;}
.border1{padding:0 ;margin-bottom: 2px;margin-top: 2px;font-size: 15px;line-height:12px;padding: 5px 5px;}
.border2{padding:0 ;margin-bottom: 2px;margin-top: 2px;font-size: 20px;line-height:12px;padding: 5px 5px;}
.onlinekeyboard{color:#002D68;font-family: 'Satisfy', cursive; font-size: 35px;}

  .header{display: grid;
              grid-template-rows:50px;
              grid-template-columns:minmax(350px,1fr) 10fr 250px ;
              gap: 0px;
            }
   .title{font-family: 'Bebas Neu e', sans-serif;align-content: center;}
   .color1{color: #FA483B;}
   .color2{color: #002D68;}
    h2{padding: 0;margin: 0;}

    .leftheader{order:1;display: flex; align-items: center;}
    .spaceheader{order:2;}

    .rightheader{order:3;}
    .centerheader1{border:3px solid #002D68 ;  border-radius: 40px ; height: 50px;width: 150px; }
    #search {font-family: 'Bebas Neu e', sans-serif;text-align:center ;opacity: 1; padding: 10px;margin: 0;}
    #buttonsearch{height: 40px;width: 40px;border:3px solid #FA483B ;border-radius: 50%;margin: 3px; display: flex;       align-items: center; justify-content: center;}
    .search1{display: flex;       align-items: center;}


    .cont{ display: flex;   flex-direction: column;   align-items: flex-start; justify-content: center;font-family: 'Bebas Neu e', sans-serif; font-size: 16px;color: #2D2F7E;width: 100%;}
    .form{margin: 10px;width: 100%;}
    .lab{margin: 0px;}
    .form1{ margin-top: 0px;}
    .sub{background-color:#1440AB; border-radius:10px; margin: 0px; height: 30px; width: 70px; color: #E0E7FE; font-family: 'Bebas Neu e', sans-serif;font-weight: bold;}
    .logo{margin-right: 20px;}


    .cvimage{ width: 300px; margin-left: 13%; box-shadow: 10px 10px lightblue;}
    .rightdivbaner{height: 300px;width: 300px; margin-left: 13%; font-family: 'Bebas Neu e', sans-serif;line-height: 20px;text-align: left;}
    .linkedin{background-color: #1A808B; border-radius:12px; margin: 0px; height: 40px; width: 170px; display: flex; align-items: center;justify-content: center; color: #fff; font-weight: bold;}
    .link{ color: #fff; text-decoration: none;}

.about0{margin: 20px; font-family: 'Bebas Neu e', sans-serif; font-size: 16px;text-align: left;}
.list{margin: 0px;padding: 0px; font-weight: bold;color: #1D775A;}
.par{margin: 5px;line-height: 20px;color: #2D6354;}
.color3{color: #D6F6E6;}
.ddf{margin: 20px; width: 100%;}
.labale{border:3px solid #1440AB ;  border-radius: 10px ; height: 35px; margin-top: 5px; width: 70%;}
.labale1{border:3px solid #1440AB ;  border-radius: 10px ; margin-top: 5px;width: 80%;}


.pardiv{background-color: #1A808B; border-radius:20px 20px 0px 0px;  height: 40px; width: 100%; display: flex; gap:0;align-items: center;justify-content: center; font-weight: bold;font-size: 20px}
.rightdiv{background-color: #1440AB; border-radius:20px 20px 0px 0px;  height: 40px; width: 100%; display: flex; gap:0;align-items: center;justify-content: center; font-weight: bold;font-size: 20px}
.color4{color: #E0E7FE;}
.circle{cursor: pointer;height: 30px;width: 30px;border-radius:50%; background-color: #1440AB; display: flex; gap:10px;align-items: center;justify-content: center;}
.circle1{height: 25px;width: 25px;border-radius:50%; background-color: #778DCC;display: flex; gap:0;align-items: center;justify-content: center;}


.about1{margin-left:3px; font-family: 'Bebas Neu e', sans-serif; font-size: 13px;text-align: left;display: flex;gap:2px;align-items: center;}
.sizeimg{width:15px;}
.logo{order: 1;display: flex;justify-content: center;}
.logo1{order: 2;}
.logo2{order: 3;display: flex;}

.hiddencontact{display: flex;justify-content: space-between;gap: 10px; width: 90vw;height: 1px;}
.hiddenlogo{ position: relative;bottom: 245px; right:10px ;border-radius: 10px; padding: 10px;width: 200px; display: none;}
.visable{display: block;}
.display1{background-color:rgba(150, 172, 241, 0.7); border-radius: 10px; padding: 7px;width: 200px; height: 25px;margin: 5px;}   


#footer{width: 150px;}




    
/*//////////////////////////for game/////////////////////////////*/


.bodygame{display:flex;
  justify-content: center; flex-direction: column;
  align-items: center;  
  padding-bottom: 25px;
    }



.fontgame{font-family: 'Lobster', cursive; font-size: 30px; color:  #1A808B;margin: 5px;}

.font1game{ font-size: 35px; color:  #1A808B;}
.font2game{ font-size: 25px; color: #fff;}
.containergame{font-family: 'Caveat', cursive;

              max-width: 50%;
              display: grid;
             grid-template-rows: 50px minmax(10px,auto) ;
             grid-template-columns:minmax(10px,180px)  minmax(10px,180px) ;
             gap: 20px;
            
          
           }

.player1contentgame{ grid-area:1/1/2/2;display:
  flex;justify-content: center;align-items: center;}

.player2contentgame{ grid-area:1/2/2/3;display:
  flex;justify-content: center;align-items: center;}
.player1game{ background-color: #FA483B; grid-area:2/1/3/2;display:
  flex;justify-content: center;align-items: center;border-radius: 15px; width: 100%;height: auto;aspect-ratio: 1;}

.player2game{background-color:#FA483B; grid-area:2/2/3/3;display:
  flex;justify-content: center;align-items: center;border-radius: 15px;width: 100%;height: auto;aspect-ratio: 1;}



  .disecontainergame{width: 100%;height: auto;aspect-ratio: 1; padding: 10%;
   
   display: grid;
   
                    grid-template-rows: minmax(4px,40px)  minmax(4px,40px)  minmax(4px,40px) ;
                    grid-template-columns: minmax(4px,40px)  minmax(4px,40px)  minmax(4px,40px) ;
                    gap: 10%;
                   
/*

                  grid-template-rows: 40px 40px 40px;
                  grid-template-columns:40px 40px 40px;
                  gap: 20px;
*/
                }
  .dice1game{  grid-area:1/1/2/2; border-radius: 50%;}
  .dice2game{  grid-area:1/2/2/3; border-radius: 50%;}
  .dice3game{  grid-area:1/3/2/4; border-radius: 50%;}
  .dice4game{  grid-area:2/1/3/2; border-radius: 50%;}
  .dice5game{  grid-area:2/2/3/3; border-radius: 50%;}
  .dice6game{  grid-area:2/3/3/4; border-radius: 50%;}
  .dice7game{  grid-area:3/1/4/2; border-radius: 50%;}
  .dice8game{  grid-area:3/2/4/3; border-radius: 50%;}
  .dice9game{  grid-area:3/3/4/4; border-radius: 50%;}


.disecontainer2game{width: 100%;height: auto;aspect-ratio: 1; padding: 10%;
   
 display: grid;
 
                     grid-template-rows: minmax(4px,40px)  minmax(4px,40px)  minmax(4px,40px) ;
                     grid-template-columns: minmax(4px,40px)  minmax(4px,40px)  minmax(4px,40px) ;
                     gap: 10%;

                }
  .dice12game{  grid-area:1/1/2/2; border-radius: 50%;}
  .dice22game{  grid-area:1/2/2/3; border-radius: 50%;}
  .dice32game{  grid-area:1/3/2/4; border-radius: 50%;}
  .dice42game{  grid-area:2/1/3/2; border-radius: 50%;}
  .dice52game{  grid-area:2/2/3/3; border-radius: 50%;}
  .dice62game{  grid-area:2/3/3/4; border-radius: 50%;}
  .dice72game{  grid-area:3/1/4/2; border-radius: 50%;}
  .dice82game{  grid-area:3/2/4/3; border-radius: 50%;}
  .dice92game{  grid-area:3/3/4/4; border-radius: 50%;}


  .whitegame{background-color:#F6F5F0;}






/*  ......................................................   */

@media  (max-width:1000px)
{
 .phide{ display: none;}

}


    @media  (max-width:900px)
   {
    .cvimage{ width: 230px;}
   }



  @media  (max-width:775px)
   {


/* responsive body   */
    .container{background-color: #ffff;

             width: 80vw;

              display: grid;

              grid-template-rows:10px 620px 180px 180px 150px auto auto 600px 100px;
             /* grid-template-columns:repeat(12,minmax(8px, 1fr)); */
             grid-template-columns:repeat(12,1fr);

              gap: 20px;
             }


   .red{background-color:#ffffff;    grid-area:1/1/2/13;}
   .w1{background-color:#ffffff;     grid-area:2/1/3/13; align-items: center;}
   .w2{background-color:#ffffff;     grid-area:3/1/4/13;}
   .w3{background-color:#ffffff;     grid-area:4/1/5/13;}
   .blue{background-color:#ffffff;   grid-area:5/1/6/13;}
   .w4{     grid-area:6/1/7/13;}
   .Yellow{ grid-area:7/1/8/13;}
   .black{ grid-area:8/1/9/13;}
   .w5{background-color:#fff; display:flex; align-items: center;   grid-area:9/1/10/13;}
   /**********************************************************/
/*
      responsive piano  
  */
.w11{width: 620px;height: 200px;}
.whitekey{width: 30px;}

.w11{transform: rotate(90deg);}





/*.......................... */
   .header{display: grid;
              grid-template-rows:50px;
              grid-template-columns:minmax(100px,1fr) 10fr 150px;
              gap: 0px;
            }
   .title{font-family: 'Bebas Neu e', sans-serif;text-align: center; font-size: 20px;font-weight: bold;}
   .color1{color: #FA483B;}
   .color2{color: #002D68;}
    h2{padding: 0;margin: 0;}

    .leftheader{order:1;display: flex; align-items: center;}
    .spaceheader{order:2;}
    .rightheader{order:3;}
    #search p{font-family: 'Bebas Neu e', sans-serif;text-align:center ;opacity: 0; padding: 0;margin: 0; }
    #buttonsearch{height: 25px;width: 25px;}

    .cvimage{ width: 0px;}

    #buttonsearch{display: none;}
  
    .onlinekeyboard{font-size: 30px;}


    .hiddenlogo{bottom: 255px; }
   }

   @media  (max-width:400px)
  {
    #footer{width: 100px;}
    .title{font-size: 15px;}
    .introfirstbaner{display: none;}
    .onlinekeyboard{font-size: 25px;}
    .fontgame{font-size: 25px;}
    .font1game{font-size:20px;}
  }                                           

  @media  (max-width:315px)
  {
    .onlinekeyboard{font-size: 20px;}
    .rightheader{display: none;}
    .fontgame{font-size: 20px;}
    .font1game{font-size:20px;}
    .logo{display: none;}
    .formreduce{display: none;}
    .displaylink{display: none;}
    .linkedin{width: 100px;}
    

  }