@import 'https://fonts.googleapis.com/css?family=Inter:300, 400, 500, 700';
@import "/css/footer.css";
:root {
  --dark-pearl: #0D1117;
  --medium-pearl: #161B22;
  --bunker: #21262d;
  --slate: #89929B;
  --slate: 173, 216, 230;
  --light-slate: #C6CDD5;
  --white: #ECF2F8;

}

.text-white{
  color: var(--white);
}

.bg-light{
  background-color: var(--medium-pearl);
}

.bg-dark{
  background-color: var(--dark-pearl);
}

body {
  background: var(--medium-pearl);
  color: var(--white);
  position: relative;
  font-family: 'Inter';
  margin-bottom: 150px;
}

main {
  background: var(--medium-pearl);
  position: relative;
  font-family: 'Inter';
  padding-top: 5rem;
  padding-bottom: 5rem;
}

body::after {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 0;
  height: 0;
  border-radius: 50%;
  box-shadow: 0 0 300px 70px rgba(var(--slate), 0.5);
  pointer-events: none;
  transition: transform .2s, opacity .2s;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 10000;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
}

.side-bar {
  display: flex;
  flex-direction: column;
}

nav li {
  list-style: none;
}

nav li a {
  text-decoration: none;
  color: var(--white);
  display: block;
  transition: all ease-out 250ms;
  opacity: 0.75;

}

nav li a:hover {
  opacity: 1;
}

.active {
  color: var(--slate); 
  font-weight: 600;
}
  /* Default behavior - mobile screens */
  .fixed-position {
    position: static;
}

/* Apply 'position: fixed;' on medium screens and larger */
@media (min-width: 768px) {
    .fixed-position {
        position: fixed;
        z-index: 1000; /* Ensure it stays on top */
    }
}