/* Reset some default styling */

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f8f8f8;
    color: #333;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #2c3e50; /* Dark blue background */
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.profile-picture {
    width: 90px;
    height: 90px;
    background-color: #0c588b; /* Blue background */
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-picture:hover {
    transform: scale(1.2);
}

nav {
    background-color: #2c3e50;
    padding: 10px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

nav a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

nav a:hover {
    color: #3498db; /* Blue color on hover */
}


/* Update section styles */
section {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    background-color: white;
    transition: transform 0.2s ease-in-out;
    margin-top: 40px; /* Increased margin-top */
}

.skills-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.language-icons {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.language-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    transition: transform 0.2s ease-in-out;
}

.language-icon:hover {
    transform: scale(3);
}


section:hover {
    transform: scale(1.02); /* Slightly increase size on hover */
}

.header-info button {
    background-color: transparent;
    text-decoration: none;
    color: white;
    border: none;
    font-size: 16px; /* Set the desired font size */
    padding: 10px 20px; /* Adjust the padding to control the button size */
}

.header-info button:hover {
    color: #e74c3c; /* Red color on hover */
    font-weight: bold;
}

/* Give links a subtle transition effect */
.social-links a {
    margin-right: 10px;
    color: #ffffff; /* Blue color */
    text-decoration: none;
}

.social-links a:hover {
    color: #e74c3c;
}

/* Fine-tune the growth effect */
.active-section,
.hovered-section {
    transform: scale(1.02); /* Adjust the scale as needed */
    transition: transform 0.5s ease-in-out;
}

#language-switch {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px;
    background-image: linear-gradient(to right, #d3cce3, #e9e4f0); 
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    z-index: 1001;
    border-radius: 5px;
}

.static-language-switch {
    position: fixed;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    top: 10px;
    right: 10px;
    padding: 5px;
    z-index: 1001;
    border-radius: 5px;
}

#Current {
    color: #e74c3c;
}

.static-language-switch a {
    margin: 0 5px;
    padding: 5px;
    font-size: 14px;
    text-decoration: none;
    color: #353535;
}

.static-language-switch a:hover {
    color: #e74c3c;
}




@media (max-width: 600px) {
    header {
        flex-direction: column;
        text-align: center;
        padding: 5px; /* Decreased padding for smaller screens */
        position: static; /* Changed position to static for the header not to follow */
    }

    .header-info {
        margin: 10px 0;
    }

    .profile-picture {
        margin-bottom: 10px;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav li {
        margin-bottom: 5px;
    }

    section {
        margin-top: 20px; /* Adjusted margin-top for smaller screens */
        padding: 10px; /* Decreased padding for smaller screens */
    }

    /* Added a class for mobile devices */
    .mobile-device {
        touch-action: manipulation; /* Allow touch gestures without delay */
    }

    .mobile-device .social-links a,
    .mobile-device .header-info button {
        transition: font-size 0.5s ease-in-out; /* Slow down the font-size transition */
    }

    .mobile-device .social-links a:hover,
    .mobile-device .header-info button:hover {
        font-size: 18px; /* Adjust the size as needed */
    }
}