:root {
    --bcg: rgb(40, 44, 52);
    --font: rgb(171, 178, 191);
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: var(--bcg);
    font-size: 20px;
    font-family: "Shadows Into Light", cursive;
    font-style: normal;
    font-weight: 800;
    color: var(--font);
}
#main,
#preview {
    position: absolute;
    top: 3%;
    cursor: crosshair;
}
#xy {
    position: absolute;
    font-family: Consolas;
}
#control {
    display: flex;
    align-items: center;
    gap: 16px;
    position: absolute;
    bottom: 6px;
}
button {
    all: unset;
    box-shadow: rgba(0, 0, 0, 0.4) 4px 2px 4px, rgba(255, 255, 255, 0.4) -4px -2px 4px, rgba(0, 0, 0, 0.4) -4px -2px 2px inset;
    width: 60px;
    height: 40px;
    transition: all 0.2s;
    background: var(--bcg);
    cursor: pointer;
    border-radius: 8px;
    color: var(--font);
    text-align: center;
}
button:hover {
    box-shadow: rgba(0, 0, 0, 0.3) 4px 2px 6px, rgba(255, 255, 255, 0.4) -4px -2px 6px, rgba(0, 0, 0, 0.3) -4px -2px 4px inset;
    filter: brightness(1.2);
    transform: scale(1.05);
}
button:active {
    box-shadow: rgba(0, 0, 0, 0.4) 4px 2px 4px inset, rgba(255, 255, 255, 0.4) -4px -2px 2px inset;
    filter: brightness(0.6);
    transform: scale(0.8);
    background: var(--bcg);
    color: var(--font);
}
button.clicked {
    box-shadow: rgba(0, 0, 0, 0.2) 4px 2px 4px inset, rgba(255, 255, 255, 0.2) -4px -2px 2px inset;
    filter: brightness(0.9);
    transform: scale(0.9);
    background: var(--bcg);
    cursor: not-allowed;
    color: var(--font);
}