@keyframes fadein {
    from { opacity: 0; transform: translateY(30px);}
    to   { opacity: 1; transform: translateY(0);}
}
.animate-fadein {
    opacity: 0;
    animation: fadein 0.8s cubic-bezier(.23,.89,.69,1.08) forwards;
}
.animate-fadein.delay-1 {
    animation-delay: 0.4s;
}
.animate-fadein.delay-2 {
    animation-delay: 0.8s;
}

.checkbox {
    opacity: 0;
    position: absolute;
}
.label {
    background-color: darkgray;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    position: relative;
    height: 23px;
    width: 45px;
    margin-top: 2px;
}

.label .ball {
    background-color: gray;
    border-radius: 50%;
    position: absolute;
    top: 1.5px;
    left: 1.5px;
    height: 20px;
    width: 20px;
    transform: translateX(0px);
    transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
    transform: translateX(21px); /* 45 - 20 - 1.5*2 ≈ 21 */
}

.fa-moon {
    color: #f1c40f;
}

.fa-sun {
    color: #f39c12;
}

.footer {
    height: 2.8rem;
    background-color: #888888;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.cptext {
    color: #ffffff;
    font-weight: lighter;
    font-size: 0.8rem;
}

/* Sötét téma */
:root[data-bs-theme="dark"] .footer {
    background-color: #343a40;
    box-shadow: 0 -2px 5px rgb(78, 89, 97);
}

:root[data-bs-theme="dark"] .cptext {
    color: #ffffff;
}