* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --hue: 223;
    --trans-dur: 0.4s;
    --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
    font-size: calc(40px + (80 - 40) * (100vw - 320px) / (2560 - 320));
}

body,
input {
    color: hsl(var(--hue), 10%, 10%);
    font: 1em/1.5 sans-serif;
}

body {
    background-color: hsl(var(--hue), 10%, 90%);
    display: flex;
    height: 100vh;
    transition:
        background-color var(--trans-dur),
        color var(--trans-dur);
}

.switch,
.switch__input {
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.switch {
    margin: auto;
}

.switch__input,
.switch__input:before {
    background-color: hsl(var(--hue), 10%, 10%);
}

.switch__input {
    border-radius: 0.75em;
    cursor: pointer;
    display: block;
    width: 3em;
    height: 1.5em;
    transition: background-color var(--trans-dur) var(--trans-timing);
    -webkit-appearance: none;
    appearance: none;
}

.switch__input:before {
    border-radius: 50%;
    content: "";
    display: block;
    position: absolute;
    top: 0.125em;
    left: 0.125em;
    width: 1.25em;
    height: 1.25em;
    transition:
        background-color var(--trans-dur) var(--trans-timing),
        transform var(--trans-dur) var(--trans-timing);
}

.switch__icon,
.switch__icon-part {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.switch__icon {
    background-color: hsl(var(--hue), 10%, 90%);
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    top: 0.125em;
    left: 0.125em;
    width: 1.25em;
    height: 1.25em;
    transition: transform var(--trans-dur) var(--trans-timing);
}

.switch__icon-part {
    transition:
        box-shadow var(--trans-dur) var(--trans-timing),
        transform var(--trans-dur) var(--trans-timing);
}

.switch__icon-part--1,
.switch__icon-part--2,
.switch__icon-part--3 {
    border-radius: 50%;
}

.switch__icon-part--1 {
    background-color: hsl(var(--hue), 10%, 90%);
    top: calc(50% - 0.375em);
    left: calc(50% - 0.375em);
    width: 0.75em;
    height: 0.75em;
}

.switch__icon-part--2 {
    background-color: hsl(var(--hue), 10%, 10%);
    top: calc(50% - 0.4375em);
    left: calc(50% - 0.0625em);
    width: 0.5em;
    height: 0.5em;
    transform: translate(-0.1875em, 0.1875em) scale(0.2);
}

.switch__icon-part--3 {
    box-shadow: 0 0 0 0.625em hsl(var(--hue), 10%, 10%) inset;
    width: 1.25em;
    height: 1.25em;
    transform: scale(0.25);
}

.switch__icon-part--3~.switch__icon-part {
    background-color: hsl(var(--hue), 10%, 10%);
    border-radius: 0.0625em;
    top: 50%;
    left: 50%;
    width: 0.125em;
    height: 0.1875em;
    transform-origin: 50% 0;
}

.switch__icon-part--4 {
    transform: translateX(-50%) rotate(0) translateY(0.25em);
}

.switch__icon-part--5 {
    transform: translateX(-50%) rotate(45deg) translateY(0.25em);
}

.switch__icon-part--6 {
    transform: translateX(-50%) rotate(90deg) translateY(0.25em);
}

.switch__icon-part--7 {
    transform: translateX(-50%) rotate(135deg) translateY(0.25em);
}

.switch__icon-part--8 {
    transform: translateX(-50%) rotate(180deg) translateY(0.25em);
}

.switch__icon-part--9 {
    transform: translateX(-50%) rotate(225deg) translateY(0.25em);
}

.switch__icon-part--10 {
    transform: translateX(-50%) rotate(270deg) translateY(0.25em);
}

.switch__icon-part--11 {
    transform: translateX(-50%) rotate(315deg) translateY(0.25em);
}

.switch__sr {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

/* `:checked` state */
.switch__input:checked {
    background-color: hsl(var(--hue), 10%, 90%);
}

.switch__input:checked:before,
.switch__input:checked~.switch__icon {
    transform: translateX(1.5em);
}

.switch__input:checked~.switch__icon .switch__icon-part--2 {
    transform: translate(0, 0) scale(1);
}

.switch__input:checked~.switch__icon .switch__icon-part--3 {
    box-shadow: 0 0 0 0.25em hsl(var(--hue), 10%, 10%) inset;
    transform: scale(1);
}

.switch__input:checked~.switch__icon .switch__icon-part--4 {
    transform: translateX(-50%) rotate(0) translateY(0.625em) scale(0);
}

.switch__input:checked~.switch__icon .switch__icon-part--5 {
    transform: translateX(-50%) rotate(45deg) translateY(0.625em) scale(0);
}

.switch__input:checked~.switch__icon .switch__icon-part--6 {
    transform: translateX(-50%) rotate(90deg) translateY(0.625em) scale(0);
}

.switch__input:checked~.switch__icon .switch__icon-part--7 {
    transform: translateX(-50%) rotate(135deg) translateY(0.625em) scale(0);
}

.switch__input:checked~.switch__icon .switch__icon-part--8 {
    transform: translateX(-50%) rotate(180deg) translateY(0.625em) scale(0);
}

.switch__input:checked~.switch__icon .switch__icon-part--9 {
    transform: translateX(-50%) rotate(225deg) translateY(0.625em) scale(0);
}

.switch__input:checked~.switch__icon .switch__icon-part--10 {
    transform: translateX(-50%) rotate(270deg) translateY(0.625em) scale(0);
}

.switch__input:checked~.switch__icon .switch__icon-part--11 {
    transform: translateX(-50%) rotate(315deg) translateY(0.625em) scale(0);
}

body:has(.switch__input:checked) {
    background-color: hsl(var(--hue), 10%, 10%);
    color: hsl(var(--hue), 10%, 90%);
}

.container input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
}

.checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 3em;
    width: 3em;
    background-color: #171717;
    border-radius: 10px;
    transition: .2s ease-in-out;
    z-index: 2;
}

.like {
    position: relative;
    font-size: 1em;
    top: -3.5em;
    text-align: center;
    z-index: -1;
}

.icon {
    margin: 0.2em;
    fill: white;
    transition: .4s ease-in-out;
}

.checkmark:hover {
    background-color: white;
}

.checkmark:hover .icon {
    fill: black;
    transform: rotate(-8deg);
    transform-origin: bottom left;
}

.container input:checked~.checkmark {
    background-color: limegreen;
}

.container input:checked~.like {
    color: white;
    animation: 0.6s up_3951;
}

.container input:checked~.checkmark .icon {
    fill: white;
    transform: none;
    animation: 0.5s jump_3951;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container input:checked~.checkmark:after {
    display: block;
}

@keyframes up_3951 {
    100% {
        transform: translateY(-2em);
    }
}

@keyframes jump_3951 {
    50% {
        transform-origin: center;
        transform: translateY(-0.5em) rotate(-8deg);
    }

    100% {
        transform-origin: center;
        transform: translateY(0em);
    }
}