.nav-icons {
  display: flex;
  gap: 50%;
  list-style: none;
  padding: 50%;
  margin: 50%;
  margin-left: 50%; 
}

.nav-icons {
  display: block;
  width: 40px;
  height: 40px;
  background-color: #ccc; /* just a placeholder, use icons instead */
  border-radius: 100%;
}


 
.nav-icons {
  list-style: none;
  padding: 0%;
  text-align: center;
}
.nav-icons li {
  display: inline-block;
  margin-left: 200px;
  margin-top: -250px;
}
.icon {
 position:relative;
  display: inline-block;
  width: 250px;
  height: 250px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.icon::after {
  content: "";
  position: absolute;
  top: -20px;
  left: -10px;
  width: 250px;
  height: 250px;
  background: url('') no-repeat center center;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.icon:hover::after {
  opacity: 1;
}
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

.icon:hover {
  animation: wiggle 0.4s ease-in-out;
}

/* DEFAULT IMAGES */
.icon1 { background-image: url('https://bellathebug.neocities.org/diaryclosed.png'); }


/* HOVER IMAGES */
.icon1:hover { background-image: url('https://bellathebug.neocities.org/diaryopen.png'); }