.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: "Helvetica", san-seriff;
}

h2:first-of-type {
  color: #ffad28;
}

h2:last-of-type {
  color: #388E3C;
}

.glow-div {
  position: relative;
  height: 90px;
  width: 60px;
  border-radius: 50%;
}

.hide {
  display: none;
}

.infinity, .gauntlet {
  cursor: pointer;
  position: absolute;
  left: -12px;
  height: 80px;
  width: 80px;
  user-select: none;
  -moz-user-select: none;
}

.snap {
  position: absolute;
  top: 0;
  left: -12px;
  height: 80px;
  width: 80px;
  background-image: url('https://www.google.com/logos/fnbx/thanos/thanos_snap.png');
  background-position: left;
  background-repeat: no-repeat;
  animation: snaps 2s steps(47);
}

@keyframes snaps {
  from {
    background-position: left;
  }
  to {
    background-position: right;
  }
}

.time {
  position: absolute;
  top: 0;
  left: -12px;
  height: 80px;
  width: 80px;
  background-image: url('https://www.google.com/logos/fnbx/thanos/thanos_time.png');
  background-position: left;
  background-repeat: no-repeat;
  animation: effect 2s steps(47);
}

@keyframes effect {
  from {
    background-position: left;
  }
  to {
    background-position: right;
  }
}

const glove = document.querySelector('.infinity') 
const snap = document.querySelector('.snap')

glove.addEventListener('click', snapEffect)

function snapEffect() {
  glove.className = 'hide'
  snap.className ="snap"
  setTimeout(()=> {
    glove.className = 'infinity'
    snap.className = 'hide'
  }, 2500)
}

const gauntlet = document.querySelector(".gauntlet")
const time = document.querySelector(".time")

gauntlet.addEventListener("click", timeEffect)

function timeEffect() {
  gauntlet.className = "hide";
  time.className = "time";
  setTimeout(() => {
    gauntlet.className = "gauntlet";
    time.className = "hide";
  },2500);
}