.homelab-section { margin-top: 18px; padding: 32px 24px; background: rgba(20, 20, 30, 0.10); backdrop-filter: blur(48px); -webkit-backdrop-filter: blur(48px); border-radius: 24px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.10); min-width: 26rem; max-width: 26rem; align-self: stretch; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; text-align: center; } /* Mobile responsive homelab section */ @media (max-width: 768px) { .homelab-section { min-width: unset; max-width: unset; width: 100%; padding: 28px 20px; } .homelab-title { font-size: 1.3rem; text-align: center; } .homelab-buttons { justify-content: center; } } @media (max-width: 480px) { .homelab-section { padding: 24px 16px; gap: 16px; min-width: unset; max-width: unset; width: 100%; } .homelab-title { font-size: 1.2rem; } .homelab-buttons { gap: 12px; flex-direction: column; align-items: center; } .homelab-btn { width: 100%; max-width: 200px; text-align: center; justify-content: center; } } .homelab-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460, #000000, #53354a, #800080); */ background: linear-gradient(45deg, #1a1a2e44, #0f346066, #000000, #3e085e66, #80008022); background-size: 400% 400%; animation: gradient-animation 50s ease infinite; } @keyframes gradient-animation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .homelab-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; letter-spacing: 0.03em; background: linear-gradient(270deg, var(--primary-color), var(--secondary-color), var(--tertiary-color), var(--primary-color-light), var(--primary-color), var(--secondary-color), var(--tertiary-color)); background-size: 800% 800%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-animation 25s ease infinite; } .homelab-buttons { display: flex; gap: 16px; flex-wrap: wrap; }