@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

html, body {
    height: 100%;
    font-family: 'Inter', sans-serif;
}

.hero {
    background-color: #000000;
    color: #f5f5f5;
}

.title {
    color: #f5f5f5;
    font-weight: 700;
}

.subtitle {
    color: #c9c9c9;
    font-weight: 400;
}

.social-link {
    transition: all 0.3s ease-in-out;
    border-radius: 9999px;
    padding: 1rem;
    color: #ffffff;
    opacity: 0.8;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.social-link:hover {
    transform: translateY(-5px) scale(1.05);
    opacity: 1;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
}

.social-link i {
    transition: color 0.3s ease-in-out;
}

.social-link.github:hover i {
    color: #6e5494; /* GitHub purple */
}

.social-link.telegram:hover i {
    color: #0088cc; /* Telegram blue */
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animated {
    animation: fadeIn 1.5s ease-out forwards;
}

.link-container {
    animation-delay: 0.8s;
}