.link_tree-btn {
  margin: 2em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
/*
  --😀: #644dff;
  --😀😀: #4836bb;
  --😀😀😀: #654dff63;
  */

  --😀: #ff0066;
  --😀😀: #6a0066;
  --😀😀😀: #67092e;
  cursor: pointer;
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 1.125em;
  font-weight: 800;
  letter-spacing: 2px;
  color: #f0f8a4;
  background: var(--😀);
  border: 2px solid var(--😀😀);
  border-radius: .75rem;
  box-shadow: 0 8px 0 var(--😀😀);
  transform: skew(10deg);
  transition: all .1s ease;
  filter: drop-shadow(0 px 20px var(--😀😀😀));
}

.link_tree-btn a{
    color: #fff;
}

.link_tree-btn:hover{
    color: #6a0066;
}

.link_tree-btn:active {
  letter-spacing: 0px;
  transform: skew(-10deg) translateY(8px);
  box-shadow: 0 0 0 var(--😀😀😀);
}

.not_svg{
    float: left;
}
/* Thank you, btongheng */

.special_link {
  border: solid 4px transparent;  /* Initial border setting */
  transition: border-color 0.3s;  /* Smooth transition */
}

.special_link:hover{
  background: #6a0066;
  border-radius: .6em;
  padding: 1em;
}

.special_link::before {
  content: '';
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0;
  bottom: 0;
  border-radius: 20px;  /* Match your border radius */
  background: linear-gradient(45deg, #FF6F61, #FF9A00, #FFEC40, #FFD500);
  z-index: -1;  /* Place it behind the content */
  opacity: 0;  /* Initially hidden */
  transition: opacity 0.3s;  /* Smooth transition */
}

.special_link:hover::before {
  opacity: 1;  /* Show the gradient border on hover */
  border: 4px solid #6a0066;

  box-shadow: 0 8px 0 #6a0066;
  filter: drop-shadow(0 px 20px #6a0066);

}