/* ==========================
   BASE STYLES
========================== */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #fefefe;
  color: #111;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
* { box-sizing: border-box; }

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; background:none; border:none; }

/* ==========================
   SCROLLBAR
========================== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background:#f0f0f0; border-radius:10px; }
::-webkit-scrollbar-thumb { background-color:#ccc; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background-color:#ff8c00; }
* { scrollbar-width: thin; scrollbar-color: #ff8c00 #f0f0f0; }

/* ==========================
   LOADER
========================== */
#loader-box {
  position: fixed; top:0; left:0; width:100%; height:100vh;
  display:flex; justify-content:center; align-items:center;
  background:#fff; z-index:99999; transition: opacity 0.5s ease;
}
#loader-box img {
  width:120px; height:120px; border-radius:50%;
  animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
  0%,20%,40%,60%,80%,100% {transform:scale(1);}
  10%,50% {transform:scale(1.1);}
  30%,70% {transform:scale(1.05);}
}
#loader-box.fade-out { opacity:0; pointer-events:none; }