/* Websites Syles */

:root {
    --body-bg: linear-gradient(145deg, #000000, #02d2f775, #000000);
    --bubble-bg: rgb(219, 219, 238);
    --bubble-text: rgba(5, 115, 134, 0.644);
    --title-text: rgb(40, 28, 90);
    --shadow-color: #000000;
}

.dark-mode {
    --body-bg: linear-gradient(145deg, #121212, #1a282a, #121212);
    --bubble-bg: #2c2c2c;
    --bubble-text: #e0e0e0;
    --title-text: #9070ff;
    --shadow-color: #000000;
}

*{
    margin: 5px;
    padding: 3px;
    font-family: SF Pro Text, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    transition: background-color 0.3s, color 0.3s;
}

.head-bubble {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bubble-bg);
    color: var(--bubble-text);
    padding: 20px;
    border-radius: 25px;
    box-shadow: 0 5px 10px var(--shadow-color);
    max-width: 1000px;
}

.head-bubble.active, .head-bubble:hover {
    transform: translateY(-5px) scale(1.07) ;
    box-shadow: 0 20px 30px var(--shadow-color); 
    z-index: 10;
}

body {
    position: relative; /* Needed for the pseudo-element */
    background: var(--body-bg);
    background-size: 200% 200%;
    font: 12px Arial;
    min-height: 100vh;
    padding: 40px 20px;
    animation: animated-gradient 10s ease infinite;
    z-index: 1;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--body-bg);
    background-size: 200% 200%;
    animation: animated-gradient 10s ease infinite;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: -1;
}

.body-bubble {
    background: var(--bubble-bg);
    color: var(--bubble-text);
    padding: 20px;
    border-radius: 25px;
    box-shadow: 0 5px 10px var(--shadow-color);
    max-width: 1000px;
    position: relative;
}

.body-bubble.active, .body-bubble:hover {
    transform: translateY(-5px) scale(1.06) ;
    box-shadow: 0 20px 30px var(--shadow-color);
    z-index: 10;
}

.my-image {
    border-radius: 15px;
    overflow: hidden; /* Ensures the image respects the border-radius */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    flex-shrink: 0; /* Prevents the image from shrinking */
}

.my-image.active, .my-image:hover {
    box-shadow: 0 20px 30px var(--shadow-color);
    transform: scale(1.05);
    
}

.title-style {
    text-align: right;
    font: 30px Helvetica;
    color: var(--title-text);
    font-style: oblique;
}

.skills {
    text-align: right;
    color: var(--bubble-text);
    font-style: italic;
}

#darkModeToggle {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid var(--bubble-text);
    background-color: var(--bubble-bg);
    color: var(--bubble-text);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.dark-mode body::before {
    opacity: 1;
}

@keyframes animated-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}