.portfolio {
    background-color: #9333ea;
    color: #ffffff;
}

.portfolio:hover {
    background-color: #7e22ce;
    color: #ffffff;
}

.github {
    background-color: #1f2937;
    color: #ffffff;
}

.github:hover {
    background-color: #111827;
    color: #ffffff;
}

.twitter {
    background-color: #38bdf8;
    color: #ffffff;
}

.twitter:hover {
    background-color: #0ea5e9;
    color: #ffffff;
}

.instagram {
    background-color: #ec4899;
    color: #ffffff;
}

.instagram:hover {
    background-color: #db2777;
    color: #ffffff;
}

.youtube {
    background-color: #ef4444;
    color: #ffffff;
}

.youtube:hover {
    background-color: #dc2626;
    color: #ffffff;
}

.email {
    background-color: #22c55e;
    color: #ffffff;
}

.email:hover {
    background-color: #16a34a;
    color: #ffffff;
}

.linkedin {
    background-color: #0a66c2;
    color: #ffffff;
}

.linkedin:hover {
    background-color: #004182;
    color: #ffffff;
}

.twitch {
    background-color: #9146ff;
    color: #ffffff;
}

.twitch:hover {
    background-color: #772ce8;
    color: #ffffff;
}

.snapchat {
    background-color: #fffc00;
    color: #000000;
}

.snapchat:hover {
    background-color: #e2db00;
    color: #000000;
}

.pinterest {
    background-color: #e60023;
    color: #ffffff;
}

.pinterest:hover {
    background-color: #c5001f;
    color: #ffffff;
}

.spotify {
    background-color: #1db954;
    color: #ffffff;
}

.spotify:hover {
    background-color: #1ed760;
    color: #ffffff;
}

.reddit {
    background-color: #ff4500;
    color: #ffffff;
}

.reddit:hover {
    background-color: #cc3700;
    color: #ffffff;
}

.telegram {
    background-color: #0088cc;
    color: #ffffff;
}

.telegram:hover {
    background-color: #006699;
    color: #ffffff;
}

.dribbble {
    background-color: #ea4c89;
    color: #ffffff;
}

.dribbble:hover {
    background-color: #c4376b;
    color: #ffffff;
}

.medium {
    background-color: #12100e;
    color: #ffffff;
}

.medium:hover {
    background-color: #000000;
    color: #ffffff;
}

.primary {
    background-color: #3b82f6;
    color: #ffffff;
}

.primary:hover {
    background-color: #2563eb;
    color: #ffffff;
}

.success {
    background-color: #10b981;
    color: #ffffff;
}

.success:hover {
    background-color: #059669;
    color: #ffffff;
}

.warning {
    background-color: #f59e0b;
    color: #000000;
}

.warning:hover {
    background-color: #d97706;
    color: #000000;
}

.danger {
    background-color: #ef4444;
    color: #ffffff;
}

.danger:hover {
    background-color: #dc2626;
    color: #ffffff;
}

.info {
    background-color: #0ea5e9;
    color: #ffffff;
}

.info:hover {
    background-color: #0284c7;
    color: #ffffff;
}

.dark {
    background-color: #1f2937;
    color: #ffffff;
}

.dark:hover {
    background-color: #111827;
    color: #ffffff;
}

.light {
    background-color: #f3f4f6;
    color: #000000;
}

.light:hover {
    background-color: #e5e7eb;
    color: #000000;
}

.pink {
    background-color: #ec4899;
    color: #ffffff;
}

.pink:hover {
    background-color: #db2777;
    color: #ffffff;
}

.lime {
    background-color: #84cc16;
    color: #ffffff;
}

.lime:hover {
    background-color: #65a30d;
    color: #ffffff;
}

.amber {
    background-color: #f59e0b;
    color: #000000;
}

.amber:hover {
    background-color: #d97706;
    color: #000000;
}

.sky {
    background-color: #38bdf8;
    color: #ffffff;
}

.sky:hover {
    background-color: #0ea5e9;
    color: #ffffff;
}

.rose {
    background-color: #f43f5e;
    color: #ffffff;
}

.rose:hover {
    background-color: #e11d48;
    color: #ffffff;
}

.indigo {
    background-color: #6366f1;
    color: #ffffff;
}

.indigo:hover {
    background-color: #4f46e5;
    color: #ffffff;
}

.teal {
    background-color: #14b8a6;
    color: #ffffff;
}

.teal:hover {
    background-color: #0d9488;
    color: #ffffff;
}

.cyan {
    background-color: #06b6d4;
    color: #ffffff;
}

.cyan:hover {
    background-color: #0891b2;
    color: #ffffff;
}

.fuchsia {
    background-color: #d946ef;
    color: #ffffff;
}

.fuchsia:hover {
    background-color: #c026d3;
    color: #ffffff;
}