/* this is the logos placement on screen*/
.logo img{
  display: block;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
}

/* animation1*/

.navigation {
 display: flex;
  justify-content: center; 
}

.navlinkhome {
  width: 150px;
  height: 150px;
  background-image: url('Index_Images/NavHomeSprite.png');
  background-repeat: no-repeat;
  animation: home 4.67s steps(112) infinite paused;
}

.navlinkhome:hover {
  animation-play-state: running;
}

@keyframes home {
  from {
    background-position: 0,0;
  }
  to {
    background-position: -16800px 0;
  }
}

.navboxhome {
  display: block;
  margin-top: 150px;
  width: 150px;
  height: 150px;
  
  text-decoration: none;
}

/* animation2*/

.navlinkillu {
  width: 150px;
  height: 150px;
  background-image: url('Index_Images/NavIlluSprite.png');
  background-repeat: no-repeat;
  animation: Illu 1.875s steps(45) infinite paused;
}

.navlinkillu:hover {
  animation-play-state: running;
}

@keyframes Illu {
  from {
    background-position: 0,0;
  }
  to {
    background-position: -6750px 0;
  }
}

.navboxillu {
  display: block;
  margin-top: 150px;
  width: 150px;
  height: 150px;
  
  text-decoration: none;
 }

/* animation3*/

.navlinkani {
  width: 150px;
  height: 150px;
  background-image: url('Index_Images/NavAniSprite.png');
  background-repeat: no-repeat;
  animation: Ani 2.541s steps(61) infinite paused;
}

.navlinkani:hover {
  animation-play-state: running;
}

@keyframes Ani {
  from {
    background-position: 0,0;
  }
  to {
    background-position: -9150px 0;
  }
}

.navboxani {
  display: block;
  margin-top: 150px;
  width: 150px;
  height: 150px;
  
  text-decoration: none;
 }

/* animation4*/

.navlinkphoto {
  width: 150px;
  height: 150px;
  background-image: url('Index_Images/NavPhotoSprite.png');
  background-repeat: no-repeat;
  animation: Photo 0.791s steps(19) infinite paused;
}

.navlinkphoto:hover {
  animation-play-state: running;
}

@keyframes Photo {
  from {
    background-position: 0,0;
  }
  to {
    background-position: -2850px 0;
  }
}

.navboxphoto {
  display: block;
  margin-top: 150px;
  width: 150px;
  height: 150px;
  
  text-decoration: none;
 }