body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif sans-serif;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* style the color input */
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 8px;
}

/* smooth fade for everything */
.fade-element {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#floating-ui {
    transform: translateX(-50%) translateY(15px);
}

#hint-text {
    transform: translateX(-50%) translateY(0);
}