body.dark-mode {
    background: #121212;
    color: #ffffff;
    transition: background 0.3s, color 0.3s;
}






body.dark-mode nav {
    background: #1f1f1f;
    border-bottom: 1px solid #333;
}

body.dark-mode #menu-toggle {
    background-color: #0c6b5b;
}

body.dark-mode .profile-header {
    background: transparent;
    border-bottom: 1px solid #333;
}

body.dark-mode .profile-info h2,
body.dark-mode .profile-info p {
    color: #ffffff;
}

body.dark-mode .container {
    background: #121212;
}

body.dark-mode .post,
body.dark-mode .publication,
body.dark-mode .profile {
    background: #2b2a2a;
    border: 1px solid #2b2a2a;
    color: #ffffff;
}

body.dark-mode .post textarea,
body.dark-mode .edit-form textarea,
body.dark-mode .edit-form input[type="text"] {
    background: #2c2c2c;
    color: #ffffff;
    border: 1px solid #444;
}

body.dark-mode .post button,
body.dark-mode .edit-form button,
body.dark-mode .comment-form button {
    background: #4CAF50;
    color: #ffffff;
}

body.dark-mode .post button:hover,
body.dark-mode .edit-form button:hover,
body.dark-mode .comment-form button:hover {
    background: #45a049;
}

body.dark-mode .comment-section {
    background: #2c2c2c;
    border: 1px solid #444;
}

body.dark-mode .comment-section .comments-list {
    background: #2c2c2c;
}

body.dark-mode .comment-form input[type="text"],
body.dark-mode .comment-form-profile input[type="text"] {
    background: #2c2c2c;
    color: #ffffff;
    border: 1px solid #444;
}

body.dark-mode .profil-actions button {
    background-color: #1e1d1d;
    color: white;
    border: solid 1px #0c6b5b;
}

body.dark-mode .profil-actions button:hover {
    background-color: #272829;
    color: white;
    border: solid 1px #ccc;
    transform: scale(1.05);
    transition: transform 0.2s;
}

body.dark-mode .details {
    background: #1f1f1f;
    border: 1px solid #333;
    color: #ffffff;
}

body.dark-mode .more-details {
    background: #1f1f1f;
    border: 1px solid #333;
    color: #ffffff;
}

body.dark-mode .modifierApropos-container {
    color: #ffffff;
}

body.dark-mode .modifierApropos-container input {
    color: #ffffff;
    background-color: #2c2c2c;
}

body.dark-mode .alert-success {
    color: #ffffff;
    background-color: #2c2c2c;
    border: 0.5px solid #0c6b5b;

}

.logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    transition: opacity 0.5s ease;
}

.logo-container img {
    max-width: 100%;
    max-height: 100%;
    height: 60px;
    width: auto;
    transition: opacity 0.5s ease;
}

.logo-light img,
.logo-dark-mode img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 60px;
    width: auto;
    transition: opacity 0.5s ease;

}



.logo-dark-mode {
    display: none;
}

body.dark-mode .logo-dark-mode {
    display: block;

}

body.dark-mode .logo-light {
    display: none;
}



.logo-light {
    display: block;

}

.logo-light:hover,
.logo-dark-mode:hover {
    animation: tada 1s;
}






@keyframes tada {
    0% {
        transform: scale(1);
    }

    10%,
    20% {
        transform: scale(0.9) rotate(-3deg);
    }

    30%,
    50%,
    70% {
        transform: scale(1.1) rotate(3deg);
    }

    40%,
    60% {
        transform: scale(0.9) rotate(-3deg);
    }

    80%,
    90% {
        transform: scale(1.05) rotate(2deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}