:root{
    --color-1: #2A2B2E;
    --color-2: #5a5a66;
    --color-3: #ffffff;
    --color-4: #4cc9f0;
    --color-5: #f72585;
}
body.dark-mode{
    background-color: var(--color-1);
    color: var(--color-3);
}
.navbar-nav{
    gap:10px;
}

.cl-1{
    color:var(--color-1);
}
.cl-2{
    color:var(--color-2);
}
.cl-3{
    color:var(--color-3);
}
.cl-4{
    color:var(--color-4);
}

.cl-5{
    color:var(--color-5);
}

.cl-bg-1{
    background-color:var(--color-1);
}
.cl-bg-2{
    background-color:var(--color-2);
}
.cl-bg-3{
    background-color:var(--color-3);
}
.cl-bg-4{
    background-color:var(--color-4);
}

.cl-bg-5{
    background-color:var(--color-5);
}

.neon-btn {
    text-align: center;
    padding: 10px 25px;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    border-radius: 5px;
    color: var(--col);
    border: 1px solid var(--col);
    box-shadow: 0 0 5px var(--col), 0 0 5px var(--col) inset;
    z-index: 1;
  }
  .neon-btn:after {
    position: absolute;
    content: ""; 
    width: 0;
    height: 100%;
    border-radius:5px;
    top: 0;
    right: 0;
    z-index: -1;
    background: var(--col);
    box-shadow:
     0 0 20px  var(--col);
    transition: all 0.3s ease;
  }
  .neon-btn:hover {
    color: var(--color-3);
  }
  .neon-btn:hover:after {
    left: 0;
    width: 100%;
  }
  
  #home-background{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }