:root {
  --parallax-background-position-y: 0%;
  --parallax-left-y: 0;
  --parallax-right-y: 0;
  --parallax-field-rotate: 30deg;
  --parallax-field-scale: 1;
  --parallax-opacity: 1;
}

.parallax-block {
  height: 75vh;
  max-height: 750px;
  min-height: 300px;
  background: linear-gradient(-30deg, #1E7F3D, #36A956, #1E7F3D) no-repeat fixed;
  background-size: 100% 150%;
  background-position-x: center;
  background-position-y: var(--parallax-background-position-y);
  position: relative;
  overflow: hidden;
  margin-top: -15px;
  transition: all .1s linear;
}

.parallax-field-background {
  position: absolute;
  aspect-ratio:  960 / 583;
  width: max(90%, 800px);
  top: 50%;
  left: 50%;
  background: url("../img/field.svg") center no-repeat scroll;
  background-size: cover;
  transform: translate(-50%, -50%) rotate(var(--parallax-field-rotate)) scale(var(--parallax-field-scale));
  transition: all .1s linear;
  opacity: var(--parallax-opacity);
}

.player1,
.player2 {
  position: absolute;
  background: center no-repeat scroll;
  background-size: contain;
  height: 60%;
  width: auto;
  max-width: 45%;
  aspect-ratio: 3 / 5;
  opacity: var(--parallax-opacity);
  transition: all .1s linear;
}

.player1 {
  background-image: url("../img/player1.svg");
  top: 10%;
  left: -5%;
  animation: player1 infinite 15s linear alternate;
}

.player2 {
  background-image: url("../img/player2.svg");
  top: 20%;
  right: -5%;
  animation: player1 infinite 15s linear alternate-reverse;
}

@keyframes player1 {
  0% {
    transform: translate(-5%,-5%) ;
  }
  50% {
    transform: translate(0,0);
  }
  100% {
    transform: translate(-2%,5%);
  }
}

.ball {
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("../img/ball.webp") center no-repeat scroll;
  background-size: contain;
  width: 50px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  opacity: var(--parallax-opacity);
  transition: all .1s linear;
}

.parallax-right {
  position: absolute;
  right: 0;
  top: 80%;
  width: 80%;
  height: 100%;
  filter: drop-shadow(0 0 5px rgba(51, 51, 51, 0.3));
  transform: translateY(var(--parallax-right-y));
  transition: all .1s linear;
}

.parallax-left {
  position: absolute;
  left: 0;
  top: 75%;
  width: 80%;
  height: 100%;
  filter: drop-shadow(0 0 5px rgba(51, 51, 51, .3));
  transform: translateY(var(--parallax-left-y));
  transition: all .15s linear;
}

@media (max-width: 575px) or (max-height: 575px) {
  .parallax-block {
    height: 50vh;
    min-height: 200px;
  }
}

@media (max-height: 575px) {
  .player1 {
    left: 15%
  }
  .player2 {
    right: 15%;
  }
}

@media (min-width: 768px) {
  .player1 {
    left: 10%;
  }

  .player2 {
    right: 10%;
  }
}

@media (min-width: 992px) {
  .player1 {
    left: 15%;
  }

  .player2 {
    right: 15%;
  }
}

@media (min-width: 1200px) {
  .player1 {
    left: 20%;
  }

  .player2 {
    right: 20%;
  }
}

@media (min-width: 1400px) {
  .player1 {
    left: 25%;
  }

  .player2 {
    right: 25%;
  }
}