body {
    margin: 0;
    overflow: hidden; /* Prevents scrolling */
}

#palette {
    position: fixed;
    bottom: 10px;
    left: 10px;
    display: flex;
}

.color {
    width: 30px;
    height: 30px;
    margin: 5px;
    cursor: pointer; /* Changes cursor to pointer for clickable elements */
}

#drawingArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 90vh;
    border: solid black 1px;
}

@keyframes wobble {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.wobble {
    animation: wobble 0.3s infinite; /* Wobble animation */
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.blink {
    animation: blink 1s infinite; /* Blink animation */
}