");
background-repeat: no-repeat;
animation: float-around 20s ease-in-out infinite alternate;
}
.fh-page::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,
");
background-size: 400px 800px;
background-repeat: repeat;
z-index: 1;
}
@keyframes float-around {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px, -50px) scale(1.05); }
100% { transform: translate(20px, -20px) scale(0.95); }
}
.fh-link-icon { display: none !important; }
.fh-link-button {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: 20px;
color: var(--text-light);
margin-bottom: 14px;
padding: 1.2rem;
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.fh-link-button:has(img) {
flex-direction: column;
padding: 0 !important;
}
.fh-link-button:has(img) > :first-child {
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
.fh-link-button:has(img) img {
width: 100% !important;
height: auto;
display: block;
object-fit: cover;
}
.fh-link-button:has(img) .fh-link-label {
width: 100%;
text-align: center;
padding: 1.2rem;
}
.fh-link-button:hover {
transform: translateY(-4px) scale(1.02);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 8px 30px rgba(14, 165, 233, 0.3);
letter-spacing: 0.5px;
}
.fh-link-primary {
background: rgba(14, 165, 233, 0.2);
border-color: rgba(14, 165, 233, 0.5);
font-weight: 700;
box-shadow: 0 0 15px rgba(14, 165, 233, 0.2);
}
.fh-link-primary:hover {
background: rgba(14, 165, 233, 0.35);
box-shadow: 0 0 25px rgba(14, 165, 233, 0.4);
}
.fh-avatar {
border: 2px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 30px rgba(14, 165, 233, 0.5);
z-index: 2;
position: relative;
}
.fh-display-name {
font-family: 'Chakra Petch', sans-serif;
letter-spacing: 1px;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
z-index: 2;
position: relative;
}
@media (prefers-reduced-motion: reduce) {
.fh-page::before, .fh-page::after { display: none; }
.fh-link-button { backdrop-filter: none; background: rgba(15, 23, 42, 0.9); }
}
