@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

body {
  background-color: #5093FE;
  margin: 0;
  padding: 0;
}

.bg {
  background-image: url('assets/tree-b.svg');
  bottom: -10%;
  background-size: cover; 
  position: fixed;
  height: 70%;
  width: 100%;
  z-index: 1;
  transform: scale(1.1);
  background-repeat: no-repeat;
  transform-origin: center center;
  animation: moveBackground 10s infinite linear;
  
}

@keyframes moveBackground {
  0% {
      background-position: 50% 50%;
  }

  50% {
      background-position: 100% 100%;
  }

  100% {
      background-position: 50% 50%;
  }
}


.icon {
  background-image: url('assets/logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20vw;
  position: fixed;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

@media (max-width: 768px) {
  .icon {
    background-size: 50vw; /* Ajuste para "80vw" ou valor desejado */
  }
  .front{
    /* height: 80%; */
    bottom: 0%;
    animation-duration: 50s !important;
  }
  .bg{
    bottom: -10%;
    animation-duration: 50s;
  }

}

.front {
  background-image: url('assets/tree-f.svg');
  background-size: cover; 
  position: fixed;
  bottom: -10%;
  height: 70%;
  width: 100%;
  z-index: 3;
  transform-origin: center center;
  background-repeat: no-repeat;
  background-position: left 100% top 100%;
  animation: moveBackgroundFront 10s infinite normal;
}

@keyframes moveBackgroundFront {
  0% {
      background-position: 100% 100%;
  }

  50% {
      background-position: 50% 50%;
  }

  100% {
      background-position: 100% 100%;
  }
}


.footer {
  font-family: 'Poppins';
  font-weight: 700;
  position: fixed;
  bottom: 0;
  height: 4em; /* Altura fixa para o rodapé */
  width: 100%;
  color: #fff;
  text-align: center;
  z-index: 4;
}