.checkbox-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.checkbox-container span {
    padding-left: 10px;
    font-size: 1em;
    font-weight: 300;
}

.checkbox {
    --background: #fff;
    --border: #D1D6EE;
    --border-hover: #BBC1E1;
    --border-active: var(--primary-color);
    --tick: #fff;
    position: relative;
}
    .checkbox,
    .checkbox input,
    .checkbox svg {
        width: 21px;
        height: 21px;
        display: block;
    }

    .checkbox input {
        -webkit-appearance: none;
        -moz-appearance: none;
        position: relative;
        outline: none;
        background: var(--background);
        border: none;
        margin: 0;
        padding: 0;
        cursor: pointer;
        border-radius: 4px;
        -webkit-transition: box-shadow .3s;
        transition: box-shadow .3s;
        box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));
    }

        .checkbox input:hover {
            --s: 2px;
            --b: var(--border-hover);
        }

        .checkbox input:checked {
            --b: var(--border-active);
        }

    .checkbox svg {
        pointer-events: none;
        fill: none;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke: var(--stroke, var(--border-active));
        position: absolute;
        top: 0;
        left: 0;
        width: 21px;
        height: 21px;
        -webkit-transform: scale(var(--scale, 1)) translateZ(0);
        transform: scale(var(--scale, 1)) translateZ(0);
    }

    .checkbox.path input:checked {
        --s: 2px;
        -webkit-transition-delay: .4s;
        transition-delay: .4s;
    }

        .checkbox.path input:checked + svg {
            --a: 16.1 86.12;
            --o: 102.22;
        }

    .checkbox.path svg {
        stroke-dasharray: var(--a, 86.12);
        stroke-dashoffset: var(--o, 86.12);
        -webkit-transition: stroke-dasharray .6s, stroke-dashoffset .6s;
        transition: stroke-dasharray .6s, stroke-dashoffset .6s;
    }

    .checkbox.bounce {
        --stroke: var(--tick);
    }

        .checkbox.bounce input:checked {
            --s: 11px;
        }

            .checkbox.bounce input:checked + svg {
                -webkit-animation: bounce .4s linear forwards .2s;
                animation: bounce .4s linear forwards .2s;
            }

        .checkbox.bounce svg {
            --scale: 0;
        }

@-webkit-keyframes bounce {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes bounce {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
}

    *:before, *:after {
        box-sizing: inherit;
    }

    body .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 24px;
    }

    body .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
    }

        body .dribbble img {
            display: block;
            height: 28px;
        }

    body .twitter {
        position: fixed;
        display: block;
        right: 64px;
        bottom: 14px;
    }

        body .twitter svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }