/* Full-screen color display */
.screen {
    width: 100vw;
    height: 100vh;
    background-color: white; /* Default color */
}

/* Style for the color wheel container */
.color-wheel-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 50%; /* Keep the wheel circular */
    transition: width 0.3s ease, height 0.3s ease;
}

/* Style for the color wheel */
.color-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: conic-gradient(
        red, yellow, lime, cyan, blue, magenta, red
    );
}

/* Expanded color wheel - keeps it circular */
.color-wheel-container.expanded {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Maintain circular shape when expanded */
}