style.css

/* Basic Reset */
body,
ul,
li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body Styling */
body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

/* Unordered List Styling */
ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 100%;
}

/* List Item Styling */
li {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Gradient Backgrounds for Each Brand */
.twitter {
  background: linear-gradient(45deg, #1da1f2, #1b95e0);
}

.instagram {
  background: linear-gradient(45deg, #f58529, #dd2a7b);
}

.soundcloud {
  background: linear-gradient(45deg, #ff7700, #ff6600);
}

.github {
  background: linear-gradient(45deg, #333, #555);
}

/* Anchor Links Styling */
a {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

/* Image Styling */
a img {
  width: 50%;
  height: 50%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Hover Effects */
li:hover {
  /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

a:hover img {
  transform: scale(1.1); /* Slightly enlarge the icon */
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}