:root{
  --bg:#f6f6f6;
  --card:#fff;
  --card2:#eeecec;
  --text:#222;
  --accent:#0ea5a4;
  --dark-accent:#078281;
  --light-accent:#e3fcf0;
  --bd-accent:#30c0a5;
  --border-accent:#eceaea;
  --btn-play:#d8d3d3;
}

body.dark{
  --bg:#1d2332;
  --card:#111827;
  --card2:#111827;
  --text:#e5e7eb;
  --accent:#111827;
  --light-accent:#023b32;
  --border-accent:#2b3444;
  --btn-play:#202635;
}
@font-face {
  font-family: 'AbuFaqih';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/abufaqih.woff2) format('woff2');
}
body{
  margin:0;
  font-family:Inter,system-ui;
  background:var(--bg);
  color:var(--text);
}
.toggle{
  position:absolute;
  right:12px;
  top:12px;
  background:#fff2;
  border:none;
  color:#fff;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
}
.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(14,165,164);
  color:#fff;
  border:none;
  width:42px;
  height:42px;
  border-radius:50%;
  display:none;
  cursor:pointer;
}
.top:hover{background:rgba(14,165,164,.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;

}