body{
  display: flex;
  flex-direction: column;
  overflow: scroll;
}
main{
  flex: 1 auto;
}
#footer{
  height:200px;
}
.navbar,nav{
  background-color: transparent;
}
h1{
  text-align: center;
}
.nav-menus{
  width: 65%;
  background:var(--bs-primary);
  border-radius: 3px;
  box-shadow: 0px 0px 10px 0px  var(--bs-primary);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#sider-about-btn{
  box-shadow: 0px 0px 5px 0px var(--bs-white) ;
  border: #fff solid 1px;
  
}
@media only screen and (min-width:768px){
  .nav-menus{
    position: absolute;
    float: right;
    right: 0;
    background-color: transparent;
    box-shadow: 0px 0px 0px 0px;
    transform: translate(-0%);
    font-size: 1.5em;
  }
  .navbar .navbar-brand{
    font-size: 2em;
  }
 
  .landing-container .sider-content {
    margin-top: 50%;
  }
   .landing-container .sider-content #sider-name{
    font-size: 4px;
  }
  .landing-container .sider-content #sider-skill{
    font-size: 2em;
  }
}
.landing-container .sider-content #sider-name{
    font-size: 2.5em;
    font-weight: bold;
  }
  #service svg{
    float: right;
  }
  #mode{
    background-color: #fff;
    padding: 2%;
    border-radius: 50%;
  }
  .toggle-anim{
    animation-name: night_toggle;
    animation-duration: 1s;
    animation-timing-function: linear;
  
  }
  @keyframes night_toggle{
    from{
      padding: 1%;
      transform: rotate(0deg);
    }
    to{
      padding: 2%;
      transform: rotate(175deg);
    }
  }
  /* .block{
      opacity: 0;
      transition: all 1s;
      transform: translateX(-100%);
  }
  .show{
      opacity: 1;
      transform: translateX(0);
  }
  */
  .line{
      height: 15px;
      width: 50px;
      border-top: var(--bs-primary) solid 2px;
      border-bottom: var(--bs-primary) solid 2px;
      border-radius: 10px;

  } 
.particle-move-up { position: absolute; display: block; list-style: none; bottom: -150px; }

.particle-move-up-1, .particle-move-up-2, .particle-move-up-3, .particle-move-up-4, .particle-move-up-5, .particle-move-up-6, .particle-move-up-7, .particle-move-up-8, .particle-move-up-9 { animation-iteration-count: infinite; animation-timing-function: linear; }

.particle-move-up-1 { left: 25%; animation-name: moveups; animation-delay: 0s; animation-duration: 45s; }

.particle-move-up-2 { left: 10%; animation-name: moveups; animation-delay: 0s; animation-duration: 32s; }

.particle-move-up-3 { left: 70%; animation-name: moveups; animation-delay: 0s; animation-duration: 36s; }

.particle-move-up-4 { left: 40%; animation-name: moveups; animation-delay: 0s; animation-duration: 27s; }

.particle-move-up-5 { left: 65%; animation-name: moveups; animation-delay: 0s; animation-duration: 38s; }

.particle-move-up-6 { left: 75%; animation-name: moveups; animation-delay: 0s; animation-duration: 25s; }

.particle-move-up-7 { left: 35%; animation-name: moveups; animation-delay: 0s; animation-duration: 25s; }

.particle-move-up-8 { left: 50%; animation-name: moveups; animation-delay: 0s; animation-duration: 45s; }

.particle-move-up-9 { right: 15%; animation-name: moveups; animation-delay: 0s; animation-duration: 35s; }
@-webkit-keyframes moveups { 
  0% { transform: translateY(0px); opacity: 1; border-radius: 0px; }
  100% { transform: translateY(-1000px); opacity: 0; border-radius: 50%; }
}

@keyframes moveups { 
  0% { transform: translateY(0px); opacity: 1; border-radius: 0px; }
  100% { transform: translateY(-1000px); opacity: 0; border-radius: 50%; }
}