* {
    transition:
        background-color 0.5s ease,
        background 0.5s ease;
}

:root {
    --offcanvas-width: 270px;
    --topNavbarHeight: 56px;
    --white-color: #fff;
    --bg-base-color-one: #e5eaf3;
    --bg-base-color-two: #607adb;
    --bg-base-color-three: #7671fa;
    --bg-base-color-four: #1a1a1a;
    --text-color: #ffffff;
}

.nav {
    background: var(--bg-base-color-two);
}

.sidebar {
    width: var(--offcanvas-width) !important;
    background: var(--bg-base-color-two);
    color: var(--bg-base-color-one);
}

textarea {
    resize: none;
    height: 150px;
}

section {
    overflow-x: hidden;
}

.home {
    background: linear-gradient(
        to bottom,
        var(--white-color) 97%,
        var(--bg-base-color-one)
    );
}

.home .button-view-resume {
    background: var(--bg-base-color-three) !important;
    color: var(--bg-base-color-one) !important;
}

.about {
    background: linear-gradient(
        to bottom,
        var(--bg-base-color-one) 97%,
        var(--white-color)
    );
}

.about .button-read-more {
    background: var(--bg-base-color-three) !important;
    color: var(--bg-base-color-one) !important;
}

.projects {
    background: linear-gradient(
        to bottom,
        var(--white-color) 97%,
        var(--bg-base-color-one)
    );
}

.button-projects {
    background: var(--bg-base-color-three) !important;
    color: var(--bg-base-color-one) !important;
}

.contact {
    background: linear-gradient(
        to bottom,
        var(--bg-base-color-one) 97%,
        var(--white-color)
    );
}

.contact .button-send-form {
    background: var(--bg-base-color-three) !important;
    color: var(--bg-base-color-one) !important;
}

.footer {
    background: var(--bg-base-color-two);
}

.footer-text {
    color: var(--bg-base-color-one);
}

/* Dark Mode Toggle Styles */
.dark-mode-toggle {
    position: fixed;
    right: 10px;
    bottom: 30px;
}

.dark-mode-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #1939af;
    border-radius: 30px;
    position: relative;
    border: none;
    outline: none;
}

.dark-mode-button i {
    font-size: 18px;
    padding: 5px 2px;
    margin: 2px 0;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark-mode-button .dark-mode-ball {
    width: 27.5px;
    height: 27.5px;
    background: var(--text-color);
    border-radius: 50%;
    position: absolute;
    transform: translateY(-16px);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark-mode-button.active {
    background: #2c3e50;
}

.dark-mode-ball.active {
    /* position: absolute; */
    transform: translateY(15px);
    background: #ded60e;
}

.nav.dark-mode {
    background: #057f46;
}

.sidebar.dark-mode {
    background: #057f46;
}

.home.dark-mode {
    background: linear-gradient(to bottom, var(--bg-base-color-four) 97%, #222);
    color: var(--text-color);
}

.home .button-view-resume.dark-mode {
    background: #13c773 !important;
}

.about.dark-mode {
    background: linear-gradient(to bottom, #222 97%, var(--bg-base-color-four));
    color: var(--text-color);
}

.about .button-read-more.dark-mode {
    background: #13c773 !important;
}

.projects.dark-mode {
    background: linear-gradient(to bottom, var(--bg-base-color-four) 97%, #222);
    color: var(--text-color);
}

.button-projects.dark-mode {
    background: #13c773 !important;
}

.card-projects.dark-mode {
    background: #333;
    color: var(--text-color);
    box-shadow: 0 0 1px var(--text-color);
}

.contact.dark-mode {
    background: linear-gradient(to bottom, #222 97%, var(--bg-base-color-four));
    color: var(--text-color);
}
.card-form.dark-mode {
    background: #333;
    color: var(--text-color);
}

.card-form form input.dark-mode,
.card-form form input.dark-mode::placeholder,
.card-form form textarea.dark-mode {
    background: #333 !important;
    color: var(--text-color) !important;
}

.card-form form input.dark-mode:focus,
.card form textarea.dark-mode:focus {
    box-shadow: 0 0 3px 2px rgba(19, 199, 115, 0.8) !important;
    border: 1px solid #0af487;
}

.contact .button-send-form.dark-mode {
    background: #13c773 !important;
}

.footer.dark-mode {
    background: #057f46;
}