:root{
  --bg:#efefef;
  --card:#fff;
  --card2:#eeecec;
  --text:#1f2937;
  --accent:#18703a  ;
  --dark-accent:#078281;
  --light-accent:#e3fcf0;
  --bd-accent:#30c0a5;
  --border-accent:#cbd5e1;
  --btn-play:#d8d3d3;
}

body.dark{
  --bg:#0b1f17;
  --card:#132f24;
  --card2:#111827;
  --text:#e2e8f0;
  --accent:#18703a  ;
  --light-accent:#218d4b;
  --border-accent: rgba(255,255,255,0.05); 
  --btn-play:#202635;
}
* {
  -webkit-tap-highlight-color: transparent;
}
@font-face {
  font-family: 'AbuFaqih';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/gh/kangismet/kangismet.github.io@8daa63f/fonts/abufaqih.woff2) format('woff2');
}
body{
  margin:0;
  padding-top:70px;
  font-family:Inter,system-ui;
  background:var(--bg);
  color:var(--text);
}
body {
  background: linear-gradient(
      to bottom,
      #f0fdf4 0%,
      #f8fafc 40%,
      #ffffff 100%
);
}
body.dark {
  background: radial-gradient(circle at 20% 20%, rgba(34,197,94,0.05), transparent 40%),
              #0b1f17;
}

.toggle{
  position:absolute;
  right:12px;
  top:12px;
  background:#fff2;
  border:none;
  color:#fff;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  z-idex:999;
}
.footer{
  padding:20px 12px;
  font-size:12px;
  color:var(--text);
  text-align:center;
}
.footer a{color:var(--text);text-decoration:none;font-weight:600;transition: background-color 0.3s ease, transform 0.2s ease;}
.footer a:hover{color:var(--dark-eccent)}
/* BACK TOP BUTTON */
.top{
  position:fixed;
  background:rgba(46,125,50);
  color:#fff;
  border:none;
  width:42px;
  height:42px;
  border-radius:50%;
  display:none;
  cursor:pointer;
}
.top:hover{background:rgba(46,125,50,.7);}
.top svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
svg:not(:root) {
    overflow: hidden;
}