.theme-toggle__wrapper {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 34px;
    cursor: pointer;
}

.theme-toggle__input {
    opacity: 0;
    width: 0;
    height: 0;
}


.theme-toggle__slider {
    position: absolute;
    inset: 0;
    background-color: #73C0FC;
    border-radius: 30px;
    transition: 0.4s;
}

.theme-toggle__slider::before {
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    left: 2px;
    bottom: 2px;
    background-color: #e8e8e8;
    border-radius: 50%;
    transition: 0.4s;
    z-index: 2;
}


.theme-toggle__icon {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 1;
    transition: 0.4s;
}


.theme-toggle__icon--sun {
    top: 6px;
    left: 36px;
}


.theme-toggle__icon--moon {
    top: 5px;
    left: 5px;
    fill: #73C0FC;
}

.theme-toggle__wrapper:hover .theme-toggle__icon--sun {
    animation: rotate 10s linear infinite;
}

.theme-toggle__wrapper:hover .theme-toggle__icon--moon {
    animation: tilt 5s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes tilt {

    0%,
    100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }
}

.theme-toggle__input:checked+.theme-toggle__slider {
    background-color: #183153;
}

.theme-toggle__input:checked+.theme-toggle__slider::before {
    transform: translateX(30px);
}
.theme-toggle__wrapper:has(.theme-toggle__input:checked) .theme-toggle__icon--sun {
    opacity: 0;
}

.theme-toggle__wrapper:has(.theme-toggle__input:checked) .theme-toggle__icon--moon {
    opacity: 1;
}

.theme-toggle__icon--sun {
    opacity: 1;
}

.theme-toggle__icon--moon {
    opacity: 0;
}

.theme-toggle__input:checked~.theme-toggle__icon--sun {
    opacity: 0;
}

.theme-toggle__input:checked~.theme-toggle__icon--moon {
    opacity: 1;
}


.theme-toggle__label {
    cursor: pointer;
}


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


body.dark-mode .card {
    background-color: #1e1e1e;
    border-color: #333;
}

body.dark-mode a {
    color: #90caf9;
}