@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

:root{
    --rtl__font:"Noto Kufi Arabic";
    --ltr__font:"Patrick Hand";
    --rtl__fs:13px;
    --ltr__fs:17px;
    --rds:15px;
    --cP:rgb(91,47,229);
    --cP2:rgb(91,47,229,0.1);
    --cB:rgb(255,255,255);
    --cF:rgb(71, 71, 71);
    --cD:rgba(95, 95, 95, 0.1);
    --cS:rgb(239, 239, 239);
    --cM:rgb(165, 165, 165);
    --c0:rgb(209, 42, 36);
    --c02:rgb(223,49,43,0.1);
    --c1:rgb(31, 167, 110);
    --c12:rgb(36, 204, 134,0.1);
    --c2:rgb(189,186,17);
    --c22:rgb(189,186,17,0.1);
    --cBlack:rgb(0,0,0);
    --cWhite:rgb(255,255,255);
    --animate-delay:0.1s;
}

.c{margin-left:10px !important; margin-right:10px !important;}
body{background-color:var(--cB);}
popup{display:block; position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background-color:var(--cP); backdrop-filter:blur(10px); color:var(--cB); border:1px solid var(--cF2); padding:10px 20px; border-radius:var(--rds); display:none; width:70%; z-index:1000;}

/* loading-bar */
.loading{width:100%; position:absolute; top:0; left:0; height:3px; border:0; border-radius:0px; overflow:hidden;}
.loading:after{content:" "; display:block; width:150px; top:-50%; height:250%; position:absolute; animation:loadingbar 2s linear infinite; z-index:2; background:var(--cP);}
@keyframes loadingbar{from{left:-120px;} to{left:100%;}}

button{
  box-shadow:0 0px 17px -10px rgb(0 0 0 / 70%);
  transition:transform 300ms ease, box-shadow 300ms ease;
  border:1px solid var(--cB);
  cursor:pointer;
}
button:hover{
  border:1px solid var(--cD);
  transform:translateY(-5px);
}

.wave{
  width: 100%;
  height: 60px;
  padding-top:10px;
  background:
  /* little yellow dots */
  radial-gradient(circle 2px, #ffd700 90%, transparent 100%) 20px 50px,
  radial-gradient(circle 2px, #ffd700 90%, transparent 100%) 120px 40px,
  radial-gradient(circle 2px, #ffd700 90%, transparent 100%) 220px 55px,
  /* waves */
  radial-gradient(circle at 50% -10px, white 40%, transparent 41%) 0 0 / 40px 40px repeat-x,
  /* blue block */
  rgba(0, 38, 155); /* same dark blue */
  background-repeat: repeat-x;
}