* {
  box-sizing: border-box;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

html {
  display: flex;
  justify-content: center;
  text-align: center;
  background-image: url('https://images.alphacoders.com/605/thumb-1920-605592.png');
  background-attachment: fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
}


h1, h3 {
  color: yellow;
  

}

.waviy {
  position: relative;
}
.waviy span {
  position: relative;
  display: inline-block;
  font-size: 40px;
  text-transform: uppercase;
  animation: flip 2s infinite;
  animation-delay: calc(.2s * var(--i))
}
@keyframes flip {
  0%,90% {
    transform: rotateY(360deg) 
  }
}
 #y {
   color: yellow;
 }

 #p {
   color: purple;
 }


.gameBoard {
  display: flex;
  width: 700px;
  height: 650px;
  border-left: 5px ridge purple;
  border-top: 5px ridge yellow;
  border-right: 5px ridge yellow;
  border-bottom: 5px ridge purple;
  box-shadow: 10px 10px 8px #888888;
  background-image: url('https://c.tenor.com/Psk_hwm7eFUAAAAC/sasuke-uchiha-naruto.gif');
  background-size: 700px 650px;
  background-position: center;
  /*  */
  
}

#slot {
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid-black;
  border-radius: 50%;
  opacity: 0.5;
  background-image: url('https://media0.giphy.com/media/K9AnZe1fuZb68/200.gif');
  background-size: cover;
  background-position: center;
}

section {
  display: flex;
  justify-content: space-between;
}

#naruto {
  height: 100px;
  width: 100px;
  background-image: url('https://i.gifer.com/4M4x.gif');
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  background-size: cover;
}

#sasuke {
  height: 100px;
  width: 100px;
  background-image: url('https://i.gifer.com/origin/ff/ff3f0d9d63ff4a917c83d34ccec02abf_w200.gif');
  background-size: cover;
}


.pop-outin {
  animation: 3s anim-popoutin ease infinite;
}

@keyframes anim-popoutin {
  0% {
    color: black;
    transform: scale(0);
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  25% {
    color: red;
    transform: scale(2);
    opacity: 1;
    text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
  }
  50% {
    color: black;
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
}

#reset {
  background-color: purple;
  color: yellow;
  box-shadow: 0 8px 16px 0 yellow, 0 6px 20px 0 rgba(0,0,0,0.19);
  width: 700px;
  padding: 15px;
}

#reset:hover {
  background-color: yellow;
  color: purple;
  box-shadow: 0 12px 16px 0 purple, 0 17px 50px 0 rgba(0,0,0,0.19);
}