.hero__container{
    position: relative;

}

.btn-dark{
    position: absolute;
    right: -10px;
    top: 10px;
}
.container__dark_mode{
    display: block;
    width: 100px;
    height:40px;
    border: 1px solid white;
    border-radius: 50px;
    /* background-color: gray; */
    padding: 0;
    position: relative;
    margin: auto;
    cursor: pointer;
    box-shadow: 5px 5px 30px aqua;
  }
  .btn__on-off{
    width:33px;
    height: 33px;
    border-radius: 50%;
    background-color:aqua;
    position:absolute;
    margin-top: 2px;
    margin-left: 2px;
    z-index: 10;
    transition: transform 500ms ease;
}
.sun,
.moon{
    width:33px;
    height: 34px;
    position:absolute;
}
.sun{
 margin-left: 2px;
}
.moon{
      transform: translateX(180%);
}
#btn__dark-mode{
      display:none;
}
#btn__dark-mode:checked + .btn__on-off{
  transform: translateX(180%);
}


.dark-mode{
    background-color: rgb(32, 31, 31);
    background-color: #05130f;
}