body {
  margin: 0;
  height: 100vh;
  display: grid;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Medium.ttf');
}

@media (min-width: 1200px) {
  .lg\:grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
  }
}

.background1 {
  background-image: url("image/itzy1.png");
  background-size: cover;
  background-position: bottom;
}

.background2 {
  background-image: url("image/blackpink1.png");
  background-size: cover;
  background-position: 0, 250px;
}

.background3 {
  background-image: url("image/lesserafim1.png");
  background-size: cover;
  background-position: bottom;
}

.link-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 0;
}

a {
  font-family: 'Poppins', cursive;
  font-size: 2.5em;
  text-decoration: none;
}

.link-one {
  color: #111;
  transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);
  transition: background 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
  padding: 10px;
  border-radius: 10px;
  line-height: 1em;  
}

.link-one:hover {
  color:  #FF00FF;
  transition: color 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
  transition: background 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
  padding: 10px;
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
  

  /* Thanks Chris Coyier, you got my back always. https://css-tricks.com/different-transitions-for-hover-on-hover-off/ */
}

.link-one::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-image: url("image/itzy.png");
  background-size: cover;
  background-position: bottom;
  clip-path: circle(0% at 50% calc(50%));
  transition: clip-path 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
}

.link-one:hover::before {
  clip-path: circle(100% at 50% 50%);
}

.link-one::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}

.link-two {
  color: #111;
  transition: color 1s cubic-bezier(0.65, 0, 0.35, 0);
  transition: background 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
  padding: 10px;
  border-radius: 10px;
  line-height: 1em;
}

.link-two:hover {
  color: #ee9cae;
  transition: color 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
  transition: background 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
  padding: 10px;
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);

  /* Thanks Chris Coyier, you got my back always. https://css-tricks.com/different-transitions-for-hover-on-hover-off/ */
}

.link-two::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-image: url("image/blackpink.jpg");
  background-size: cover;
  background-position: 0, 250px;

  clip-path: circle(0% at 50% calc(50%));
  transition: clip-path 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
}

.link-two:hover::before {
  clip-path: circle(100% at 50% 50%);
}

.link-two::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}

.link-three {
  color: #111;
  transition: color 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
  transition: background 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
  padding: 10px;
  border-radius: 10px;
  line-height: 1em;  
}

.link-three:hover {
  color: #53d9d1;
  transition: color 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
  transition: background 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
  padding: 10px;
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);

  /* Thanks Chris Coyier, you got my back always. https://css-tricks.com/different-transitions-for-hover-on-hover-off/ */
}

.link-three::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-image: url("image/lesserafim.png");
  background-size: cover;
  background-position: bottom;

  clip-path: circle(0% at 50% calc(50%));
  transition: clip-path 1s cubic-bezier(0.15, 0.40, 0.25, 0.90);
}

.link-three:hover::before {
  clip-path: circle(100% at 50% 50%);
}

.link-three::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}