/* Styles for dark mode */
:root {
    --background-color-light: #f8f8f8;
    --background-color-dark: #1a1a1a;
    --text-color-light: #333;
    --text-color-lighter: #888;
    --text-color-dark: #ddd;
    --container-color-light: #eee;
    --container-color-dark: rgba(0, 0, 0, 0.9); /* Darkened container color for dark mode */
    --text-color-dark-mode: #bbb; /* Lighter text color for dark mode */
    --name-color-dark-mode: #999; /* Slightly darker text color for name in dark mode */
    --font-family: 'Cairo', serif; /* Custom font */
}

@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-regular.ttf') format('truetype');
    /* Add other font formats if necessary for better compatibility */
    font-weight: normal;
    font-style: normal;
}

body, html {
    font-family: var(--font-family); /* Use custom font */
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);
}

.container {
    background-color: var(--container-color-dark);
}

.cover-photo img {
    content: url('background-dark.webp');
}

.bio, .social-links img {
    color: var(--text-color-dark-mode); /* Use lighter text color for bio and social links */
}

.name {
    color: var(--name-color-dark-mode); /* Use slightly darker text color for name in dark mode */
}

.facebook img {
    -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
            filter: invert(100%);    
}

.instagram img {
    -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
            filter: invert(100%);    
}

.linkedin img {
    -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
            filter: invert(100%);    
}