
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* --font-main: system-ui, -apple-system, Roboto, Arial, sans-serif; */  /*  THIS IS FOR SYSTEM FONTS */
  --font-main: "Saira", sans-serif;
  
  --body-bg:#ffffff;
  --header: #FFF ;
  --border:#eeeeee;
  --text: #212529 ;

  --brand: #F08D39 ;

  --backbtnBg: /* #f1f5f9  #F08D39  rgba(255,255,255,0.4) */ #FFE0C2 ;
  --backbtnclr: #000 ;
  --backbtnbdr: #F08D39 ;
}

@media (prefers-color-scheme: dark) {
 :root {
      --body-bg: #16181d ;
      
      --header: #22252b ;
      --border:#2f3440;
      --text: #fff ;
   
      --brand: #F08D39;
   
      --backbtnBg: #F08D39 ;
      --backbtnclr: #fff ;
    }
}
/**************************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box ;
  user-select: none ;
  -webkit-tap-highlight-color: transparent;
  font-optical-sizing: auto;
}

body {
  font-family: var(--font-main);
  color: var(--text);
  animation: pageOpen 0.4s ease-out;
  background: var(--body-bg) ;
}
a { text-decoration:none; color: var(--text) ; }

.newFeature {
    display: none;
}

/*****************************************************/
/*******************************************/
header {
  padding:10px 16px;
  background:var(--header);
  border-bottom:1px solid var(--border);
  position: sticky; top: 0;
  display:flex;
  align-items:center;
  gap:10px;
  height: 60px ;  z-index: 99;
  max-height: 60px ;
}
.back-btn{
  width:38px;
  height:38px;
  background: var(--backbtnBg);
  color: var(--backbtnclr);
  border: 2px solid var(--backbtnbdr) ;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.back-btn:active{ transform:scale(.96); }

/******************************************/
button, a {
  touch-action: manipulation;
}

/********** Keyframes *********/

@keyframes pageOpen {
  from {
    opacity: 0;
    transform: scale(0.96) ;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



