body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;  
    user-select: none;                /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#E4E4E4;
    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size:12px;
    height:100vh;
    margin:0px;
    padding:0px;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    width:100%;
    
}
::-webkit-scrollbar{width:0;}

/* sounds all details */
#arrowsclick,#wineachL,#gameoversound,#clicksound,#correctsound{width:20px; height:20px; opacity: 0;}

#container{width:30%; height:100%; position:absolute; left:50%; top:0%; transform: translateX(-50%); overflow: hidden;}
/* Portrait layout (default) */
.app {position:absolute;  left:0%;  top:0%; height:100%;  width:100%;  overflow: hidden; background:linear-gradient(45deg,#260513,#02272e); }
#App_name{width:100%; height:30%; position: absolute; background: url(../img/crowd.jpg) no-repeat top left/150% 150%;
      left: 0%; top:10%; font-size:6em; line-height: 80%; font-weight: 900; text-align: center;  -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color: transparent;
      color: white; animation:namenim 5s infinite ease-in-out;
    }
  
#GTF_TimeScore{width:60%; height:5%; position: absolute; box-shadow:3px 3px 5px black; border-radius:10px; left:20%; top:65%; display:flex;}
#GTF_TimeScore :nth-child(1){width:10%; height:100%; color:yellowgreen; text-shadow:2px 2px 4px black; font-size:1.3em; display:flex; justify-content:center; align-items: center;}
#GTF_TimeScore :nth-child(2){width:40%; height:100%; font-size:1.5em; display:flex; justify-content:center; align-items: center;}
#GTF_quate{width:80%; height:max-content; font-size: 1.5em; position: absolute; left:10%; top: 80%; text-shadow:2px 2px 4px grey; opacity:0.5; text-align: center;}

@keyframes namenim {
    0%{background-position:top left;}
    25%{background-position:top right;}
    50%{background-position:bottom right;}
    75%{background-position:bottom left;}
    100%{background-position:top left;}
}

#GTF_but{padding:1% 8% 1% 8%; cursor: pointer; background:linear-gradient(90deg, #B9B4C7,#352F44); transition: 0.5s; border-radius:5px; box-shadow:3px 3px 5px black; position: absolute; left:50%; top:50%; transform: translateX(-50%); font-size:2em; font-weight: 600; text-shadow:2px 2px 3px black; }
#GTF_but:active{transform:translateX(-50%) scale(80%);}
#Game_set{clip-path: polygon(0% 100%,35% 65%,65% 65%,100% 100%); opacity: 0.5;}
#GTF_GB,#Set_SB{width:100%; height:100%; position:absolute; top:0%; left:0%; display: none; z-index: 150;}

/* Guess The Face - Game */
#GTF_GB{ background:linear-gradient(45deg,#260513,#02272e);}
 
#GTF_lives{width:100%; height:2%; position:absolute; left:0%; top:5%; background:green;transition:0.5s;display: none; }
#GTF_progress{width:0%; height:2%; position:absolute; left:0%; top:8%; background:linear-gradient(90deg,#40A2D8,#40A2D8); box-shadow:2px 2px 4px black; }
#GTF_score{width:100%; height:2%; box-shadow:2px 2px 5px black; position: absolute; left:0%; top:11%; display: none;}
#SCR_B{width:50%; height:100%; background:0; position: absolute; left:0%; top:0%; z-index:-1;} 
#SCR_N{padding:0.5% 5% 0.5% 5%; color:#02272e; font-weight:700; border-radius:10px 0 0 10px; background:0; position: absolute; right:0%; top:50%; transform: translateY(-50%); background:#C2D9FF; font-size:1.5em;} 
#GTF_timer{width:100%; height:2px; box-shadow:2px 2px 5px black; background:#0096FF; position:absolute; left:0%; top:16%; font-size:10px; text-align:center; color:#40A2D8; font-size: 1.5em; z-index: 1; display: none; transition:0.25s;}

#GTF_pics{width:40%; height:30%; position:absolute; left:50%; top:20%; border:5px solid #B9B4C7; box-shadow:3px 3px 6px black inset; transform:translateX(-50%); background:linear-gradient(45deg,grey,orange); display: none;}
#GTF_pics::after{content:""; width:4%; height:3%; position:absolute; left:-8%; top:-8%; background:#C2D9FF; animation:leftB 3s infinite ease-in-out;}
@keyframes leftB{
      0%{left:-12%; top:-11%;}
      25%{left:-12%; top:108%;}
      50%{left:108%; top:108%;}
      75%{left:108%; top:-11%;}
      100%{left:-12%; top:-11%;}
   }
#GTF_pics::before{content:""; width:4%; height:3%; position:absolute; left:-7%; top:-5%; background:#C2D9FF; animation:rightB 3s infinite ease-in-out;}
   @keyframes rightB{
         0%{left:-7%; top:-5%;}
         25%{left:103%; top:-5%;}
         50%{left:103%; top:103%;}
         75%{left:-7%; top:103%;}
         100%{left:-7%; top:-5%;}
      }

#Game_back{width:10%; padding-top:10%;  background: url("../img/roundback.png") no-repeat center/auto 100%; border-radius:50%; box-shadow:3px 3px 5px black; position: absolute; left:50%; top:81.5%; transform: translateX(-50%); transition:0.5s; cursor:pointer; display: none;}
#Game_back:active{transform:translateX(-50%) scale(80%);}
#GTF_play{width:15%; padding-top:15%; border-radius:50%; position: absolute; left: 50%; top:70%; transform: translate(-50%,-50%); background:url("../img/GTF_play.png") no-repeat center/100% 100%; transition:0.5s;  box-shadow: 3px 3px 5px black; cursor:pointer; display: none; }

#GTF_Desc{width:70%; height:50%; text-align: justify; color:grey; font-size:1.3em; position: absolute; right: 10%; top:-160%; text-transform: capitalize; overflow-y: scroll; box-shadow: 0 0 10px black inset; border-radius: 20px; padding: 20px;}
#GTF_start{width:70px; height:70px; border-radius:50%; position: absolute; left: 50%; top:130%; transform: translateX(-50%); background:url("../img/play_but.jpeg") no-repeat center/100% 100%; cursor: pointer; }
#Set_SB{background: purple;}

/* game over div */
#G_GameOver{height:100%; width: 100%; background:linear-gradient(45deg,#7091F5,#97FFF4); position: absolute; top: 0; left: 0; z-index: 170; display: none; }
#GO_name{width:100%; height:50%; line-height: 80%; font-weight: bold; text-shadow:2px 2px 4px black; font-size:10em; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);  text-align: center; animation:GOAN 2s infinite ease-in-out;}
@keyframes GOAN {
    0%{text-shadow:2px 2px 4px black;}
    50%{text-shadow:-2px -2px 4px black;}
    0%{text-shadow:2px 2px 4px black;}
}
#GO_score{width:100%; padding:2% 0 2% 0; background:white; font-size:1.5em; color:#001524; position: absolute; top:60%; left:0%; text-align: center; font-weight:600;box-shadow:2px 2px 4px black;}
#GO_motiv{width:100%; padding:2% 0 2% 0; font-size:1.5em; background:#02272e; position:absolute; top:80%; text-align:center; left:0%;}

#GO_back{width:10%; padding-top:10%; box-shadow:2px 2px 4px black; border-radius:50%; position: absolute; top:70%; left:45%; background: url("../img/roundback.png") no-repeat center/100% 100%; transition:0.3s; cursor:pointer;}
#GO_back:active{transform:scale(80%);}

/* Game win */
#G_GameWin{width:100%; height:100%; position: absolute; top:0; left:0; background:linear-gradient(45deg,#9DB2BF,#394867); z-index:170; display:none; }
#Win_name{width:80%; height:max-content; position: absolute; left:10%; top:50%; transform:translateY(-50%);text-shadow:2px 2px 4px black; font-size: 8em; line-height:80%; text-align: center; font-weight:bold; color:#97FFF4; animation:GOAN 2s infinite ease-in-out;}
#POM_tarif{width:100%; height:max-content; font-size:1.5em; text-align: center; position: absolute; top:10%; text-shadow:2px 2px 4px black; }
#F_score{width:60%; padding:1% 0 1% 0; background-color:#7FC7D9; text-align: center;z-index: -1; position:absolute; left:20%; top:70%; border-radius:50px; font-size: 2.5em; box-shadow:6px 6px 20px black inset, 3px 3px 6px black; color: #001524; font-weight:600; }
#F_score::after{content:"FINAL SCORE"; width:100%; height:100%; font-size:1.3em; position: absolute; left: 0%; top: 0%; font-weight: 800;color: #40A2D8; z-index: -1; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; opacity: 0.4; text-shadow:0 0 3px black;}
#POM_back{width:15%; padding-top:15%; position: absolute; left:50%; top:80%; transform: translateX(-50%); background:#64CCC5; border-radius: 50%; box-shadow:6px 6px 20px black inset, 3px 3px 6px black; border:1px solid #408E91; transition:0.5s;}
#POM_back:active{transform:translateX(-50%) scale(80%);}
#POM_back i{position: absolute; left:50%; top: 50%; transform: translate(-50%,-50%); font-size:3.5em; color:darkcyan; text-shadow:2px 2px 4px black;}