html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}


html {
  position: relative;
  min-height: 100%;
}


body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* dark overlay */
    z-index: -1;
}

body {

  background: url('https://spheretopeer.com/img/SphereBG.png') no-repeat center center fixed;
  background-size: cover;
  color: #ffffff;
   display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
  min-height: 80px;
}

[id^="section"] {
  scroll-margin-top: 100px; 
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50% { box-shadow: 0 0 10px rgba(0,0,0,0.4); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}

#backToTop {
  animation: pulse 2s infinite;
}