bbs-go-site

I am trying to create a theme toggling switch but one of the transitions has broken. I've put in a transition for the rectangular divs at the bottom of the page, but it is not working properly. Each of those divs has a different z-index level and I'm worried that that's what's broken the code. Unfortunately I need them to be layered because I'm going to add a parallax effect to each of them later. Does anyone know why the transition is misbehaving. (if you want to see the full page you can find it here)

const checkBox = document.getElementById('checkbox');
    var hills = document.getElementsByClassName('hillsl');
    checkBox.addEventListener("change", updateBackground);
    updateBackground();

    function updateBackground() {
      document.getElementById("light").style.opacity = checkBox.checked ? "0" : "1";
      document.getElementById("hillsl").style.opacity = checkBox.checked ? "0" : "1";
      
    }

*{
  box-sizing: border-box;
  
}

body{
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 0;
  height: 100vh;
  transition: background 0.2s linear;
  
}

/*-----------------------------Theme Switch--------------------------------*/

.checkbox{
  position: absolute;
  opacity: 0;
  
}

.checkbox:checked + .label .ball{
  transform: translateX(53px);
}

.checkbox:checked #light{
  opacity: 0;
}

.label{
  position: relative;
  z-index: 100;
  display: flex;
  align-item: center;
  justify-content: space-between;
  height: 52px;
  width: 105px;
  border-radius: 50px;
  padding: 18px;
  background-color: #111;
  cursor: pointer;
  
}

.ball{
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background-color: white;
  transition: transform 0.2s linear;
}

.fa-moon{
  transform: scale(2);
  color: #ddd;
  
}

.fa-sun{
  transform: scale(2);
  color: #f1c40f;
}

/*------------------------------Theme Background----------------------------*/

#light{
  position: absolute;
  z-index: -99; 
  top: 0;
  left: 0;
  opacity: 1;
  width: 100vw;
  height: 100vh;
  transition: opacity 1s linear;
  background-image: linear-gradient(rgba(15, 76, 129), rgba(181, 199, 211));
}

#dark{
  position: absolute;
  z-index: -100;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(rgba(16,25,56), rgba(34,37,72), rgba(80,61,93), rgba(212,148,149));
}

#hills{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hillsl{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100vw;
}

.hillsd{
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100vw;
    
}

#hillsl{
    transition: opacity 1.3s ease;
    opacity: 0;
    z-index: 0;
}

#hillsd{
    z-index: -1;
}

#s1{
    z-index: 8;
    height: 10%;
    background-color: #658635;
}

#s2{
    z-index: 6;
    height: 25%;
    background-color: #83AD46;
}

#s3{
    z-index: 4;
    height: 30%;
    background-color: #7ABCD2;
}

#s4{
    z-index: 2;
    height: 45%;
    background-color: #496A71;
}

#s5{
    z-index: 7;
    height: 10%;
    background-color: #000C18;
}

#s6{
    z-index: 5;
    height: 25%;
    background-color: #011321;
}

#s7{
    z-index: 3;
    height: 30%;
    background-color: #0C2237;
}

#s8{
    z-index: 1;
    height: 45%;
    background-color: #0C3F54;
}

<head><script src="https://kit.fontawesome.com/b363948c80.js" crossorigin="anonymous"></script></head>


<div id='body'>

        <div id="dark"></div>
        <div id="light"></div>
        <input type="checkbox" class="checkbox" id="checkbox">
        <label for="checkbox" class="label">
            <i class="fas fa-moon"></i>
            <i class="fas fa-sun"></i>
            <div class="ball"></div>
        </label>
    
    <div id="hills">
        <div id="hillsl">
             <div class="hillsl" id="s1"></div>
             <div class="hillsl" id="s2"></div>
             <div class="hillsl" id="s3"></div>
             <div class="hillsl" id="s4"></div>
        </div>     
        <div id="hillsd">     
             <div class="hillsd" id="s5"></div>
             <div class="hillsd" id="s6"></div>
             <div class="hillsd" id="s7"></div>
             <div class="hillsd" id="s8"></div>
        </div>
    </div>

主题切换开关过渡中断