body  {
  position: relative;
  margin: 0;
  height: 100vh;
}

/* Panel Navigation */

.panel {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  transform: translateX(100vw);
  transition: transform .7s ease-in-out;
}

.panel-body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel:first-of-type {
  transform: translateX(0);
}

.navigation a {
  color: #fff;
  font-size: 30px;
  position:fixed;
  top: 50%;
  transform: translateY(-50%);
}

.navigation a.nav-left {
  left: 20px;
  right: auto;
}

.navigation a.nav-right {
    left: auto;
    right: 20px;
}

/* Spinner 1 */

.spinner1 {
  width: 50px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  border-radius: 50%;
  animation: spinner1 1s linear infinite;
}

@keyframes spinner1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Spinner2 */

.spinner2 {
  width: 50px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #fff transparent;
  border-radius: 50%;
  animation: spinner2 1s linear infinite;
}

@keyframes spinner2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner3 {
  width: 50px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #fff transparent;
  border-radius: 50%;
  animation: spinner3 1s linear infinite;
}

@keyframes spinner3 {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(0);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.spinner4 {
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    border-color: #fff transparent #fff transparent;
    border-radius: 50%;
    animation: spinner4 1s linear infinite;
}

@keyframes spinner4 {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(150deg);
    }
    80% {
        transform: rotate(210deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Ball Loading Animation */

.ball-container {
  width: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.ball-container .ball {
  width: 15px;
  height: 15px;
  background-color: #fff;
  display: block;
  border-radius: 50%;
  animation: jump 1s ease-in-out infinite;
}

@keyframes jump {
  0%,
  100%{
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(-20px);
  }
}

.ball-container .ball:nth-child(2) {
  animation-delay: 0.15s;
}

.ball-container .ball:nth-child(3) {
  animation-delay: 0.3s;
}

/* Bar container Animation */

.bar-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 40px;
}

.bar-container .bar {
  width: 8px;
  height: 40px;
  background-color: #fff;
  animation: barscale 1s ease-in-out infinite;
}

@keyframes barscale {
  0%,
  100% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(0.7);
  }
}

.bar-container .bar:nth-child(2) {
  animation-delay: 0.25s;
}

.bar-container .bar:nth-child(3) {
  animation-delay: 0.5s;
}

// Panel Navigation

const panelNavigation = document.querySelectorAll(".navigation");

panelNavigation.forEach((navigation, index) => {
  for(let i=0; i<navigation.children.length; i++) {
    navigation.children[i].addEventListener("click", function() {
      let parentPanel = this.parentNode.parentNode.parentNode;
      if(this.dataset.target === 'left') {
                parentPanel.previousElementSibling.style.transform = 'translateX(0)';
                parentPanel.style.transform = 'translateX(100vw)';
            } else if(this.dataset.target === 'right') {
                parentPanel.nextElementSibling.style.transform = 'translateX(0)';
                parentPanel.style.transform = 'translateX(-100vw)';
            }
    })
  }
})