body {
    font-family: 'Darker Grotesque', sans-serif;
    color: #252328;
    --green: #8ac539;
    --blue: #1ba7cd;
}

.vertical-tabs-js ul.tabs li.tab-page-slug-js.D\(ifi\) {
    background-color: #000000;
    color: #ffffff;
}

@keyframes toggle {
    from {
        transform: translate(170%, 0);
    }
    50% {
        transform: translate(95%, 60%);
    }
    to {
        transform: translate(0, 0);
    }
}

@keyframes unToggle {
    from {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(95%, 60%);
    }
    to {
        transform: translate(170%, 0);
    }
}


.heart {
    width: var(--size);
    aspect-ratio: 141/92;
    fill: #eee;
    stroke: #ddd;
    stroke-width: 3px;
}

.checkbox {
    --size: 100px;
    transition: transform 0.2s;
}

.checkbox:hover {
    filter: brightness(105%);
}

.checkbox:active {
    transform: scale(92%);
}

.check {
    --csize: 32px;
    --xpos: 7px;
    --ypos: 20px;
    content: "";
    width: var(--csize);
    height: var(--csize);
    top: var(--ypos);
    left: var(--xpos);
    border-radius: 50%;
    will-change: transform;
}

.checkbox > input[type="checkbox"] {
    margin: 0;
    width: 0px;
    height: 0px;
    display: block;
    appearance: none;
}

.check {
    animation: toggle 0.2s;
    animation-fill-mode: forwards;
}

.checkbox > input[type="checkbox"]:checked ~ .check {
    animation: unToggle 0.2s;
    animation-fill-mode: forwards;
}

.checkbox > input[type="checkbox"]:checked ~ .heart {
    fill: #db2777;
    stroke: #be185d;
}

.checkbox > input[type="checkbox"]:checked ~ .check {
    background: #be185d;
}


footer svg path#logoText {
    display: none;
}