body {
    transition-duration: 0.3s;
    transition-property: color, background, border-color, max-width;
}

#body-width-range::-webkit-slider-thumb {
    transition-duration: 0.3s;
    transition-property: color, background, border-color;
}

#body-width-range::-moz-slider-thumb {
    transition-duration: 0.3s;
    transition-property: color, background, border-color;
}

.button, .preview {
    transition: background 0.2s;
}

.slider {
    transition: background 0.4s;
}

.slider::after {
    transition: left 0.4s, background 0.2s;
}

.slider:hover::after {
    background: var(--slider-hover);
}

.copy-button {
    transition-duration: 0.2s;
    transition-property: background, box-shadow, opacity;
}

.copy-tooltip {
    transition-duration: 0.2s;
    transition-property: opacity;
}

@keyframes copy-tooltip {
    0%, 10%, 100% {
        content: "Copied";
        font-size: 1em;
    }

    5% {
        font-size: 1.1em;
    }
}